使用 Phaser.js 和 Ionic 开发游戏应用程序（缓慢/不稳定的渲染）

Posted 2023-03-05

【中文标题】使用 Phaser.js 和 Ionic 开发游戏应用程序（缓慢/不稳定的渲染）

【英文标题】：Developing game app using Phaser.js and Ionic (slow/shaky rendering)

【发布时间】：2014-10-31 07:42:03

【问题描述】：

只是为了让您知道（以防有人想开发）。

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

问题：

它是一个简单的飞扬鸟克隆。它工作正常，但方块运动有点摇晃（好像它们在发抖）。由于 Phaser 使用 WebGL，是否是渲染缓慢的原因还是由于 ionic 框架（/angularjs）？

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

提前致谢。

编辑：

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

【问题讨论】：

您可以发布该应用的链接吗？ WebGL 对图形硬件、驱动程序和浏览器实现相当敏感，可能在我们的计算机上结果可能会有所不同。

对不起，我想发布应用程序。游戏规格非常非常简单。就像飞扬的鸟一样。它在中型笔记本电脑浏览器中运行良好。但是当我在高端手机（Galaxy S3）上尝试该应用程序时，我遇到了问题。想知道在低/中规格手机中会是什么。

@VamshiSuram 如果您不分享相关代码，谁能帮助您？

@Charlie 对不起，如果我粗鲁。我添加了代码并发布了链接。请检查编辑。

【参考方案1】：

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

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

如果你想使用 Ionic 和 WebGL，你应该build your app using CrossWalk。我已经做到了，这太棒了：https://crosswalk-project.org/

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

【讨论】：

+1 用于 CrossWalk（或 Cocoon，但对于 Android，CrossWalk 很可爱）

@krik 感谢您的建议。克鲁斯沃克很酷。但是apk大小很大。游戏运行良好。我也试过cocoonjs。需要注意决议。我想知道那里（在启动器中）的 webview 是什么意思，因为 zip 文件只包含 html、js、资产（没有 Ionic/angular ..）。这是否意味着 cocoonjs 类似于 Ionic ？

CocoonJS 有两种风格。 WebGL 仅适用于游戏。以及用于常规应用程序的带有 WebGL（如 CrossWalk）的 Webview。与 CrossWalk 相比，CocoonJS 容器在 Android 上增加了多少开销会很有趣。

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

@PhotonStorm，CrossWalk for Android 真的很棒。但是我强迫了这样一个问题，对于某些精灵，json 动画以 60fps 的速度工作，但是当我在尺寸更轻的精灵上更改精灵时，我有一个稳定的 5fps。为什么会这样？谢谢你的回答）