cocos2d ProgressTimer

咱们在玩大型RPG游戏中，常常能够看到每一个人物会有不少的技能，技能在施放的时候，可能须要吟唱一段时间，此时屏幕上会有个水平的时间条计时，当技能施放事后，又有CD时间，即所谓的冷却，这个时候技能槽就会呈现一个扇形转圈的时间倒计时。在Cocos2d-html5中，咱们依然能够十分轻松的将这个两种时间进度表现出来，就是ProgressAction。因为篇幅可能比较多，我打算分两次来阐述。

 

ProgressAction须要用到两个函数：

1.cc.ProgressTo.create(duration, percent);

duration：进度计时器的时间周期（单次）

percent：进度的百分比

 

2.cc.ProgressTimer.create(sprite);

sprite：精灵类的图片

 

咱们先从扇形类型的提及吧。

代码以下：

var to1 = cc.ProgressTo.create(5, 100);  //定义好经历的时间和百分比 
var to2 = cc.ProgressTo.create(8, 100); var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); left.setType(cc.PROGRESS_TIMER_TYPE_RADIAL); //设置进度的类型形 
left.setPosition(cc.p(size.width/4, size.height / 2)); this.addChild(left); left.runAction(to1); //执行动做 
  
var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); right.setType(cc.PROGRESS_TIMER_TYPE_RADIAL); right.setReverseDirection(true); //设置反方向进行旋转 
right.setPosition(cc.p(size.width/4*3, size.height / 2)); this.addChild(right); right.runAction(cc.RepeatForever.create(to2)); 

效果以下：

 

若是你能够运行起来，你会发现，因为我设置左边的时间为5秒，右边的为8秒，左边会很快执行完，并且左边只执行了一次，右边会一直反复的运动，从这里也能够看出cc.ProgressTo实际上是一个Action。

 

下面我调整一下百分比，而且都只执行一次，咱们看下结果。

代码以下：

var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); left.setType(cc.PROGRESS_TIMER_TYPE_RADIAL); //设置进度的类型为扇形 
left.setPosition(cc.p(size.width/4, size.height / 2)); this.addChild(left); left.runAction(cc.ProgressTo.create(5, 70)); //因为ProgressTo是一个动做，为了方便，能够直接写在runAction中 
  
var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); right.setType(cc.PROGRESS_TIMER_TYPE_RADIAL); right.setReverseDirection(true); //设置反方向进行旋转 
right.setPosition(cc.p(size.width/4*3, size.height / 2)); this.addChild(right); right.runAction(cc.ProgressTo.create(8, 100)); //left的百分比是70，而right是100 

效果以下：

 

 

能够看到左边会在图片的70%的地方结束，而且这70%所花的时间是5秒，而不是5*70%！

 

接着咱们再看下条形进度计时器。

这里有两个很重要的方法：

setBarChangeRate(barChangeRate) 设置进度条的方向，即水平或者垂直进度条

setMidpoint(mpoint) 设置进度条的走向，即若为水平方向控制从左到右仍是从右到左，若为垂直方向控制从上到下仍是从下到上

 

注：这两个方法的参数都是cc.point类型的，setMidpoint是受限于setBarChangeRate参数的，好比水平进度条，setBarChangeRate(cc.p(1,0)) ,如x为1，y为0，那么setMidpoint的参数y就不起做用了，只有x能够设置1或者0，0表明从左往右，1表明从右往左。

 

下面给出水平的进度条代码：

var to1 = cc.ProgressTo.create(5, 100); var to2 = cc.ProgressTo.create(2, 100); var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); left.setType(cc.PROGRESS_TIMER_TYPE_BAR); left.setBarChangeRate(cc.p(1, 0)); left.setMidpoint(cc.p(0, 0)); this.addChild(left); left.setPosition(cc.p(size.width/4, size.height/2)); left.runAction(cc.RepeatForever.create(to1)); var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); right.setType(cc.PROGRESS_TIMER_TYPE_BAR); right.setBarChangeRate(cc.p(1, 0)); right.setMidpoint(cc.p(1, 0)); this.addChild(right); right.setPosition(cc.p(size.width/4*3, size.height/2)); right.runAction(cc.RepeatForever.create(to2)); 

效果以下：

 

竖直进度条的代码：

var to1 = cc.ProgressTo.create(5, 100); var to2 = cc.ProgressTo.create(2, 100); var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); left.setType(cc.PROGRESS_TIMER_TYPE_BAR); left.setBarChangeRate(cc.p(0, 1)); left.setMidpoint(cc.p(0, 0)); this.addChild(left); left.setPosition(cc.p(size.width/4, size.height/2)); left.runAction(cc.RepeatForever.create(to1)); var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png")); right.setType(cc.PROGRESS_TIMER_TYPE_BAR); right.setBarChangeRate(cc.p(0, 1)); right.setMidpoint(cc.p(0, 1)); this.addChild(right); right.setPosition(cc.p(size.width/4*3, size.height/2)); right.runAction(cc.RepeatForever.create(to2)); 

效果以下：

 

 

我想经过这几个实例能够弄明白这个进度条的走向和方向了吧，关键就是在于理解setBarChangeRate和setMidpoint这两个方法，下一节继续讨论这个进度计时器的知识点。

 PS：cocos2d-js3.0之后写法跟以前不一样：

var healthBar = cc.ProgressTimer.create(cc.Sprite.create("health_bar1.png")); healthBar.setType(cc.ProgressTimer.TYPE_BAR); healthBar.setBarChangeRate(cc.p(1,0)); healthBar.setMidpoint(cc.p(0,0)); healthBar.setPosition(cc.winSize.width/2, cc.winSize.height/2); this.getParent().addChild(healthBar, 1); var to1 = cc.progressTo(5, 100); healthBar.runAction(to1);

源引：http://blog.csdn.net/w337198302/article/details/18380789?utm_source=tuicool