Phaserjs基础教程第一节：认识Phaserjs

一、初步认识Phaser

       什么是Phaser？它有什么特点？它能做什么？为什么要选择它？每次学习新东西的时候，我都会首先去了解这几个问题，因为只有这样，我才知道我要学的是什么，为什么要学习它，对于Phaser，同样如此，我建议大家先去了解这几个问题，你的答案不一定准确，但是会对你学习它大有帮助。

       什么是Phaser？

简单来说，Phaser就是一款免费开源的HTML5游戏框架

它有什么特点？

       高性能：快速、免费、易于维护。一方面，开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面，也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。

多种支持：JavaScript、TypeScript双重支持、内置游戏对象的物理属性、WebGL、Canvas渲染自由切换、完全支持Web音频、输入：多点触控、键盘、鼠标、MSPointer事件。

兼容性强：除了IE 9+、Firefox、Chrome、Safari及Opera等桌面浏览器之外，Phaser还支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移动浏览器。使用Phaser进行游戏开发没有任何语言设定。

（注：特点内容来自Phaser中文网，网址：http://www.phaserengine.com/，看不惯英文API的同学可以参考这里的翻译，不过需要注意这里的翻译不是很全，而且部分翻译有直接有道的嫌疑，如果读不通的话还是直接去官网找原文自行翻译吧，官网地址：http://phaser.io/， 直接点击上方的learn就可以开始学习了。 ）

它能做什么？这个就简单了，做H5小游戏非常方便。

为什么选择它？在根据统计到的《2016年最火的15款html5游戏引擎》（原文地址：https://www.diycode.cc/topics/16）文章中可以看到，phaser.js排在第二位，在pixi.js和egret.js之前，而排在第一位的three.js学习难度和周期比较高，如果从受欢迎程度来讲的话，当然优先考虑phaser.js，如果专注于html5游戏开发或者有这方面的发展意向，那这几个都可以深入学习下。另外值得一提的是，egret.js是国内开发的一款H5框架，也就是俗称的白鹭，来自北京白鹭时代信息技术有限公司，毫无疑问，国人开发的框架，中文API读起来是最方便的，有兴趣的同学也可以优先考虑这个框架。

 

二、怎么使用Phaser

       使用Phaser框架的方法很简单，直接引用phaser.js就可以了，当然，这仅限于2.x版本，如果使用node搭建环境的话，可以使用Phaser3，不过本教程只限于2.x版本。

       另外有一点需要注意的是，phaser.js很大，以2.7.0版本为例，非压缩版本就有3128KB，压缩后也有781KB，所以除了本地调试之外，还是尽量使用压缩版本，方便提高加载速度。

三、Phaser对象

       Phaser框架提供了对于游戏所需的各种素材或者设备提供了丰富的功能，这些功能全部都包含在了Phaser对象中，或者可以说，Phaser框架的学习实际上就是Phaser对象的学习（请原谅我这句废话），我其实想说的是，只要你在代码中输入一句console.log(Phaser);你就会对Phaser有一个大概的了解。

四、创建一个简单的游戏场景

       使用Phaser创建一个游戏非常简单，我贴出两段代码，首先是页面内容，只有一个简单的div容器，加载了插件和我们书写的代码：

       只需要一句简单的代码：

var game = newPhaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create });

functionpreload() {

       console.log("preload");

}

functioncreate() {

       console.log("create");

}

这句代码的含义很简单，创建一个Phaser.game对象，这个对象包含了几个参数：

800：游戏视图区域的宽（px）

600：游戏视图区域的高（px，这里同样可以使用字符串，不过字符串需要是0-100之间的数字，会被转换成百分比）

Phaser.Canvas：游戏的渲染模式，其他可供选择的值有Phaser.AUTO，Phaser.WEBGL，Phaser.HEADLESS（此模式官方翻译是一点也不用渲染，使用之后的是你找不到游戏区域了，我也不知道这个模式存在的意义），默认值是Phaser.AUTO

'phaser-example'：游戏区域的容器id

{ preload:preload, create: create }：这是游戏的各种状态，每个状态会调用不同的方法，如上面代码所示，其实这里的状态可以有很多，除了已经提供的preload（预加载）、create（创建）之外，可供选择的还有init、update、render等，我们在下面了解详细的内容。

       其实，完整的Game对象应该是这样：

newGame(width, height, renderer, parent, state, transparent, antialias,physicsConfig)，

除了我们上面解释的之外，还有transparent（背景透明）、antialias（消除锯齿）、physicsConfig（物理引擎设置），这几项我们目前一般采用默认值，暂时不做处理，了解下即可。

五、game的所有状态

       本节的最后，我们学习一下game的所有状态，先看下面的代码：

var game = newPhaser.Game(800, 600, Phaser.AUTO, 'phaser-example',

{ init: init,

       preload: preload,

       loadUpdate: loadUpdate,

       loadRender: loadRender,

       create: create,

       update: update,

       preRender: preRender,

       render: render,

       resize: resize,

       paused: paused,

       resumed: resumed,

       pauseUpdate: pauseUpdate,

       shutdown: shutdown });

 

functioninit() {

       console.log("init");

       console.log(Phaser);

       console.log(game);

}

functionpreload() {

       console.log("preload");

}

functionloadUpdate() {

       console.log("loadUpdate");

}

functionloadRender() {

       console.log("loadRender");

}

functioncreate() {

       console.log("create");

}

functionupdate() {

       console.log("update");

}

functionpreRender() {

       console.log("preRender");

}

functionrender() {

       console.log("render");

}

functionresize() {

       console.log("resize");

}

functionpaused() {

       console.log("paused");

}

functionresumed() {

       console.log("resumed");

}

functionpauseUpdate() {

       console.log("pauseUpdate");

}

functionshutdown() {

       console.log("shutdown");

}

 

var body =document.getElementsByTagName('body')[0];

//添加停止按钮

varpauseButton = document.createElement("input");

pauseButton.setAttribute('type','button');

pauseButton.setAttribute('name','Pause');

pauseButton.setAttribute('value','Pause');

pauseButton.οnclick= function(){

       game.paused = true;

}

body.appendChild(pauseButton);

 

//添加继续按钮

varresumeButton = document.createElement("input");

resumeButton.setAttribute('type','button');

resumeButton.setAttribute('name','Resume');

resumeButton.setAttribute('value','Resume');

resumeButton.οnclick= function(){

       game.paused = false;

}

body.appendChild(resumeButton);

 

//添加调整大小按钮

varresizeButton = document.createElement("input");

resizeButton.setAttribute('type','button');

resizeButton.setAttribute('name','Resize');

resizeButton.setAttribute('value','Resize');

resizeButton.οnclick= function(){

       game.world.resize(600, 400);

}

body.appendChild(resizeButton);

 

//添加销毁按钮

varshutdownButton = document.createElement("input");

shutdownButton.setAttribute('type','button');

shutdownButton.setAttribute('name','Shutdown');

shutdownButton.setAttribute('value','Shutdown');

shutdownButton.οnclick= function(){

       game.destroy();

}

body.appendChild(shutdownButton);

上面的代码中，我列出了game的所有状态，并添加了四个按钮做简单的操作：停止、继续、调整大小、销毁，新建一个浏览器窗口，打开控制台，输入页面地址，回车，查看下控制台的输出内容，你可以发现一些问题：

有些方法只触发了一次，比如init、preload、loadUpdate、create，而有些方法一直在调用，比如update、preRender、render，当你点击停止时，pauseUpdate、preRender、render也一直在打印，只有当你点击销毁时，这些打印才会停止。

说到这里，大家应该已经想到了发生这个的原因：类似于加载、创建这类事件只需要一次调用，而预渲染、渲染、更新这些事件则一直在调用，所以，在编写代码的过程中，一定要注意事件触发的位置。

本节内容主要是了解下Phaser.js这个框架，这里提供一些链接以便参考：

Git地址：https://github.com/photonstorm/phaser

官方实例库地址：https://github.com/photonstorm/phaser-examples（这里提供了一些demo和相应的素材，包括phaser2.x的多个版本，一共接近200M）

官网地址：http://phaser.io/（官网的API非常详细，详细列出了每个对象的属性和方法）

Phaser中文网网址：http://www.phaserengine.com/

这一节我们只是简单了解一下Phaserjs的特点、优势以及基础流程，下一节我们将正式开始学习用Phaserjs制作游戏。