什么是 Phaser ?

Phaser 是一款快速、免费以及开源 HTML5 游戏框架，它支持 WebGL 和 Canvas 两种渲染模式，可以在任何 Web 浏览器环境下运行，游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP，允许使用 JavaScript 和 TypeScript 进行开发。

目前 Phaser 存在三个版本：分别是 Phaser 2 版本、社区版本 Phaser CE 和最新版本 Phaser 3。

关于 Phaser 3

2013 年 4 月 Richard Davey 在博客中首次公布了 Phaser，过了这么多年，已经从原先的 1.0 版本迭代到了目前的 2.6.2 正式版，Phaser 2 官方也宣布停止了维护、更新，转而由社区接手来负责维护、更新，衍生出来的版本称为社区版 Phaser CE。

Phaser 2 的停止是因为将战场转移到了全新的 Phaser 3 版本。Phaser 3 于 2018 年 2 月 13 日发布到如今已经有相当长的一段时间了，它目前仍然处于开发阶段，一直未发布正式版，官方一直在努力解决该引擎存在的问题，文档和示例目前还处于完善阶段，但引擎的功能已非常完善了，已经能满足游戏开发的需求。

那么，Phaser 3 相比 Phaser 2 进步了什么？是否值得一用？下面就来讲讲 Phaser 3 除了继承 Phaser 2 的优良基因外新增了哪些新特性，希望能让你对 Phaser 3 有所了解。

告别 Pixi.js

Phaser 2 一直采用开源的 Pixi 2 版本（Pixi.js 稳定版本为 v4）作为 2D 渲染引擎，在 Phaser 3 中已经告别依赖 Pixi，因为在 Phaser 3 官方有自己的特定需求，因此花费了大量的时间开发自己的渲染器，渲染器针对 Phaser 3 的工作原理进行构建，官方宣称性能各方面都明显比 Phaser 2 快很多，虽然目前官方暂时未给出具体的性能测试对比，最后官方说在未来会更注重性能以及兼容性方面的提升。

更便捷的层级设置 - setDepth

在 Phaser 2 中，调整游戏对象的层级并没有像 CSS 设置 z-index 那样的方法。

通过 game.sprite.add 创建的游戏对象是根据顺序先后来决定层级关系的，越往后创建的层级越大，很多情况我们都是动态创建的，这时元素就处于较高的层级，大部分情况不符合我们的需求，Phaser 2 对层级设置有以下几种方案：

1、预先创建 Group

使用 game.add.group() 预先创建好 Group 来初始化层级，添加到 Group 的子元素层级就由 Group 来决定，由此可以将元素设置成不同的层级，但这种方式不适合一些单元素，更适合层级分明的组元素。

1
2
3
4
5
6
7
 
let backLayer = game.add.group()
let middleLayer = game.add.group()
let frontLayer = game.add.group()

middleLayer.create(0, 0, 'middle')
backLayer.create(0, 0, 'back')
frontLayer.create(0, 0, 'front')

2、设置子元素层级

设置父元素下有设置子元素层级的 setChildIndex()，交换两个子元素层级的 swapChildren()、swap()。

1
2
3
4
5
6
7
8
9
 
let bunny1 = game.add.sprite(0, 0, 'bunny1')
let bunny2 = game.add.sprite(0, 0, 'bunny2')

// 设置 bunny1 的层级为 3
game.world.setChildIndex(bunny1, 3)

// 交换 bunny1 和 bunny2 的层级
game.world.swapChildren(bunny1, bunny2)
game.world.swap(bunny1, bunny2)

3、层级置顶 bringToTop、置底 sendToBack

也有简单粗暴的将某个游戏对象置顶、置底层级的 bringToTop()、sendToBack() 方法。

1
2
3
4
5
 
// 将 bunny1 置顶
game.world.bringToTop(bunny1)

// 将 bunny2 置底
game.world.sendToBack(bunny2)

4、新增 setDepth 方法

显然上面这些方法都不够简单易用，Phaser 3 中加入了 setDepth，只需给游戏对象调用 setDepth() 方法或直接设置 depth 属性即可，就像在 CSS 中设置 z-index 那样，轻松的控制场景中所有游戏对象的层级。

1
2
 
let bunny = game.add.sprite(0, 0, 'bunny')
bunny.depth = 1

功能更丰富的 - Camera

相机功能在 Phaser 3 中完全重建了，因为相机功能在 Phaser 2 中的发挥非常有限，例如对相机执行一些 scale 操作就可能引发各种各样的问题，因此在 Phaser 3 中针对这些问题进行了优化，在 Phaser 3 依然保留跟随、移动、摇晃、淡化等相机功能，新增了 3D、缩放、旋转以及多组相机的功能。

1、3D 相机

以插件的形式存在，需要额外引入 camera3d.min.js 文件，可以实现 3D 的形变效果。

3d_camera

3D 相机 - 在线例子

2、缩放相机

可以对相机距离进行远近的拉伸。

scale_camera