使用Phaser.js和Ionic开发游戏应用程序（渲染缓慢/抖动）

Question

仅供开发者参考

我使用Phaser.js开发了一个游戏应用程序。我将代码放入Ionic空白启动器应用程序中，因此基本上视图是使用Ionic应用程序呈现的，然后Phaser通过id选择div并显示游戏。

问题：

这是一个简单的Flappy Bird克隆版。它运行良好，但方块的移动有点抖动（好像在发抖）。由于Phaser使用WebGL，可能会导致渲染变慢，或者是由于ionic框架（/ angularjs）导致的？

我应该使用其他工具来构建游戏应用程序吗？

提前感谢。

编辑：

您可以在此处检查代码：https://github.com/vamshisuram/ionic-flappybird-clone.git 我将所有代码上传到Git。因此，我想您可以直接将platforms/ant-build/Hello-Cordova-debug.apk安装到您的手机上进行测试。或尝试重新构建并安装。

- Vamshi Suram

---

你能贴一下这个应用的链接吗？WebGL 对图形硬件、驱动程序和浏览器实现比较敏感，也许在我们的电脑上结果会有所不同。 - Simone Gianni

抱歉，我想发布这个应用程序。游戏规格非常简单，就像“Flappy Bird”一样。在中等规格的笔记本电脑浏览器上运行良好。但是当我在高端手机（Galaxy S3）上尝试该应用程序时，我遇到了问题。不知道在低/中等规格的手机上会出现什么问题。 - Vamshi Suram

@VamshiSuram 如果您不分享相关代码，那么其他人如何帮助您呢？ - Charlie

@Charlie 抱歉如果我有失礼。我已经添加了代码并发布了链接。请检查编辑。 - Vamshi Suram

Answer 1

你可以让它工作。但是...任何使用原始 WebView 的 Android 设备都不支持 WebGL（Ionic 使用 Cordova 对应用程序进行打包，然后在设备上的 WebView 中运行）：http://caniuse.com/#feat=webgl

Phaser.js 建立在 Pixie.js 之上，后者将退回到 2D 画布渲染。这就是为什么你的游戏运行缓慢的原因。

如果你想同时使用 Ionic 和 WebGL，则应该使用 CrossWalk 构建您的应用程序。我已经这样做了，非常棒：https://crosswalk-project.org/

还有其他选项，例如 CocoonJS 来启用 WebGL，但我自己没有使用过。

- krik

---

对于CrossWalk（或者Cocoon，但对于Android来说，CrossWalk更加优秀），点个赞（+1）。 - PhotonStorm

@krik 感谢您的建议。Crooswalk很酷。但apk大小很大。游戏运行良好。我也尝试了cocoonjs。需要注意分辨率。我想知道他们在启动器中所说的webview是什么意思，因为zip文件只包含html、js、assets（没有Ionic/angular..）。这是否意味着cocoonjs类似于Ionic？ - Vamshi Suram

CocoonJS有两种版本。WebGL仅适用于游戏。而Webview与WebGL（如CrossWalk）适用于常规应用程序。很有趣的是，与CrossWalk相比，CocoonJS容器在Android上增加了多少开销。 - krik

如果我同时使用CrossWalk和Ionic，是否可以为iOS编写游戏？ - schirrmacher

@PhotonStorm，CrossWalk for Android真的非常好用。但我遇到了这样一个问题：对于一些精灵，json动画以60fps运行良好，但当我将精灵更改为大小轻得多的精灵时，帧率稳定在5fps。为什么会发生这种情况？谢谢你的回答） - weratius

大家好，看看我整合Phaser和Ionic的最佳方式的指令吧！https://market.ionic.io/plugins/ionphaser - jdnichollsc