您可以在 Ionic 4 Phaser Starter中 找到完整的代码
近年来，Ionic平台已成为应用程序开发领域的知名公司之一。 在过去的几年中从Ionic 1升级到Ionic 4，Ionic不仅获得了普及，而且还提高了其鲁棒性和可靠性。 如今，Ionic框架是制作android或iOS应用程序以及Progressive Web应用程序最容易的方法之一。 🚀
- 数量与质量-哪种模型最适合移动游戏？
- “哈利·波特：霍格沃茨之谜”最大的问题-游戏免费……
- Sgame Pro与领先的游戏发行商合作-第1集
- 移动游戏行业成熟的颠覆时代
- IOS游戏评论：Hades Star，Oxenfree，人力资源机器，Sumisumi
Phaser于2013年首次发布，现已成为2D HTML5游戏中的大牌。 基于javascript，可以轻松地将其集成到各种javascript框架中。 👾
那么为什么要整合Phaser和Ionic呢？ 👾
尽管Ionic使您能够以惊人的速度创建应用程序和PWA，但您实际上无法使用它进行游戏。 虽然Phaser擅长于游戏构建，但它并不是真正要构建结构化的手机或网络应用程序。 因此，使用Phaser构建美观的游戏应用程序或PWA需要HTML + CSS包装器，Ionic可以完美地填补这一空白。
步骤1：建立Ionic 4应用程式
首先确保您已安装最新的Ionic
npm install -g ionic 安装Ionic CLI后，创建一个简单的Ionic应用程序
离子启动离子发生器侧面菜单
我选择sidemenu作为布局选择，但是您也可以使用blank或tabs 。 此命令将生成一个基本的Ionic应用程序，该应用程序具有一个sidemenu和主页中的一些基本HTML。 使用来服务您的应用
离子发球
并检查一切运行正常。 对我来说，如下
步骤2：在项目中包含Phaser
移相器非常容易包含在项目中。 本质上，它只是一个Javascript文件，您需要将其包含在HTML5项目中。 有两种方法可以做到这一点
＃1 —很酷的“完成即完成”方式（更快）
从Phaser官方下载中下载phaser.min.js并将其链接到您的项目。 出于演示目的，我将此文件保留在assets文件夹中，但是您也可以从CDN链接它。
如下所示将phaser.js文件包含在index.html文件中
现在，您可以使用
声明var Phaser;
（要检查Phaser包含的内容，请尝试合并存储在其中的变量或其defaultState ，您将对Phaser的构建有一些了解。）
＃2 —复杂的“编码方式”
从phaser下载npm软件包
npm install phaser-ce
准备Webpack来编译Phaser程序包，以便可以import程序包import .ts文件。 您可能需要为此准备自己的webpack-config并安装其他模块。 之后，您可以将变量导入为
导入“ pixi”；
导入“ p2”；
从“ phaser-ce”导入*作为Phaser；
此处提供了详细信息（在撰写此博客时，我还没有尝试这种方法）
步骤3：实施Phaser游戏
您可以在 Ionic 4 Phaser Starter中 找到完整的代码
出于示例目的，我们将使用一个简单的Phaser示例，在该示例中进行僵尸行走。
同样，您可以使用Ionic运行任何Phaser游戏。 相信我，有一些用Phaser制作的令人难以置信的游戏。 不久前，我们制作了一个Mario副本，我将在另一个博客文章中分享。
⭐️️️️⭐️️️️⭐️️️️重要️️⭐️️️️️️️️️⭐️️️️
Phaser的实现可能会使您对this的实现感到困惑。 简而言之，一旦移相器场景被初始化，它将包含默认的游戏状态。 作为Ionic开发人员，或者如果您遵循Ionic文档，则将使用this来引用组件的类。 因此，您最终使用与this冲突。 为了快速解决，我将Ionic分配给另一个变量（😅），然后使用它指向类函数。
一个常见的错误是声明that = this 。 是的，它确实通过that引用了this ，但是一旦this更改， that也会更改，因此没有意义。 您可以这样做that = Object.assign({},this) ，这是一个很好的标准代码。 但是，您会发现这也不会产生我们想要的结果。 因为在Ionic中this包含_prototype内的类函数，所以要将这些函数复制到您应该像定义的那样，
那= Object.create（this.constructor.prototype）;
然后用that代替this来调用函数
例如that.animationStarted指向一个函数animationStarted 。 在此处使用this会引发错误，因为create()函数是Phaser默认设置，并且其中包含场景的默认状态
如果您对this概念不满意，则应在此处阅读有关它的更多信息。
（作为另一种解决方法，您可以将完整的javascript代码放在Ionic的类实现之外，或更糟糕的是，放在index.html的标记中，但这实在是太过分了。您这样就无法编写大型游戏代码）
步骤4：将游戏构建到渐进式Web应用程序中
在您的“ ionic serve窗口中运行游戏确实令人印象深刻，但是如果您可以在自己的域中发布该游戏，那就会更酷。 离子有你的背。
通过运行以下命令为PWA部署准备应用程序
ng add @angular/pwa
@angular/pwa软件包将自动向该应用添加服务工作者和应用清单。 然后跑
ionic build --prod
创建应用程序的发布版本。 现在，您的应用程序包含一个index.html文件，该文件可以在任何服务器上提供。 最快的方法是通过安装firebase-tools并使用firebase deploy在您的firebase项目上部署游戏来在firebase托管上进行firebase deploy （此处有详细信息）
🎉🎉🎉瞧！ 您自己的游戏现已在您的网站上发布🎉🎉🎉
步骤5：将游戏构建到移动应用中
使用Phaser构建Ionic应用程序与构建常规Ionic应用程序完全相同。 对于不熟悉Ionic 4中流程的用户，请首先添加要在其上运行应用程序的平台
离子科尔多瓦平台添加Android
然后通过运行在连接的设备或模拟器上运行该应用程序
离子科尔多瓦运行Android
您可能需要使用window.innerWidth和window.innerHeight根据设备大小调整canvas大小。 这样，您可以调整所有移动设备尺寸的游戏画布。
通过这些调整，游戏看起来像上面一样。 还不错吧。 👻
很酷的事情是，您仍然可以拥有sidemenu或选项卡（如移动应用程序），并使用Ionic插件将应用程序在游戏中的所有常规功能（反之亦然）（例如登录，注册等）置于游戏中。
想在Ionic中制作自己的PUBG或太空入侵者游戏？ 尝试做这个
结论
Ionic在制作移动应用程序方面超级快，而Phaser在制作2D HTML5游戏方面很棒。 按照此博客将两者结合起来，即可制作出快速的移动游戏应用程序或游戏PWA。 通过使用Ionic强大的插件来丰富游戏功能。 玩得开心 ！
我们会定期在Enappd进行更多此类有趣的工作。 随意浏览我们有趣的应用入门。
更新资料
太空侵略者游戏现在包含在同一仓库中的space-invaders分支中。 看起来像这样
发现此职位有趣吗？
另请查看我们与Ionic 4中的Firebase，Ionic 4中的地理位置，Ionic 4中的QR码以及Ionic 4中的扫描仪以及Ionic 4中的支付网关相关的其他博客文章。
需要免费的离子4起动器吗？
您还可以在我们的网站enappd.com上找到免费的Ionic 4起动器。
- Ionic 4的免费聊天主题入门
- 免费Ionic 4 — Firebase入门
您还可以使用Ionic 4 Full App制作下一个很棒的应用程序
参考文献
- 离子文件
