Phaser 开发总结(一)

前言

最近用Phaser开发个小游戏，在这里总结一下开发过程所学习到的知识。当然总结的这些知识只是开发过程用到的，并没有系统的学习Phaser，想到深入学习可以去Phaser官网 ：http://phaser.io/。

简单介绍Phaser

Phaser是一个开源H5游戏框架，封装了很多游戏开发中常用的方法，用起来十分方便，开发一般小游戏已经足够。而且容易学习，上手快。官网上有十分详细的文档和大量的例子，即便是没有任何游戏开发经验的，也能很好的上手。

开发环境

因为Phaser源码中有很多用ajax封装的方法，所以用Phaser开发需要将文件放到服务器环境下。

导入Phaser

使用Phaser很简单，先从其官网上下载Phaser文件，然后跟一般导入js文件一样，导入到html文件中就可以了。

<script src="phaser.min.js"></script>

创建游戏

• 创建容器

<div id="container"></div>

需给该容器添加ID，游戏将放在该容器下。

• 创建game对象：game对象为整个游戏的核心。

var game = new Phaser.Game(width, height, renderer, parent, state);

//width:游戏的宽度
//height:游戏的高度
//renderer:游戏渲染器。默认值为Phaser.AUTO(自动选择)，还有Phaser.WEBGL，
//Phaser.CANVAS
//parent:容器的ID
//state:游戏初始场景

Game还有其他参数，上面为Game对象常用参数。

场景

• 场景指的是游戏里不同的界面或者内容，比如一个关卡对应一个场景，每个关卡的显示内容不一样，所以每个场景加载、显示的内容也就不一样。Phaser开发的游戏就是由众多的场景组成的。
• 创建场景

function state(){
this.preload = function(){} //加载资源，如图片，精灵图，音频等等。
this.create = function(){} //显示内容,将加载的资源显示到游戏上
this.update = function(){} //游戏每一帧都会执行该函数里面的代码，故可以用来监控行为
this.render = function(){} //渲染内容。如游戏时长等等。
}

以上场景的4个方法为最重要最常用的4个方法，也是每一个场景都必须包含的方法。

• 添加场景

game.state.add(name,state); //game为一开始创建的游戏对象

//name : 场景的名称（自己命名）
//state:场景函数的函数名，如上面创建场景时用的state

要想启动某场景，就得先把该场景添加给Game对象，否则启动不了。

• 启动场景

game.state.start(name);

//name:在添加场景时对场景命名的名称