【Cocos2d-html5遊戲引擎學習筆記(13)】ProgressAction進度計時器（1）

我們在玩大型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) 設定進度條的走向，即若為水平方向控制從左至右還是從右至左，若為垂直方向控制從上到下還是從下到上

下面給出水平的進度條代碼：

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這兩個方法，下一節繼續討論這個進度計時器的知識點。

不早了，睡覺了。。。