技能CD、头像倒计时这类是游戏中经常出现的一类效果,而具体如何来实现?
本文将以头像倒计时为例来讲解说明。先上效果图:
一、实现方案
1、倒计时进度
涉及倒计时,肯定需要考虑倒计时进度推进的表现。这里我们使用Sprite精灵组件。平时我们经常使用Sprite来显示图像,这里我们同样通过Sprite来显示头像框图片,
查看Sprite文档我们发现Sprite有一个渲染模式Type为填充类型(Filled),填充模式(Filled)支持RADIAL(扇形填充),正好可以满足我们想要的进度填充效果。而对于具体的进度值的控制我们则可以通过代码定时控制Fill Start、Fill Range等属性值的改变填充进度的表现。UI节点属性设置如下:
基于上述基本思路,具体逻辑实现我们需要解决两个问题:
(1)进度计算
其实进度计算到思路很简单,开始倒计时获取当前时间戳,定时更新过程中不断获取对应到时间断的时间戳,计算已经执行了的时长cur_step,然后与总时长all_step相比较计算已经填充的百分比,然后来设置Sprite的fillRange即可。
但这地方需要注意的一点是实际应用中考虑到断线重连等情况,可能需要对当前时长cur_step进行额外处理。这里就涉及到两个时间:总时间normal_sces、剩余时间wait_sces。根据两者之差即可计算出已经执行了到时长cur_step,然后在定时更新时基于该值去计算新到已执行时长即可。
(2)定时更新
提到定时更新,首先可能想到了开启一个定时器来不断刷新,虽然可以实现功能,但此处个人倾向于另外一个实现方式:重复的action动作,即将进度更新逻辑封装为一个回调函数,然后整合到cc.repeatForever中,通过头像精灵对象节点执行runAction来实现。
具体代码实现:
showCountdown()
{
let wait_sces = 30 * 1000; //剩余倒计时时间
let normal_sces = 30 * 1000; //总倒计时时间
let bStartWithZero = (wait_sces == normal_sces)