猿问

用h5的canvas做游戏用到了requestAnimationFrame来刷新画面,然后我在考虑角色移动是用上面的函数呢各位有什么建议?

用h5的canvas做游戏用到了requestAnimationFrame来刷新画面,然后我在考虑角色移动是用上面的函数呢还是用settimeout回调呢?问题卡点是在角色移动速度必须是固定的,例如1秒移动64px,还必须是平滑移动
智慧大石
浏览 287回答 2
2回答

人到中年有点甜

可以通过在requestAnimationFrame的回调里获取实时时间,并通过时间差计算来确定某一事件的执行时机和参数。对于固定频率的任务,可以预先计算好每两帧之间的差量,在回调里应用这一差量,这种方法实时计算量较小,可以优化性能。对于频率不固定的任务,则需要确定其参数-时间函数,在回调里执行该函数,获得与初始帧的差量,并应用此差量,这种方法相对直观,但是如果计算时间过长,会降低动画的帧率。letlastFrameMoment=Date.now();lettotalDurations=0;constanimationRequiredDuration=123456;//随便写的,具体值需要按所需频率进行计算constframeHandler=()=>{window.requestAnimationFrame(function(){constthisMoment=Date.now();totalDurations+=thisMoment-lastFrameMoment;lastFrameMoment=thisMoment;if(totalDurations>=animationRequiredDuration){//在这里执行画布重绘函数totalDurations=0;//重置,进入下一个帧的计时}frameHandler();//递归调用});}这样的好处是这个时间差可以用于任何需要固定频率的任务,比如游戏里不止有一种角色的时候,如果封装得当,每个角色只要注册自己的频率和开始时间,将这些参数push到一个任务队列里,就可以自动计算每个任务需要在哪些帧执行,并且将同一帧的所有任务合并计算,减少重绘画布的次数以优化性能,而不是给每个角色都弄一个定时器,毕竟使用了定时器之后,requestAnimationFrame其实就没多大意义了。

侃侃尔雅

game-loop了解一下.你这个问题实际上就frame-based与time-based的选择.基于帧实现简单,但不同设备运行的频率可能不一致,会产生影响游戏功能的问题.以打地鼠为例.假设地鼠的生命周期是10帧,性能差的设备更新一帧花的时间比性能强的设备长,那地鼠的实际存活时间就长--换句话说,用旧设备的玩家将占优势.基于时间相对复杂,将游戏更新与画面更新拆开,但既然拆开,就存在同步的问题.忘了是哪款游戏,里面有个激光照射枪,产生的伤害是按时间算的,照射越长,伤害越高.有人发现,如果照射怪物时,暂停游戏,等一段时间,再开始,怪物会瞬间死亡,这实际上就是画面停止时,游戏更新没有暂停导致的.所以,用哪种,看项目复杂度了.简单搞搞,那就基于帧,简单粗暴.产品比较事儿,那就基于时间,梳理清楚时间线.画画原型.
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答