麒麟子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

发布了232 篇原创文章 · 获赞 542 · 访问量 118万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览