安卓手机可能是要废掉setInterval了

lufy

因为最近没太研究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中改一下默认循环的方式

1. window._requestAF = (function() {
   
2.   return window.requestAnimationFrame ||
   
3.          window.webkitRequestAnimationFrame ||
   
4.          window.mozRequestAnimationFrame ||
   
5.          window.oRequestAnimationFrame ||
   
6.          window.msRequestAnimationFrame ||
   
7.          function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
   
8.            window.setTimeout(callback, 1000/60);
   
9.          };
   
10. })();
    
11. LInit(window._requestAF, id, width, height, main);

复制代码

lufy

aaron 发表于 2017-8-15 17:47
用requestAnimationFrame
初始化的话，无法改变FPS，一直都是60FPS，有什么办法可以改变吗？ ...

参考这里的方法，同理
https://github.com/lufylegend/lu ... haracter.js#L36-L45

aaron

用requestAnimationFrame
初始化的话，无法改变FPS，一直都是60FPS，有什么办法可以改变吗？

fjmygame

lufy 发表于 2016-11-14 13:35
http://lufylegend.com/demo/test/149.html
我这里明明就有提示啊，你看看你写的是不是一样？ ...

可以了

lufy

fjmygame 发表于 2016-11-14 13:16
不是这个意思,我demo只能横屏玩,竖屏加载本来会有提示要翻转手机到横屏的提示,用了这个就变成竖屏也能进去 ...

http://lufylegend.com/demo/test/149.html
我这里明明就有提示啊，你看看你写的是不是一样？

fjmygame

lufy 发表于 2016-11-14 12:25
哦，是说没显示全的意思啊，不好意思理解错了
引擎下次更新我会调整一下的
暂时的话，你试试把改成如果不 ...

不是这个意思,我demo只能横屏玩,竖屏加载本来会有提示要翻转手机到横屏的提示,用了这个就变成竖屏也能进去了(不提示要翻转手机了)

lufy

fjmygame 发表于 2016-11-14 12:08
我是说 不会出现,不能竖屏显示的提示了(用LInit(60,"demo",SCREEN_WIDTH,SCREEN_HEIGHT,main);会有下图的 ...

哦，是说没显示全的意思啊，不好意思理解错了
引擎下次更新我会调整一下的
暂时的话，你试试把

1. LInit(60,"demo",SCREEN_WIDTH,SCREEN_HEIGHT,main);

复制代码

改成

1. window.onload = function(){
   
2. LInit(60,"demo",SCREEN_WIDTH,SCREEN_HEIGHT,main);
   
3. };

复制代码

如果不好用就只能等我下次更新了

fjmygame

lufy 发表于 2016-11-14 11:11
http://lufylegend.com/demo/test/149.html
我这个就可以啊

我是说 不会出现,不能竖屏显示的提示了(用LInit(60,"demo",SCREEN_WIDTH,SCREEN_HEIGHT,main);会有下图的提示,我用iphone试你的连接也不会)

lufy

fjmygame 发表于 2016-11-13 20:36
应该不是,我改这LInit(60,"demo",SCREEN_WIDTH,SCREEN_HEIGHT,main);这样就会有提示了

http://lufylegend.com/demo/test/149.html
我这个就可以啊

fjmygame

lufy 发表于 2016-11-13 19:31
因为没调用全屏处理

应该不是,我改这LInit(60,"demo",SCREEN_WIDTH,SCREEN_HEIGHT,main);这样就会有提示了