HTML5游戏框架大军中的一乘轻骑Phaser

Phaser简介

Phaser是一个开源HTML5游戏框架，由Photon Storm公司创建，在2011年发布1.0版本后，就进入稳定期，定期更新版本，很多新的功能和修复会快速完成。大约一个月发布一次稳定版——可以在GitHub上查看完整的更新记录。Phaser的设计目标是创建运行在桌面和移动设备网页浏览器上的游戏。近几年，人们越来越关注移动设备网页浏览器的性能，以及快速增长、非常重要的网页游戏领域。Photon Storm公司早在2011年就开始制作游戏工具与游戏，其技术积累，能帮助开发者提供游戏开发中的种种需求，直面游戏开发中的痛点。

Phaser主要特色

朴素的JavaScript编程风格

这听起来好像是一个奇怪的“特性”，但实际上这点相当有吸引力。Phaser内部不使用任何人造的OO风格编程。没有大量的继承链和组件系统，你也不必强迫对象设计为任何固定的类结构。只有简单直接的原型链，JavaScript最自然的使用方式。

这并不意味着你不能以结构化方式创建游戏。这只是意味着它不是强制性的。这也意味着Phaser内部可以轻松地改造。

简单易用的资源加载

Phaser内置的资源加载器可以处理：

• 精灵表（固定尺寸帧）
• 纹理图片集（包括Texture Packer、JSON Hash、JSON Array、Flash CS6/CC以及Starling XML格式）
• 音频文件
• 数据文件（XML、JSON和文本文件）
• JavaScript文件（所以你能部分加载游戏或JS资源）
• Tilemaps（CSV和Tiled地图格式）
• Bitmap字体

我通常从Flash直接导出纹理图片集到Phaser游戏，并且完全支持修剪空白边缘的图片集。资源可以部分加载、缓存，以及从不同URLs（为了支持CDN）拉取，你只需要一行代码就能将任何精灵变成进度条。

渲染：WebGL和Canvas

Phaser内部使用Pixi.js进行渲染。Pixil是一个专注于Canvas和WebGL非常棒和快速的渲染库。Photon Storm公司宣称将持续资助这个库不断改进和发展。

对于你的游戏，这意味着如果浏览器支持WebGL，那么玩家就会获得更加流畅的游戏体验。WebGL在桌面平台已经非常普遍，但在移动平台还在发展初期，即便如此，这也是HTML5游戏发展的未来，所以支持它非常重要。最新发布的Phaser版本引入了WebGL着色器和过滤支持，并且即将发布的版本将实现法线贴图（normal map），所以你将能使用新工具诸如Sprite Lamp。

音频：网络音频和遗留音频

音频成为HTML游戏的软肋很多年了。仅仅几年前，还面临选择一个单声道高延迟的音频还是根本不使用音频而两难。还好时代变了，Web Audio API来拯救我们了。它支持基于节点的音频，多通道，节点路由和各种效果。毫无疑问，Phaser全面支持Web Audio。

然而，很多设备，尤其是Android设备仍有不支持Web Audio——所以Phaser也支持遗留音频以及使用Audio Sprite：打包一组声音到单个文件，然后使用回放标记跳转到不同的效果。Phaser将在两种方式自带切换，取决于设备的能力，并且也包含自动为你解锁音频自系统，它捕获了许多第一批移动开发者的芳心。

输入：多点触碰，键盘，指针，鼠标

当需要支持桌面和移动平台，有越来越多的不同数量的潜在输入选项。Phaser支持键盘、鼠标、触摸、MSPointer（目前Pointer在IE11下）以及它们的组合。例如，在Windows Surface设备上，你可以在鼠标和触摸两者之间切换，或同时使用两者。

对于触摸输入，Phaser能处理单点触碰和多点触碰环境。你可以定义多达10个触碰点，并且独立地追踪它们，使用它们的事件来处理Sprite交互，诸如拖拽、轻击和碰撞。

物理、补间动画和粒子

整合进核心库的是ArcadePhysics和ArcadeParticles系统。它们是简单的AABB轻量级库，允许你对任何精灵使用重力和运动，然后进行测试以便用于碰撞和分离。使用基于世界的四叉树有助于最小化碰撞测试，你能通过耗费很少的时间得到相当好的结果。

然而，内置的物理系统不可能适合所有类型的游戏，所以物理系统可以轻易地替换，并且没有物理属性绑定到实际的精灵（而是身体组件），所以可以被替换成诸如Box2D或p2.js。补间系统也被整合进，允许你轻易地补间对象或属性。如果游戏暂停，那么所有补间也将自动暂停，需要时再继续。

插件系统

Phaser的目标是最终稳定下来，并且趋于稳定而均衡，它不太可能涉足修复和浏览器更新之外的其他主题。同时又想要Phaser保持不断增长，为各种游戏提供功能，但是又不至于导致核心库爆炸式膨胀。为此，Photon Storm公司构建了一个插件系统。

Phaser插件可以注册自己到核心框架，在核心游戏循环中进行更新，从而执行各种有用的额外任务。一个极好的例子是最近发布的Photon Storm公司将自己发布插件，同时也期待未来有大量的插件来自社区。

社区评价

在知名的NK社区，活跃的开发者有许多有价值的交流和评论。

网友balazsdavid987：尝试了数个HTML5/JS游戏框架库之后，我敢肯定Phaser是最好的2D游戏框架库。它更新频率快，有优秀的使用文档和极好的社区支持。只是阅读Phaser的源代码就可以学习到大量的游戏开发技术。我们在iOS创建了一个完整的小游戏平台，上网友dtft ：面都是phaser游戏。虽然它们算不上大作，但的确非常快速和具有挑战性。我们发现phaser对于快速开发和原型制作简直完美。

网友georgefrick：我们正在使用phaser制作91个应用（系列教育游戏/互动/故事书）。进展很顺利，并且已经完成了一半以上的应用。虽然Phaser有缺陷，但任何框架都会有错误。

网友HobbesDT ：对我来说，Phaser非常容易学习，即使我没有很多计算机科学经验，并且没有费多大力气就可以在移动平台（至少是iOS）运行得很好。如果你不知道如何制作游戏，并且想要快速制作一个简单的游戏，这无疑是一个很棒的框架库。官方网站有非常丰富的教程和示例，并且还能在第三方网站上找到很多资料。

网友GavinAnderegg ：大约一年前，我和一些朋友在一个12个小时的黑客马拉松活动中使用Phaser制作了一个小游戏。它是一个很好的小框架，虽然我们没有真正使用它的很多功能，但它很容易上手。

可以在 https://github.com/gavinanderegg/coffeeQuest查看我们制作的游戏。

设置开发环境

安装web server

因为浏览器的一些安全机制，最好使用本地web服务器如iis，apache来开发HTML5游戏，如果直接双击打开html页面，可能有些功能不能正常运行。

推荐初学者安装服务器套件安装包，它们以单个可执行文件的形式包含了流行的网络开发工具，例如Apache, PHP和MySQL。对于Windows平台，推荐WAMP Server或XAMPP。而对于OS X平台，强烈推荐MAMP。

选择编辑器

接下来要选择一个得心应手的编辑器来编写代码。如果你是个经验丰富的开发者，我相信你已经有自己偏爱的编辑器。如果是新手，我推荐Sublime Text。Phaser还支持TypeScript，所以还可以选择使用微软的Visual Studio作为编辑器。

下载Phaser

Phaser框架开源，源代码托管在GitHub。

测试环境是否就绪

到此，你已经安装好Web服务器，设置好编辑器，Phaser也已经下载好。现在是时候创建第一个测试项目，并且测试环境是否就绪。

定位到你的“Web Root”，这是一个文件夹，是Web服务器查找文件的地方。如果你在Windows上使用WAMP，可以鼠标左键点击系统图标中的WAMP图标，在弹出菜单中选择“www目录”，即可在文件浏览器中打开这个目录。

下载这个zip文件。它包含了一个hellophaser目录，里面有一个JavaScript文件、一个index.html和一个PNG文件。拷贝Hellophaser目录到Web服务器根目录。

打开网页浏览器，然后浏览本地服务器上的Hellophaser目录。通常是在浏览器中简单地输入localhost/hellophaser或127.0.0.1/hellophaser。如果一切运行正确，将会在中央显示黑色的游戏区域，以及一个Phaser logo。

如果某种原因导致不正确，你需要打开调试窗口查看错误输出。如果只是简单的文件丢失错误，检查你的目录名，然后刷新页面。如果是复杂的错误，可以在Phaser社区发帖求助，将会得到开发团队和热心人的帮助。

使用Phaser创建第一个游戏

在这个示例中，制作的游戏名字叫怪物要糖果。首先介绍项目的结构，以便你可以理解整个游戏玩法。我们将根据游戏运行的逻辑顺序依次讲解：装载图片资源、创建主菜单、真正的游戏循环。你可以点击链接先试玩怪物要糖果。

目设置及结构

项目目录中包含index.html文件（包括HTML5结构和所有必要的JS文件）。还有两个子目录：IMG目录，里面是美术资源，src目录，里面是游戏的源代码。

下面是目录结构预览：

图1 目录结构预览

在src目录，你会看到JavaScript文件。在本教程中，我将描述在该文件夹中的所有文件的内容和用途。你可以在GitHub看到每个文件的源代码。

index.html 文件

我们从index.html文件开始。它看起来像一个HTML5网站，但没有文本和HTML元素，我们初始化Phaser框架，它将渲染所有东西到Canvas元素。

我们在标签定义文档：字符集编码，网页标题以及CSS样式。通常我们会引用外部CSS文件，但在这里不需要，正如我前面提到的，一切都将在一个canvas元素中呈现，所以我们不会有任何的HTML元素。

要做的最后一件事是包含所有的JS文件：从phaser.min.js文件，包含Phaser框架所有源代码，到包含所有游戏代码的文件。为了减少浏览器的请求数，使游戏的载入速度更快，我们将在游戏需要的时候单独载入它们。

查看标签，在这里初始化框架并启动我们的游戏。自调用函数中的第一行代码如下：

此代码将初始化Phaser：

640是游戏的画布宽度，960是游戏的画布高度。

phaser.auto通知框架我们希望游戏如何渲染到画布上。这里有三个选项：CANVAS, WEBGL和AUTO。第一个将我们的游戏渲染在2D Canvas上；第二个使用WebGL在可能的情况下渲染游戏（现在主要用于桌面游戏，但是移动端支持也会越来越好）；第三个通知框架，自动检查是否支持WebGL，从而决定游戏如何呈现，如果不支持WebGL，那么2D Canvas将被使用。

该框架初始化将被赋值给一个称为game的对象，它将在引用Phaser实例时使用。

下面几行代码都是加入状态到我们的游戏：

“Boot”是一个状态名，Candy.Boot是一个对象（在下面代码中定义），我们开始进入状态时将被执行。我们为Boot（配置），Preloader（加载资源），MainMenu（你猜对了，这是游戏主菜单）和Game（游戏主循环）添加状态。最后一行，game.state.start(“Boot”)，启动Boot状态，Candy.Boot对象将被执行。

你可以看到，一个主要的JavaScript游戏对象已被创建。在游戏中，我们有Boot, Preloader, MainMenu,和Game对象，我们使用原型定义它们。这些对象中的一些特殊函数名被框架本身保留（preload()，create()，update()，和render()），但我们也可以定义自己的（startgame()，spawncandy()，managepause()）。如果你不确定你能理解这一切，别担心我会使用示例代码解释这一切。

游戏

现在让我们忘记Boot Preloader和MainMenu。它们将在以后详细解释；此刻你要知道的是Boot状态决定游戏的基本配置，Preloader将加载所有的美术资源，而MainMenu将显示开始游戏菜单。

让我们关注游戏本身，查看Game代码。在解释game.js代码之前，让我们从开发者的角度来谈谈游戏概念本身。

Portrait模式

游戏是竖屏模式。

在这种模式下，屏幕的高度大于其宽度。有的游戏适合竖屏（像怪物要糖果），有的游戏适合横屏（包括平台游戏，比如Craigen），甚至某些类型的游戏在两种模式下都可以运行，通常这样的游戏比较难编写。

Game.js

在我们浏览game.js文件之前，先了解它的结构。我们创建一个游戏世界，有一个玩家角色在里面，它的工作就是吃糖果。

游戏世界：怪物后面的世界是静态的。背景中有一张糖果大陆的背景图片，怪物放置在前景中，还有一个用户界面。

玩家角色：这个演示非常简单而基础，所以小怪物除了等待糖果什么也不做。玩家的主要任务就是收集糖果。

糖果：游戏的核心机制是吃到尽可能多的糖果。糖果在屏幕的顶部边缘产生，玩家必须在它们掉落的时候轻击（或点击）。如果任何糖果掉出屏幕的底部，删除它，并且玩家将受到伤害。我们还没有实现生命值系统，因此，糖果掉出屏幕后，游戏立即结束，并显示适当的消息。

好吧，现在让我们查看game.js：

Candy.Game原型有三个函数：

create()初始化

managepause()暂停和继续游戏

update()管理游戏主循环

我们将创建一个叫做item的实用对象，它表示一颗糖果。它会有一些有用的方法：

spawncandy()增加新糖果

clickcandy()当用户点击时，糖果消失

removecandy()删除糖果

让我们浏览这些代码：

在这里，我们设置所有将使用的变量。

通过定义this._name，我们限制了变量使用的范围为Candy.Game。这意味着他们不能用在其他状态中——我们在其他地方不需要它们，所以为什么要暴露它们？

通过定义Candy._name，我们允许在其他状态和对象中使用这些变量，例如，Candy._score的数值可以被Candy.item.clickCandy()函数增加。

对象初始化为null，计算需要的变量初始化为零。

我们查看candy.game.prototype的代码：

在create()函数开始，我们设置了ARCADE物理系统──Phaser中有现成的，这是最简单的一种。之后，我们为游戏添加了重力。然后添加了三个图片：背景、怪物、以及得分UI的背景。第四个增加的元素是暂停按钮，注意我们使用的是candy.GAME_WIDTH和candy.GAME_HEIGHT变量，它们定义在Candy.Preloader()，但是在整个游戏代码中都可用。

然后我们创建怪物，玩家的虚拟形象。这是一个使用了帧的动画精灵——精灵表单。为了使之看起来像是站着在呼吸，我们为它添加动画。

 animations.add()函数创建帧动画，需要四个参数：

动画的名称（可以在之后引用它）

包含所有帧的table（我们可以只使用其中一些）

帧速

一个决定动画是否循环的标志

当想要播放动画，我们必须使用animations.play()播放参数指定的动画。

我们将spawncandytimer设为0，并且怪物生命health设为10。

文本样式

接下来的两行代码，可以让我们在屏幕上显示文字。this.add.text()函数有四个参数：屏幕左侧和顶部的绝对位置，实际的文本字符串和配置对象。我们可以使用CSS那样设置文本格式。代码如下：

字体是Arial，40像素高，黄色，可以设置描边（颜色和厚度），文本中心对齐。

之后，我们定义candygroup和第一颗糖果。

暂停游戏

暂停函数看起来像这样：

每次暂停按钮被点击时，我们改变this.game.paused状态为true，显示相应的提示给玩家，并为玩家单击或点击屏幕的行为创建一个事件侦听器。当单击或点击被检测到，我们删除文本并设this.game.paused为false。

paused变量在game对象中是特殊的，因为它将暂停游戏中所有动画以及计算，所以一切都被冻结，直到我们取消暂停，游戏暂停状态被设置为false。

更新循环

update()函数名是Phaser保留的函数之一。当你用这个名字命名一个函数，它将在游戏的每一帧被执行。

我们用spawncandytimer变量来跟踪时间。if语句每秒检查一次，检查是否需要重置计时器，或者是在游戏世界中产生一个新糖果（也就是说，每次看到spawncandytimer相隔1000毫秒）。然后，我们用forEach遍历糖果组中的所有糖果对象（在屏幕上可以存在多个糖果），添加固定的数值到糖果的angle变量（存储在糖果对象中的rotateMe），使它们下落时以固定的速度旋转。我们做的最后一件事是检查health是否下落到0，如果这样的话，那么我们在屏幕上显示游戏结束并暂停游戏。

管理糖果事件

为了将糖果的逻辑与主Game分开，我们使用item定义糖果，包含的函数有：spawncandy()，clickcandy()和removecandy()。为了方便使用在Game保留一些糖果的变量，而其他的一些变量则只在item的函数中，以便达到更好的维护性。

函数首先定义三个值：

糖果随机下落x坐标（数值在0和游戏画面宽度之间）

糖果随机下落y坐标，基于糖果自身的高度

随机的糖果类型（糖果一共有五个不同的图像）

然后我们添加一个糖果作为精灵，其起始位置和图像根据上面的定义。我们还需要为糖果产生过程设定动画帧。

接下来我们用物理引擎使糖果自然地从屏幕顶部坠落。然后，我们启用糖果的点击输入，加入事件监听器。

为确保糖果离开游戏屏幕时被销毁，我们将checkWorldBounds设为true。糖果离开屏幕时，函数events.onOutOfBounds()将被调用；我们用它调用removecandy()函数。设置锚点在糖果上，使其绕轴线旋转。在这里我们设置了rotateMe变量，在update()循环中转动糖果；我们选择-2和+2之间的一个值。最后一行代码将新创建的糖果加入到糖果群组，这样我们就可以不停的遍历他们。

让我们查看下一个函数clickcandy()：

这里需要将一个糖果作为参数，采用Phaser自带的方法kill()删除它。我们还增加了得分1，并更新得分的文本。

重置糖果也同样简短和简单：

当糖果被点击或掉出屏幕。removecandy()函数会被调用。candy对象会被删除，玩家失去10点生命。（游戏一开始玩家有10点生命，所以有一个糖果掉出屏幕游戏就结束了）

原型和游戏状态

我们已经了解了游戏机制，核心理念，以及游戏玩法。现在是时候去看代码的其他部分了：缩放屏幕、加载资源和管理按钮点击等等。

我们已经知道了游戏状态，让我们逐个查看他们：

Boot.js

boot.js是我们将定义主要游戏对象Candy（你可以取个你喜欢的名字）的JavaScript文件。下面是boot.js文件的源代码：

正如你所看到的，我们从var Candy = {}开始，为游戏创建了一个全局对象。所有对象都存储在其中，所以我们将不会使全局名字空间膨胀。

Candy.Boot = function(game){}代码创建一个新函数称为boot()（index.html有调用）将game对象作为参数（也在index.html中被框架创建）。

Candy.Boot.prototype = {}代码是使用原型定义Candy.Boot内容的一种方式。

Phaser有一些保留的函数名称，正如我之前提到；preload()和create()就是其中的两个。preload()用于加载所有资源；create()只调用一次（在preload()之后），所以你可以把代码当对象一样安排，就像定义变量或添加精灵。

我们的Boot对象包含这两个函数，这样他们就可以被Candy.Boot.preload()和Candy.Boot.create()调用。正如你所看到boot.js文件的完整的源代码，preload()函数加载了一个图像到框架中：

this.load.image()中第一个参数是我们给图像取的名字，第二个是图像文件的路径。

为什么我们要在boot.js文件中加载图像，用preload.js不行吗？好吧，因为我们需要一个加载条来显示所有资源（preload.js）的加载状态，因此它需要第一个被加载。

缩放选项

create()函数包含了一些Phaser特定的输入和缩放设置：

第一行，input.maxpointers设为1，我们的游戏不需要多点触摸。

scale.scalemode控制游戏的缩放。可用的设置有：EXACT_FIT，NO_SCALE和SHOW_ALL。EXACT_FIT将缩放游戏到所有可用的空间（100%宽和高，不等比缩放）；NO_SCALE将禁用缩放；SHOW_ALL将确保游戏符合给定的尺寸，一切都会显示在屏幕上（按比例缩放）。

将scale.pagealignhorizontally和scale.pagealignvertically设为true ，将使游戏在水平和垂直方向居中。

调用scale.setScreenSize(true) “激活”缩放。

最后一行，state.start('Preloader')，执行下一个状态，即Preloader状态。

Preloader.js

preload函数中加载了大量的图片。与preload()函数相比，create()函数非常简单，因为create()函数只需要负责切换状态。

下面是preloader.js源代码：

};与boot.js比较像；定义了Preloader对象，然后添加了两个原型函数（preload()和create()）。在Prototype对象中，我们定义了两个变量：Candy.GAME_WIDTH和Candy.GAME_HEIGHTt；它们设置游戏屏幕默认的宽度和高度。

preload()的前3行代码设置舞台的背景颜色（# b4d9e7，浅蓝色），显示游戏中的精灵，setPreloadSprite()函数将负责资源的加载进度显示。我们来看add.sprite()函数：

正如你所看到的，我们需要三个值：图像x轴绝对坐标（舞台宽度减去图像宽度再除以2），图像y轴绝对坐标（类似计算）以及图像的名称（我们已经在boot.js文件中加载）。

加载spritesheets

接下来的几行是使用load.image()（你已经看到了）加载所有的图形资源。

最后3行代码有点不同：

load.spritesheet()函数，不是加载单个的图片，而是spritesheet。两个额外的参数告诉函数单个图像的尺寸。

在这里candy.png我们有5种不同类型的糖果。图片尺寸410x98px，但是单个元素的大小是82x98px，在load.spritesheet()函数中定义。玩家spritesheet以同样的方式加载。

create()函数启动游戏的下一个状态MainMenu，当所有资源加载完毕就会显示游戏菜单。

MainMenu.js

在这里渲染图片，添加按钮以及游戏循环。

MainMenu没有preload()函数，因为资源已在Preload.js加载。

这里有2个函数，create()，startGame()。先看startGame()函数: 

这个函数只负责启动游戏循环，但是它不会自动执行，我们需要通过按钮来触发它。

create()有3个add.sprite()函数，它们加载图片到舞台上。我们的主菜单在背景上，小怪物在角落里，还有游戏的标题。

按钮

还有一个我们早已在Game状态使用的对象，就是按钮：

这个按钮看起来比我们之前的代码都要复杂。我们通过八种不同的参数创建按钮：x轴位置，y轴位置，图像的名称（或精灵），单击该按钮时执行的函数，该函数执行环境，指定按钮使用的图片。

这是按钮的spritesheet，包含状态标签：

与candy.png非常相似，垂直排列。

记住最后三位数字传递给函数的意义—1 0 2-它们分别代表按钮的不同状态：over（鼠标悬停），out（正常），和down（触摸或点击）。在button.png我们有不同的图片代表他们。

现在你已经了解了Phaser游戏框架的基础。恭喜你！

游戏成品

本文中使用的demo游戏已经演变成一个完整的游戏，你可以在这里玩。如你所见，有生命、成就、得分，以及其他有趣的功能，他们中的大多数都基于你已经学到的知识。

这是一段关于怪物要糖果demo代码的漫长旅程，我希望能帮助你学习Phaser，在不久的将来你可以开发很酷的游戏。

作者：郭华丰，广州微美软件有限公司CTO，专注于移动平台（Android、iOS等）游戏应用开发，拥有超过10年图形和游戏开发经验，曾供职跨国企业Gameloft。主要作品有：狂野飙车（Asphalt 6）、近地联盟先遣队2（NOVA 2）、战谷、三国我为王等。出版了《iOS应用开发》、《Android数据库应用编程》。（审校/陈秋歌 责编/钱曙光）

本文选自程序员电子版2015年10月A刊，该期更多文章请点击“阅读原文”。欢迎订阅程序员电子版（含iPad版、Android版、PDF版）。

本文为ImapBox原创文章，未经允许不得转载，如需转载请联系market#csdn.net(#换成@)