前言
最近用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:在添加场景时对场景命名的名称
网友评论