移动Android Chrome不能很好地与HTML5和CREATEJS一起使用 - 冻结问题



我开发了一个使用HTML5和CREATEJS的应用程序。我遇到了一些问题,我找不到解决方案,几个星期。我希望有人能帮忙。

1(在安卓谷歌浏览器上,当我简单地单击屏幕上的任何地方时,会出现一个问题:FPS 下降,任何正在播放的动画在我触摸期间都会冻结。问题仅在Android上的移动Chrome浏览器中。它不存在于其他移动浏览器中,也不存在于iPhone中,也不存在于Safari,Firefox等中。 我使用网络视图创建了一个简单的apk,它也没有问题。因此,出于某种原因,问题仅在于移动安卓铬。

代码经过最大程度的优化。 2 个月前,我们只使用了 1 个画布,但现在我们使用多个画布,并且每次运行的每个画布中的动画都减少了。虽然在安卓火狐中它工作得很好,但在安卓铬中,只需单击一下它就会冻结。

我试图禁用舞台鼠标向下/向上事件,因为当我只需单击舞台中的任意位置时,它们就会被触发。这并没有解决问题,或者可能有一些隐藏的舞台触摸事件我不知道如何禁用。

2(在Android Google Chrome和iPhone6 Safari上,当我点击SPIN按钮时,游戏会启动SPIN,但延迟至少为1.5秒,但代码中没有故意添加这样的延迟。在PC上任何浏览器,Android/iOS移动火狐,这工作完美,没有延迟。在iOS Safari iPhone8中,它再次完美运行。 我使用网络视图创建了一个简单的apk,它也没有这个问题。因此,出于某种原因,问题仅在于移动安卓铬。更新 11/10/19:问题 2 已通过减小画布大小并删除所有消耗大量内存的阴影效果得到解决。问题 1 仍未解决,绝对没有想法可以尝试。任何帮助,不胜感激。

除了这两个问题外,我的项目已完成 99%。我希望能够修复它们,因为我真的不想浪费几个月的工作并切换到其他没有问题的 JavaScript 库进行游戏,比如 PIXIJS。

我尝试过使用英国皇家空军和RAF_SYNCHED,但在任何情况下仍然没有改善。 任何动画都需要 Stage.update((。将它们放在股票代码上是它变慢的原因。

要查看问题的实际情况,请打开此 URL:http://www.nevergone.biz/DEMO_CODE/index.html

如何测试:在Android Google Chrome Portrait模式下打开上面的链接,然后点击SPIN。在旋转过程中,单击游戏画布上方或任何地方。请注意,一切都冻结了。

提取代码仅用于测试这些问题,因此在旋转几次后它可能会冻结。我明天会解决这个问题,但我希望有人能给出一些解决问题的想法。

问题 #1 显然在一些使用 Android Google Chrome 的旧设备上被隔离。该问题是由 CREATEJS 在暂存事件中使用太多侦听器引起的。 我目前正在等待框架的开发人员给出答案或等待Chrome收到认真的更新。

问题#2已通过删除所有显然消耗大量内存的文本阴影CSS效果来解决。

缓存可能有效。

var testShape=new createjs.Shape(); 
testShape.graphics.beginFill("red").rect(0,0,100,100);
testShape.cache(0,0,100,100);
stage.addChild(testShape); 
// If you make changes and want to refresh the cache
testShape.updateCache()

最新更新