- 注册时间
- 2013-2-13
- 最后登录
- 2023-10-13
- 阅读权限
- 200
- 积分
- 9312
- 精华
- 1
- 帖子
- 2411
|
因为最近没太研究H5方面,这个问题也不知道什么时候开始有的,
咱们都知道游戏循环一般都是setTimeout,setInterval和requestAnimationFrame
虽然requestAnimationFrame比前两个要平滑一些,但是前两个更自由一些,所以我一直喜欢用前两个,但是最近发现个问题,可能在做游戏的时候前两个不能再用了
这个问题就是touch事件会让setInterval卡顿一下
我这里有两个demo,这两个demo都非常简单,所以不用考虑效率问题
下面这个demo是我注册了一个空的touch事件,注意是空事件,没有任何逻辑处理,所以不会存在效率问题
http://lufylegend.com/demo/test/143.html
下面这个demo是没有touch事件的
http://lufylegend.com/demo/test/144.html
可以看到,只要注册了touch事件,哪怕是空事件也会导致setInterval卡顿一下
另外,这个不是所有手机,我的一个比较旧的安卓手机却没有这个问题出现,所以我只能猜测是移动最新版chrome的问题,或者是最新版安卓系统的问题,或者是一部分安卓手机的问题,或者是XXX的问题,或者是OOO的问题,反正安卓就是烦...
这让我这个setInterval党情何以堪呢。。。
好了,有了问题就得解决问题,为了查明真相,我又用requestAnimationFrame做了个一样的demo
http://lufylegend.com/demo/test/145.html
嗯..无卡顿现象,所以得出结论touch事件对requestAnimationFrame无影响
所以,大家以后做游戏尽量使用requestAnimationFrame,估计不得不放弃setInterval了
最后说一说在lufylegend.js中如何解决这个问题,因为1.10.1为止,引擎中默认循环一直是setInterval,所以在初始化引擎的时候,需要传入requestAnimationFrame来解决这个问题了,我会在下个版本1.10.2中改一下默认循环的方式- window._requestAF = (function() {
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
- window.setTimeout(callback, 1000/60);
- };
- })();
- LInit(window._requestAF, id, width, height, main);
复制代码 |
|