lufy's legend

标题: 安卓手机可能是要废掉setInterval了 [打印本页]

作者: lufy 时间: 2016-10-20 08:58
标题: 安卓手机可能是要废掉setInterval了
因为最近没太研究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);

复制代码

作者: smallnews 时间: 2016-10-20 09:49
反正安卓就是烦
反正安卓就是烦
反正安卓就是烦

作者: stayhere 时间: 2016-10-20 09:53
反正安卓就是烦哈哈哈哈

作者: yorhomwang 时间: 2016-10-22 20:00
说实话，我更倾向于requestAnimationFrame，因为它的确可以使得画面流畅不少呢。
不过我有一个问题，那就是在引擎中，使用requestAnimationFrame后，LGlobal.speed = 1000 / 60，这个值会不会不准确？

作者: lufy 时间: 2016-10-23 10:28

yorhomwang 发表于 2016-10-22 20:00
说实话，我更倾向于requestAnimationFrame，因为它的确可以使得画面流畅不少呢。
不过我有一个问题，那就是 ...

requestAnimationFrame不就是60贞吗，那速度也只能是LGlobal.speed = 1000 / 60了啊

作者: chnshang 时间: 2016-10-25 10:14
requestAnimationFrame很平滑

setinterval有没有touch事件没区别，能看出有卡顿，但是能接受

我的是note5自带的浏览器查看的

作者: 幻白一驹 时间: 2016-11-10 14:41
requestAnimationFrame当然更好一点，但是浏览器总是不妥协一致

作者: fjmygame 时间: 2016-11-12 17:20
这个这么用,加下后用不了
http://115.29.161.57/demo2/index.html

作者: lufy 时间: 2016-11-12 18:30

fjmygame 发表于 2016-11-12 17:20
这个这么用,加下后用不了
http://115.29.161.57/demo2/index.html

http://lufylegend.com/demo/test/149.html
你的代码出错，肯定是其他地方代码有问题引起的，请先删除其他代码再测试

作者: fjmygame 时间: 2016-11-13 15:53

lufy 发表于 2016-11-12 18:30
http://lufylegend.com/demo/test/149.html
你的代码出错，肯定是其他地方代码有问题引起的，请先删除其 ...

改了下可以,但是LGlobal.aspectRatio = LANDSCAPE;
这个提示没有作用了这是bug,还是用错方法了

作者: lufy 时间: 2016-11-13 19:31

fjmygame 发表于 2016-11-13 15:53
改了下可以,但是LGlobal.aspectRatio = LANDSCAPE;
这个提示没有作用了这是bug,还是用错方法了 ...

因为没调用全屏处理

作者: fjmygame 时间: 2016-11-13 20:36

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

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

作者: lufy 时间: 2016-11-14 11:11

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

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

作者: fjmygame 时间: 2016-11-14 12:08
本帖最后由 fjmygame 于 2016-11-14 12:09 编辑

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

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

作者: lufy 时间: 2016-11-14 12:25

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

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

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

复制代码

改成

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

复制代码

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

作者: fjmygame 时间: 2016-11-14 13:16
本帖最后由 fjmygame 于 2016-11-14 13:19 编辑

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

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

作者: lufy 时间: 2016-11-14 13:35

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

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

作者: fjmygame 时间: 2016-11-15 14:54

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

可以了

作者: aaron 时间: 2017-8-15 17:47

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

作者: lufy 时间: 2017-8-15 21:21

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

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

欢迎光临 lufy's legend (http://lufylegend.com/forum/)