Phaser游戏初级教程（一）
一、什么是Phaser
Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架，提供JavaScript和TypeScript双重支持，内置游戏对象的物理属性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于浏览器支持可自由切换。
Phaser是一个HTML5游戏框架，旨在帮助开发者做出强有力的，跨浏览器的HTML5游戏，并且速度也很快，不像其他框架，它已经完全适配于移动浏览器。唯一对浏览器的要求是canvas标签的支持。它还参照了Flixel游戏类库。
学习要求
- 基础的JavaScript知识
- 有一个可以运行的服务器 （本地的有WAMP 或者 XAMPP） 注意：一定要在服务器上运行，不然会报错。
- 下载Phaser框架 GitHub：https://github.com/photonstorm/phaser
二、安装
<head> <script src="Phaser.min.js"></script> </head>
可以到GitHub里下载
三、起步
3.1基础模板
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {} function create() {} function update() {}
我们来逐一分析这四行代码
第一行创建了一个Phaser.Game对象的实例，以此来激活Phaser，并将实例分配给一个名为“game”的局部变量，当然，把它命名为game只是比较常用的做法，但不是必需的，你也可以命名为其他，不过，在Phaser的示例里，都是采取这样的命名做法。
Phaser.Game()共有五个参数
- 前两个参数是Phaser要创建的canvas元素的宽高。这里是800 x 600像素。这个是游戏要显示的分辨率，你的游戏世界则可以是任意你喜欢的尺寸。
- 第三个参数可以是Phaser.CANVAS，Phaser.WEBGL，或Phaser.AUTO。这个是你想使用的渲染上下文。推荐的参数是Phaser.AUTO，它会自动尝试使用WebGL，如果浏览器或设备不支持它就会回滚成Canvas。
- 第四个参数是一个空字符串，这个是你想插入Phaser创建的canvas元素的DOM元素的id。因为我们把它放空，canvas元素会简单地被附加到body。
- 最后一个参数是一个包含四个引用Phaser基本功能的对象。这里有它们具体的详细解释。（注意这个对象不是必需的——Phaser支持一个完整的状态系统，允许你把你的代码分散到几个非常简洁的单一对象。对于这篇入门指南，我们使用这个方法有助于快速构建原型。）
3.2 资源加载
一个丰富的游戏，当然少不了形形色色的资源。
我们可以在函数preload中通过调用game.load来加载资源，当Phaser启动时，它会自动寻找此函数，并加载在它里面定义的任何东西。
function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); game.load.spritesheet('dude', 'assets/dude.png', 32, 48); }
在这个函数里 ，会加载四个资源：三张图片和一张精灵图。代码可能一目了然，但是，请注意，里面的第一个参数，又称为资源的键，才是我们加载资源的关键。这个字符串是一个已加载资源的链接，当你创建子图形（sprite）时也会用到。对于资源的键，你也可以自由地使用任何有效的JavaScript字符串来替代本例中的参数。
3.3 创建子图形（sprite）
为了添加一个精灵到我们的游戏中
funciton create(){
game.add.sprite(0, 0, 'star');
}
此时如果你在浏览器中打开您的网页，您会看到一个黑色游戏画面，在它的左上角有一个星星，请看效果图：
注意，显示的顺序和创建精灵的顺序是有关系的，如果你想放置一个背景在星星精灵的后面，就必须先添加一个背景精灵，然后再添加星星精灵。
关注”全栈技术杂货铺“
