什么是Phaser    

    Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架，提供JavaScript和TypeScript双重支持，内置游戏对象的物理属性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于浏览器支持可自由切换。

    Phaser是一个HTML5游戏框架，旨在帮助开发者做出强有力的，跨浏览器的HTML5游戏，并且速度也很快，不像其他框架，它已经完全适配于移动浏览器。唯一对浏览器的要求是canvas标签的支持。它还参照了Flixel游戏类库。

开发需要

    准备好游戏引擎Phaser.min.js

    开发者还需要具备一点javascript基础知识

    运行正常的服务器（大部分本地的 WAMP Server or XAMPP）

    还可以去看看Phaser Start Guide ^_^

    如果你已经看完了Guide，准备好服务器，并且下载了Phaser框架，那么我们就可以开始游戏之旅啦！先上一段代码

1
2
3
4
5
6
7
   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将要创建的Canvas的宽和高，在本例中是800pxX600px，当然在你的游戏世界中游可以是你喜欢的任何大小。第三个参数可以是Phaser.CANVAS，Phaser.WEBGL或Phaser.AUTO。这是您要使用的渲染上下文。推荐的参数是Phaser.AUTO它会自动尝试使用WebGL，但如果浏览器或设备不支持它，它就会使用CANVAS。

    第四个参数是一个空字符串，这是你要在其中插入Phaser创建的canvas元素的DOM元素的ID。空字符串就代表将canvas插入body之中，最后一个参数是一个包含四个引用Phaser基本功能的对象。这里有他们的使用解释。（需要注意的是Phaser不要求该对象完全支持state系统，允许你中断当前代码进入一个单个对象，但是，对于一个简单的入门指南就像我们使用的这种方法，因为它允许更快的原型。）

加载资源（Load Assets）

    让我们加载游戏需要的资源吧，您可以在函数preload中通过调用game.load来加载资源，当Phaser启动时，它会自动寻找此函数，并加载在它里面定义的任何东西。

1
2
3
4
5
6
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);
}

    上面的函数将会加载4个资源：其中3张图片和一张精灵表（sprite sheet），你可能已经有些明白了，但我想指出的是第一个参数是加载资源的关键，这个字符串是一个加载资源的链接，并且在以后创建sprite的代码中也会用到，你也可以自由地使用任何有效的JavaScript字符串来替代本例中的参数。

创建精灵（Create a Sprite）

    为了添加一个精灵到我们的游戏中，请把下面的代码添加到上文的create函数中

1
game.add.sprite(0, 0,  'star' );

    此时如果你在浏览器中打开您的网页，您会看到一个黑色游戏画面，在它的左上角有一个星星，请看效果图：

part3.png

    还需要注意的是显示的顺序和创建精灵的顺序是有关系的，如果你想放置一个背景在星星精灵的后面，就必须先添加一个背景精灵，然后再添加星星精灵。（明天继续，子非鱼抱拳）

Phaser教程演示