Phaser3 游戏框架使用体验
Phaser 是一个基于 Web Canvas 和 WebGL 的开源游戏框架。使用它做游戏很方便，官方的一个示例只用了100行左右的代码就实现了游戏中人物的移动跳跃、人物拾取金币、炸弹以及平台的搭建。示例：https://phaser.io/tutorials/making-your-first-phaser-3-game/part1。
因为之前一直想尝试实现基于 Web 版的超级玛丽游戏，于是乎开始各种找资料，在这篇文章里发现 Phaser 好像还不错，所以就决定使用它。从0开始边做边学断断续续花了20多天完成，实现了一些基础功能（玩家、敌人、道具、地图砖块、音乐、场景切换等之间的交互）。
在线：https://ffx0s.github.io/mario-html5/dist/
源码：https://github.com/ffx0s/mario-html5
搭配工具
在开发游戏的过程中，需要搭配一些制作工具才能更加快速完成游戏的开发：
Texture Packer （用于制作游戏动画\精灵图，它会将导入的帧图片合成一张精灵图，并导出不同游戏平台所需要的数据，Phaser 导出的是 JSON，它还有预览动画和编辑纹理布局等功能。软件是收费的，有一个星期的免费试用）。
Tiled（用于制作游戏关卡地图，核心功能有创建图块 Tileset 和 创建地图，图块类似于瓷砖，用来铺设地图，地图可分层，有对象层、图块层、图像层。可导出不同游戏平台支持的地图格式。）教程视频：https://www.youtube.com/watch?v=ZwaomOYGuYo，视频是2015年的，但是核心的功能几乎没变过，看完就知道怎么用了。
PhaserEditor2d（Phaser 可视化编辑器，可编辑地图、动画、布局，打包资源等，功能看上去很强大，但是通常可视化编辑器有坑，所有没有过多的去尝试。）
游戏音效合并：https://github.com/tonistiigi/audiosprite，将多个游戏音频合成一个，减少请求，只需要一个命令就搞定。工具会导出 JSON 文件和合成后的音乐文件，配合 Phaser AudioSprite Api 使用。
相关网站
Itch 游戏资源、创意。
http://labs.phaser.io/index.html 查找 Phaser 相关的示例。
Phaser 3 API Documentation - Index Phaser3 Api 文档，文档说明很简短，网站看上去是使用 Api 工具自动生成的，查找不是很方便，更多的时候是直接搜索示例。
https://github.com/photonstorm/phaser Phaser Github。
框架执行流程
Phaser3 通过 new Phaser.Game(config) 的方式来创建并启动游戏，Phaser.Game 实例是整个Phaser 游戏的主控制器。 它负责处理启动过程，解析配置值，创建渲染器以及设置所有全局 Phaser 系统，例如声音和输入。 一旦完成，它将启动场景管理器，然后开始主游戏循环。
它的 Api 很多一看名字就能知道意思，你只需写一个配置，并设置3个函数就能启动一个游戏，如下图：
使用问题
使用过程中遇到的一些问题：
由于 Phaser Api 非常多且它的 Api 文档网站查阅不方便，所以推荐使用 Typescript 开发，搭配 VScode 使用非常方便，对象和类的属性和方法说明鼠标移上去直接就能显示，几乎都标注了注释，直接摆脱 Api 文档。使用模版 phaser-project-template 可轻松搭建 Phaser + Typescript 环境，还支持 PWA，开箱即用。
动态 Tile 问题，Phaser 不支持直接使用动态 Tile，需要自己实现，搜索发现Github 上有个：phaser-animated-tiles，但是年代有点久远，最新版使用好像还会有问题，又找了一篇介绍如何实现的文章：https://medium.com/@junhongwang/tiled-generated-map-with-phaser-3-d2c16ffe75b6 ，大致原理就是遍历图层，找出动画 tile，然后在游戏 update 方法里动态更新 tile index 的值，index 的值是通过 tile 动画时间和当前时间做计算得出。
使用途中还发现了一个 Bug，使用 TileSprite 对象后调用 scene restart 方法，浏览器会收到很多相同的错误，具体情况：https://github.com/photonstorm/phaser/issues/5464，Phaser 的已打开issues 数不超过100个，所以相信这个问题很快就能解决。
