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

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

麒麟子Cocos Creator实用技巧
麒麟子Cocos Creator实用技巧大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不 ...
麒麟子Cocos Creator实用技巧八：回合战棋类RPG战斗效果
HELLO,大家好,我是麒麟子.作为Cocos社区高产用户,今天又给大家带来了一个看起来很酷,但实际上大多数人用不到的DEMO. 不知道大家是否记得梦幻西游.问道.英雄无敌.仙剑奇侠传.神仙道.神曲O ...
麒麟子Cocos Creator实用技巧六：游戏背景拖拽实现
麒麟子做了一个DEMO给大家,这个DEMO很简单,大家可以按下鼠标,或者在手机上按住不放. 拖拽背景,背景会根据拖拽移动. 同时会保证背景边缘不会越过父节点的上下左右边界在线演示:https://q ...
麒麟子Cocos Creator实用技巧七：方向与角度转换
麒麟子做了一个Demo给大家,向大家演示了方向转角度,角度转方向的应用. Demo中有两个坦克,中间的坦克锁定了另一个坦克,始终把自己的炮口对准它,并且会不停地发朝另一个坦克发射炮弹. 发出来的炮弹会 ...
麒麟子Cocos Creator实用技巧一：如何正确地显示微信头像
不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http ...
麒麟子Cocos Creator实用技巧二：微信名字截断（支持表情）
在我们日常游戏开发中,经常会面临将玩家名字截断的需求. 假如玩家是在我们游戏中创建的名字,那么可以简单粗暴地禁止玩家使用手机表情输入即可. 但如果我们是第三方账号登录,且使用了第三方账号的用户昵称,那 ...
麒麟子Cocos Creator实用技巧十：function this self ()={}详解
先说一声对不起,这篇文章本应该是昨天写的.(强行假装有很多人在等着看) 昨天聚众饮酒去了,喝醉了,可能喝了有两百多瓶吧. 有人就说啦,唉麒麟子,你怎么老爱吹牛*,动不动就两百多瓶,你真当自己是牛么. ...
麒麟子Cocos Creator实用技巧四：打包原生App截图白屏解决方案
大家在做棋牌App或者一些特定需求的时候,需要截取当前游戏屏幕内容保存. 我们一般是采用cc.RenderTexture来截图并保存到游戏的可写目录有时候会遇上,截出来的图片是白屏,或者部分白屏. ...
麒麟子Cocos Creator 3D研究笔记五：模型骨骼动画查看器
负一.先说两句本文索引是负一开头,那是因为这一小节是最后加上来的.为了不牵一发动全身,就这样最好了. 写文章每次要自称的时候,麒麟子三个字打着太费劲,以后文章中,我就叫自己阿子吧. 大家从今天 ...

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

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

最新文章

热门文章