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