【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器

淩亂°似流年 2022-08-04 01:00 214阅读 0赞

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

ProgressAction需要用到两个函数：

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

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

percent：进度的百分比

2.cc.ProgressTimer.create(sprite);

sprite：精灵类的图片

我们先从扇形类型的说起吧。

代码如下：

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** to1 = cc.ProgressTo.create(5, 100);  //定义好经历的时间和百分比  
2.  **var** to2 = cc.ProgressTo.create(8, 100);  
3.    
4.  **var** left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
5.  left.setType(cc.PROGRESS\_TIMER\_TYPE\_RADIAL); //设置进度的类型为扇形  
6.  left.setPosition(cc.p(size.width/4, size.height / 2));  
7.  **this**.addChild(left);  
8.  left.runAction(to1); //执行动作  
9.    
10. **var** right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
11. right.setType(cc.PROGRESS\_TIMER\_TYPE\_RADIAL);  
12. right.setReverseDirection(**true**); //设置反方向进行旋转  
13. right.setPosition(cc.p(size.width/4\*3, size.height / 2));  
14. **this**.addChild(right);  
15. right.runAction(cc.RepeatForever.create(to2));

效果如下：

![SouthEast][]

如果你可以运行起来，你会发现，由于我设置左边的时间为5秒，右边的为8秒，左边会很快执行完，而且左边只执行了一次，右边会一直反复的运动，从这里也可以看出cc.ProgressTo其实是一个Action。

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

代码如下：

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
2.  left.setType(cc.PROGRESS\_TIMER\_TYPE\_RADIAL); //设置进度的类型为扇形  
3.  left.setPosition(cc.p(size.width/4, size.height / 2));  
4.  **this**.addChild(left);  
5.  left.runAction(cc.ProgressTo.create(5, 70)); //由于ProgressTo是一个动作，为了方便，可以直接写在runAction中  
6.    
7.  **var** right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
8.  right.setType(cc.PROGRESS\_TIMER\_TYPE\_RADIAL);  
9.  right.setReverseDirection(**true**); //设置反方向进行旋转  
10. right.setPosition(cc.p(size.width/4\*3, size.height / 2));  
11. **this**.addChild(right);  
12. right.runAction(cc.ProgressTo.create(8, 100)); //left的百分比是70，而right是100

效果如下：

![SouthEast 1][]

可以看到左边会在图片的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代表从右往左。

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

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** to1 = cc.ProgressTo.create(5, 100);  
2.  **var** to2 = cc.ProgressTo.create(2, 100);  
3.    
4.  **var** left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
5.  left.setType(cc.PROGRESS\_TIMER\_TYPE\_BAR);  
6.  left.setBarChangeRate(cc.p(1, 0));  
7.  left.setMidpoint(cc.p(0, 0));  
8.  **this**.addChild(left);  
9.  left.setPosition(cc.p(size.width/4, size.height/2));  
10. left.runAction(cc.RepeatForever.create(to1));  
11.   
12. **var** right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
13. right.setType(cc.PROGRESS\_TIMER\_TYPE\_BAR);  
14. right.setBarChangeRate(cc.p(1, 0));  
15. right.setMidpoint(cc.p(1, 0));  
16. **this**.addChild(right);  
17. right.setPosition(cc.p(size.width/4\*3, size.height/2));  
18. right.runAction(cc.RepeatForever.create(to2));

效果如下：

![SouthEast 2][]

竖直进度条的代码：

**\[javascript\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **var** to1 = cc.ProgressTo.create(5, 100);  
2.  **var** to2 = cc.ProgressTo.create(2, 100);  
3.    
4.  **var** left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
5.  left.setType(cc.PROGRESS\_TIMER\_TYPE\_BAR);  
6.  left.setBarChangeRate(cc.p(0, 1));  
7.  left.setMidpoint(cc.p(0, 0));  
8.  **this**.addChild(left);  
9.  left.setPosition(cc.p(size.width/4, size.height/2));  
10. left.runAction(cc.RepeatForever.create(to1));  
11.   
12. **var** right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));  
13. right.setType(cc.PROGRESS\_TIMER\_TYPE\_BAR);  
14. right.setBarChangeRate(cc.p(0, 1));  
15. right.setMidpoint(cc.p(0, 1));  
16. **this**.addChild(right);  
17. right.setPosition(cc.p(size.width/4\*3, size.height/2));  
18. right.runAction(cc.RepeatForever.create(to2));

效果如下：

![SouthEast 3][]

我想通过这几个实例可以弄明白这个进度条的走向和方向了吧，关键就是在于理解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

[view plain]: http://blog.csdn.net/w337198302/article/details/18380789?utm_source=tuicool#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/160066
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/160066/fork
[SouthEast]: /images/20220731/b85556efdc58434ebf01560a285a9807.png
[SouthEast 1]: /images/20220731/d6d73c55c11c430cae23eb0155a72372.png
[SouthEast 2]: /images/20220731/23deeb90d1b94074accb37f1da717223.png
[SouthEast 3]: /images/20220731/f5a99fa2859246d78c5f429bbd836f65.png