麒麟子Cocos Creator实用技巧五：技能CD效果制作

今天带给大家的是一个关于技能CD的效果制作。

此效果不仅可以用于技能CD，一些按钮的CD也是可以用的。

为了照顾大家迫不及待（猴急）的心情，我写了一个DEMO给大家。DEMO上面做了5个英雄的技能和一个XP技能的CD，且它们的CD时间是不一样的。 并且如果技能出现CD，再次点击是无效的。 相关代码可以直接复用。 

在线演示：https://qilinzi.ukylin.net?lesson=05

---

麒麟子一开始预备了两个套路

一、是准备100张图片，然后根据CD进度进行切换

---

对于第一个方案，肯定是可行的，且不需要引擎提供特殊支持。而由于麒麟子的PS功力有限，没有折腾出来。值得说明的是，此方案适用于任何引擎，只要有对应的美术图片配合就行

二、绘制100个Graphics作为缓存，然后根据CD进度进行切换

---

麒麟子创建了一个节点，添加了一个cc.Graphics组件。 最后发现，cc.Graphics的arc函数，并不能绘制出我想要的效果。 既然没有直接支持的函数，想必Cocos Creator并不推荐这样的操作。 放弃了。

 

思索了半分钟，抱着试一试的心态，打开了ProgressBar的组件，毕竟，CD效果从本质上来说，是一个倒着播放的进度条。

三、最终，找到了基于ProgressBar组件的解决方案

---

1、场景树右键 --> 新建 --> UI组件 -->ProgressBar组件

2、修改New ProgressBar以及其子节点bar的 宽高， 调为正方形，且锚点为0.5,0.5

3、修改bar的填充模式，如下（注意红色箭头部分）

 

4、修改New ProgressBar的参数如下（注意红色箭头部分)

 

然后拖动Progress就能看到变化了。

 

四、DEMO

---

DEMO向大家展示了以下内容

1、技能点击响应

2、技能CD根据不同的时间，进行CD效果旋转

3、为了匹配技能效果，我旋转了技能CD层的节点

DEMO源代码地址 https://gitee.com/qilinzi/qlz_ccc_tips      目录05_skill_cd

在线演示：https://qilinzi.ukylin.net?lesson=05