这是我参与「第四届青训营」笔记创作活动的第 11 天

因为毕设打算做游戏，但因为是前端方向，所以在 cocos 和 Phaser 之间纠结，听了青训营老师讲的，也咨询了周围的大佬，最终还是决定用 Phaser（因为 cocos 版本兼容太差了似乎 orz），虽然它文档不是很完善，而且英文苦手看文档和栗子都比较吃力，所以打算在这里记录一下常用的 api，以及一些效果的实现，算是但又不全是文档的搬运吧。撒，开始吧~

API 文档

官方文档《Phaser API Documentation》

个人感觉这个文档更易读一些《Notes of Phaser 3》，因为它有很多的代码示例。

demo

对于喜欢看视频教程的同学，可以看这里慕课的教程《Phaser从0到1实战微信2D小游戏【钢琴方块】》

官网也有个例子不错《Phaser 3 入门实例教程》

你可以在上述两个栗子中学到 Phaser 最基础的用法，包括创建画布，添加场景，加载资源，资源的移动，点击事件等。

项目模板

这里打算以官方推荐的 Phaser 3 + TypeScript + Parcel Template

使用 typescript 有个好处，就是在不熟悉 Phaser 的时候，可以看某个对象上的可用方法，依赖中的 phaser.d.ts 是一个天然文档，而且使用过程中也有提示，如果不确定需要用哪个方法，也可以尝试切换。

比如这里可以看到 graphics() 的传参

进而可以看到 Phaser.Types.GameObjects.Graphics.Options 的声明（同时可以知道 graphics() 返回一个 Phaser.GameObjects.Graphics 的游戏对象，可以继续调用它的一些方法。）

以及 Phaser.Types.GameObjects.Graphics.Styles 的声明

LineStyle 的声明

以及 FillStyle 的声明

进而可以大致知道 graphics() 的使用方法

graphics({
  x: 100, // x 坐标，可选
  y: 100, // y 坐标，可选
  lineStyle: { 
    width: 1, // 边框宽，可选
    color: 0xffffff, // 边框颜色，可选
    alpha: 1 // 边框透明度，可选
  }, 
  fillStyle: { // 
    color: 0xffffff, // 填充颜色，可选
    alpha: 1 // 填充透明度，可选
  },
})

参考文档也可以知道它如何使用。

准备工作做好了，下一弹我们开始做一个简单的 demo，旨在熟悉各种 api 的用法（所以可能效果会花里胡哨 orz）

参考文档: 《Phaser API Documentation》《Notes of Phaser 3》

从零开始的 Phaser 之旅（第一弹） | 青训营笔记

API 文档

demo

项目模板