cocosjs Timer设计及带进度效果的LoadingBar
cocosjs Timer设计及带进度效果的LoadingBar
游戏开发中常常会有这样的功能需求,每隔一段时间触发事件,
如捕鱼达人中,按住屏幕每隔一小段时间会发一颗子弹,
如倒计时,从指定时间开始倒计时,时间为0时触发事件,
如计算通过关卡用了多长时间,从关卡开始就从0开始正向计时,
如进度条效果,从当前进度到指定进度,可以换算成时间来处理。
可以将类似的需求功能封装起来,设置一些属性和回调函数,开启update更新时间,这样就无需关心内部处理,只需要在回调函数里面处理我们关心的事情,下面来看看几种类型的Timer设计。
类型分类:
Timer:最基础的定时器,只需设置间隔和回调函数,每次时间间隔一到就会调用回调函数,如此循环,可用在类似打一发出多颗子弹的场景,如每隔0.2秒发一颗子弹,那么设置间隔为0.2,设置回调函数,开启update,那么我们只需要在回调函数里生成一个子弹对象让它向目标移动过去就好了。
CountDownTimer:倒计时器,设置总时间,设置秒回调函数,设置倒计为0时的回调函数,开启update,在秒回调函数里可以得到剩余的时间,格式化成想要的格式,如刀塔传奇一进入战斗时倒计时3分钟,每隔一秒会刷新时间显示,时间为0时游戏失败。这种场景可用CountDownTimer。
CalcTimer:正向计时器,即从0开始,时间往上每秒递增,设置秒回调函数,设置分钟回调函数,开始update计算时间,在秒回调函数和分钟回调函数中可以处理对应的逻辑,如QQ飞车中,跑完一局比赛用了多少时间,游戏过程中时间会不断往上增长。
QuantumTimer:定量计时器,需要一个开始时间,一个结束时间,一个秒回调函数,一个到达结束时间的回调函数,可使用在带进度效果的进度条上,即从当前进度到指定进度有一个过程,而不是直接就到目标进度,实现原理是将进度转换成时间,当前进度转换为开始时间,目标进度转换为结束时间,这样就可以用定量计时器实现带进度效果的LoadingBar。
实现原理:
原理非常简单,开启update可得到每一帧所消耗的时间,将每一帧所消耗的时间累加起来与时间间隔比较,如大于时间间隔则调用回调函数,将消耗时间置为0,进行新一轮累加。
倒计时器CountDownTimer,正向计时器CalcTimer,定量计时器QuantumTimer内部都包含了Timer;
倒计时器CountDownTimer,知道总时间,内部带有一个Timer,为秒表,可设置成每一秒回调一次,这样用当前总时间减去秒数就可以得到剩余的时间,再调用回调函数将时间返回出去,外部再格式化成想要的格式显示就可以了。当总时间减到0时调用时间结束回调函数,外部做对应的处理。
正向计时器CalcTimer跟倒计时器相似,只是它是正向增长,而倒计时器是逆向增长,同样内部带有一个Timer,为秒表,可设置成每一秒回调一次,这样将秒数累加,再调用回调函数将时间返回出去,外部再格式化成想要的格式显示就可以了。
定量计时器QuantumTimer内部也带有一个Timer,为秒表,它需要一个开始时间和一个结束时间,一个到达结束时间的回调函数,如开始时间为60秒,结束时间为120秒,间隔为1秒,那么每隔一秒会回调一次秒回调函数,当时间到达120秒时,会调用结束时间函数。
带进度效果的LoadingBar实现原理,内部创建一个定量定时器,设定0%增长到100%用时1秒,那么每增长1%用时0.01秒,假设当前进度为70%,目标进度为100%,那么定量计时器的开始时间为0.7,结束时间为1,间隔为0.01,这样在秒回调函数里取得当前时间再转换成进度再设置,就可以实现进度效果了。
Demo gitHub地址: https://github.com/malloyz/timer/