Phaser介绍

Phaser是一款相当强悍的HTML5游戏引擎，它最大的特点就是入门超级简单，不需要复杂的环境，不需要复杂的概念，更不需要复杂的IDE，它只需要你有一款浏览器(这里我推荐使用谷歌浏览器或者火狐浏览器)，有一个能写代码的文本编辑器(推荐使用VS Code、sublime等, 不过记事本也阔以哦)，会一点点的js，就可以打开你的想象，编写出超级棒的游戏。

在这篇文章中我就教大家如何用Phaser来制作一个很火爆的游戏：Flappy Bird，希望大家看完这篇文章后也可以制作自己的一款小游戏，在这里我们使用VS Code(记事本那个虽然也能写，没代码高亮，没提示！！！很难写)来编写代码，使用火狐浏览器来调试，查看效果，游戏中用到的素材可以私信给小编，我们的项目结构如下:

index.html为我们的代码存放文件，assets为资源文件夹。

创建Game对象

Phaser的使用非常简单，只需要引入它的主文件，然后在页面中指定一个用来放置canvas的元素，然后实例化一个 Game 对象就可以了。我们在index.html中写入如下代码：

然后使用浏览器打开index.html, 然后按F12, 打开开发者工具，选择控制台，可以看到如下效果：

可以看到显示了一个黑乎乎的界面，控制台打印了Phaser版本信息，不过报了一个错，可以忽略，不影响后面的操作。在这里Phaser.Game这个函数的参数如下：

参数说明：

width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度，单位为px

height: 游戏的高度，也就是用来渲染游戏的canvas的高度，单位为px

renderer: 使用哪种渲染方式，Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas

parent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中。

state: state可以理解为场景，在这里指定state表示让游戏首先加载这个场景，但也可以不在这里指定state，而在之后的代码中决定首先加载哪个state。关于state我后面还会有详细的说明。

transparent: 是否使用透明的canvas背景

antialias: 是否启用抗锯齿

physicsConfig: 游戏物理系统配置参数

以上所有参数都是可选的，它们的默认值以及更详细的信息可以去Phaser官方文档中查看，一般我们只需指定前面那4到5个参数就行了。

创建场景

实例化Game对象后，接下来要做的就是创建游戏会用到的各种场景了，也就是上面说的state，那么怎么才能创建一个state呢？state可以是一个js自定义对象，也可以是一个函数，只要它们存在preload、create、update这三个方法中的任意一个，就是一个合法的state。

下面是创建state的几种方式：

方法说明：

preload方法： 用来加载资源的，它会最先执行。

create方法：用来初始化以及构建场景的，它要等到在preload里加载的资源全部加载完成后才执行。

update方法：更新函数，它会在游戏的每一帧都执行，以此来创造一个动态的游戏。

在这个游戏中，我们会用到4个state，我们可以通过game.state.add()方法来给游戏添加state，然后用game.state.start()方法来调用state。在创建游戏对象之下写入如下代码：

资源加载

游戏要用到的一些图片、声音等资源都需要提前加载，有时候如果资源很多，就有必要做一个资源加载进度的页面，提高用户等待的耐心。这里我们用一个state来实现它,命名为reload。

因为资源加载进度条需要一个进度条的背景图片，所以在制作这个state前，我们还需要另一个最基础的state,用来加载那张进度条图片，也就是boot场景的职责。

boot场景的代码如下：

Phaser中资源的加载都是通过Phaser.Loader这个对象的方法来完成的,游戏实例的load属性就是指向当前游戏的Loader对象，在我们这里就是game.load。Loader对象有许多方法，不同的方法可以加载不同的资源，例如加载图片我们用的是game.load.image()方法，具体的方法列表请自行参考官方文档。

在preload这个场景中，我们需要把游戏后面会用到的所有资源都进行加载，然后还要展示一个加载进度条给用户看。Loader对象提供了一个setPreloadSprite方法，只要把一个sprite对象指定给这个方法，那么这个sprite对象的宽度或高度就会根据当前加载的百分比自动调整，达到一个动态的进度条的效果。

preload场景代码如下：

上面我们提到了Sprite对象，也就是游戏开发中俗称的精灵，同样在Phaser中sprite对象也是制作游戏过程中用得最多的也是最重要的一个对象之一。我们可以用一幅图片来创建一个sprite,然后用Phaser提供给我们的众多属性和方法来对它进行操作。上面我们是利用game.add.sprite()来创建sprite的，并且创建后会自动把它添加到当前的游戏中，game.add代表的是Phaser.GameObjectFactory对象，该对象提供了了一系列快捷方法来方便我们创建游戏的各种组件。我们这里制作的资源加载进度页面非常简单，大概就是下面这个样子：

游戏菜单页面

资源加载完成后就该进入到游戏菜单页面了,说是菜单页，但我们这里只是提供一个开始游戏的按钮而已，首先是背景图与地面，我们看到这两个东西是会动的，地面移动动的速度快一些，背景图慢一些，在Phaser中有专门的东西来处理这种效果，叫做TileSprite，什么是TileSprite呢？TileSprite本质上还是一个sprite对象，不过这个sprite的贴图是可以移动的，并且会自动平铺来弥补移动后的空缺，所以我们的素材图片要是平铺后看不出有缝隙，就可以拿来当做TileSprite的移动贴图了。TileSprite的贴图既可以水平移动也可以垂直移动，或者两者同时移动，我们只需要调用TileSprite对象的autoScroll(x,y)方法就可以使它的贴图动起来了，其中x是水平方向的速度，y是垂直方向的速度。其代码如下：

然后来制作游戏标题，游戏标题flappy bird这几个字是一张图片，然后那个鸟是一个sprite，并且我们在sprite上执行了动画，使它的翅膀看起来是在动的。我要说的是怎么在sprite对象上实现动画。首先在加载鸟的图片时，我们加载的不简单的就是一张鸟的图片，我们加载的是一个这样的图片：

我们看到这张图片有三只鸟，更确切的说是一只鸟的三个状态，或者说是动画中的三个关键帧。那我们怎样让他变成动画呢？在Loader对象中有一个spritesheet的方法，就是专门用来加载这种多帧图片的，我们看一下这个方法：

key : 给这张图片指定的名称，以后在创建sprite等对象时会要用到的

url: 图片的地址

frameWidth : 图片中每帧的宽度

frameHeight : 图片中每帧的高度

frameMax : 最多有几帧

margin : 每帧的外边距

spacing : 每帧之间的间隔

我们上面那张鸟的图片，每一个鸟的宽高分别是34px和24px,所以frameWidth应该是34，frameHeight是24，然后我们这个动画有三帧，frameMax为3，帧与帧之间没有间隙，margin与spacing都为0。实际上spritesheet方法就是能让我们加载一个图片，并在这个图片上划分出帧来，以后使用这个图片的sprite就可以用这些帧来播放动画啦。要在sprite上实现动画，我们首先还得先定义一个动画，就是定义这个动画是由哪些帧组成的。sprite对象有个animations属性，代表的是Phaser中专门管理动画的对象：AnimationManager，该对象有一个add方法，用来添加动画，还有一个play方法，用来播放动画。

下面再说一个非常重要的对象：Phaser.Group，也就是组。组相当于一个父容器，我们可以把许多对象放进一个组里，然后就可以使用组提供的方法对这些对象进行一个批量或是整体的操作。比如要使组里的对象同意进行一个位移，只需要对组进行位移就可以了，又比如要对组里的所有对象都进行碰撞检测，那么就只需要对这个组对象进行碰撞检测就行了。下面我们要制作的这个游戏标题是由一张文字图片和一支鸟组成的，我们就是把这两个东西放在一个组中，然后来进行整体的操作。

我们在menu场景中增加如下代码：

上面代码中的Tween对象，是专门用来实现补间动画的。通过game.add的tween方法得到一个Tween对象,这个方法的参数是需要进行补间动画的物体。然后我们可以使用Tween对象的to方法来实现补间动画。

properties : 一个js对象，里面包含着需要进行动画的属性，如上面代码中的 {y:120}

duration : 补间动画持续的时间，单位为毫秒

ease : 缓动函数，默认为匀速动画

autoStart : 是否自动开始

delay : 动画开始前的延迟时间，单位为毫秒

repeat : 动画重复的次数，如果需要动画永远循环，则把该值设为 Number.MAX_VALUE

yoyo : 如果该值为true,则动画会自动反转

最后是添加一个开始游戏的按钮。Phaser提供了Button对象让我们能很简单的实现一个按钮。menu场景增加的代码如下：

Phaser中很多对象都有一个anchor属性，它表示这个物体的中心点，物体的位置平移、旋转的轴，都是以这个中心点为参照的。所以上面代码中我们要使按钮水平垂直居中，除了要把按钮的x,y属性分别设为游戏的宽高的一半外，还要把按钮的中心点设为按钮的中心。

最终效果如下：

游戏场景的制作

我们完成了boot、preload、menu这三个state的制作，下面我们就要进入本游戏最核心的一个state的制作了。

首先我们先在create方法中搭建如下界面：

代码如下：

启用物理系统：默认的游戏中的每个对象的物理系统是关闭的，要启用一个对象的物理系统，可以使用 game.physics.enable() 方法：

object : 要开启物理系统的对象，可以是单个对象，也可以是一个包含多个对象的数组

system : 要启用的物理系统，默认为 Phaser.Physics.ARCADE，Phaser目前支持三种物理引擎，分别是Arcade ，P2 以及 Ninja。

debug : 是否开启调试，只有开启了对象的物理系统，该对象才具有物理特性，开启了物理系统后，对象的body属性指向该对象拥有的物理系统，所有与物理相关的属性或方法都必须在body上进行操作。

鼠标点击事件：Phaser中的鼠标、键盘、触摸等交互事件都统一由Input对象来处理。我们需要鼠标点击屏幕后进行响应，可以使用Input对象的onDown属性，该属性指向一个Phaser.Signal对象，我们可以在这个对象上绑定事件，每当鼠标按键下，就会触发一个onDown的信号，如果这个onDown信号对象上绑定了事件，那么这些事件就会执行。例如：

时钟对象: 有时我们需要定时或者每隔一段时间就执行一段代码，在原生js中我们可以通过setTimeout和setInterval来实现。Phaser给我们提供了功能更强大的Timer对象来实现这些功能。Timer对象主要有以下几个方法：

当点击屏幕后，就可以正式开始游戏了。增加如下代码：

我们再来看下鸟的飞翔动作，它由 this.fly 函数来实现：

重力和速度： Phaser.Physics.Arcade.Body对象，也就是当你是用arcade物理引擎时 sprite.body 所指向的对象，拥有很多跟物理相关的属性和方法。其中的gravity 对象代表重力，它有x和y两个属性，分别代表水平方向和垂直方向的重力。我们可以使用它的 setTo(x,y)方法来同事设置两个方向的重力。设置了重力的物体，它的运动会受到重力的影响，与真实生活中的物理现象是一致的。然后这个body它还有一个velocity 对象，表示物体的速度，跟重力一样，都分水平和垂直两个方向，也可以用setTo(x,y)方法来设置。一旦给物体设置了合适的速度，它便能动了。

管道的生成: 下面再来看一看管道生成函数 this.generatePipes。

管道生成的思路：利用随机数计算出上下管道的位置，然后检查当前是否有管道已经出了边界，如果有，则重置出了边界的那组管道的位置，如果没有，则生成一组新的管道，这样就能避免内存浪费了。所有管道我们都把它放在一个组中，便于集中管理。这里需要掌握的是sprite对象的reset方法：reset(x,y,h).

这个方法能重置sprite对象的位置，更重要的是，如果在一个已经被杀死了(kill)的sprite对象上执行该方法，那么该sprite的 alive, exists, visible and renderable 等属性都会变回为true。在需要重复利用已经存在的sprite对象时，经常要使用该方法。看下我们这个游戏中是怎么使用这个方法的：

碰撞检测: 好了，管道和鸟都已经有了，而且它们都能动了，接下来就是，实现鸟撞到管道或地面后游戏结束的功能了。在Arcade物理引擎中，碰撞检测主要用到两个函数，一个是collide，还有一个是overlap。

collide方法与overlap的区别在于collide会影响两个要检测的对象之间的物理状态，比如使用collide函数去检测两个物体，如果物体碰撞了，那么这两个物体之间就会有力的相互作用，可能其中一个会被另一个弹开，或者两个之间相互弹开。但如果使用overlap方法的话，则只会检测两个物体是否已经碰撞了，或者说已经重叠了，并不会产生物理作用，显然，如果只需要知道两个物体是否已经重叠了的话，overlap性能会更好。

碰撞检测可以单个对象与单个对象进行检测、单个对象与组进行检测、组与组进行检测。collide方法必须在每一帧中都进行调用，才能产生碰撞后的物理作用。

分数管理: 当鸟飞过一组管道后，就得1分。飞过一组管道，是指这组管道已经在鸟的左边的，所以可以通过管道的x坐标来判断是否已经得分。

只需要在每一帧中对每一个管道都调用一次该函数，就可以了。

声音的播放: 在Phaser中播放一段声音很简单，只需要事先加载好声音资源。然后调用play方法播放就行了。

首先使用 game.load.audio() 来加载声音资源。我们以本游戏中得分时播放的声音为例，在state的preload方法中预先加载声音资源:

然后通过 game.add.sound() 来得到一个sound对象。

sound对象有许多方法用来控制声音的播放暂停等，要播放声音，只需要调用它的play方法即可。

好了，把这些组合起来，就能做出我们的游戏了，最终效果如下：