最近开发基于微信分享的h5小游戏，之前试用createJs，觉得想换个游戏引擎试试，所以找到了Phaser，基于pixi，内置了物理引擎，动画等。
初始化
1
2
3
4
5
6
7
8
9
| var game = new Phaser.Game(288,505,Phaser.AUTO,'game',state);
var game = new Phaser.Game(288,505,Phaser.AUTO,'game',{proload:proload,create:create});
Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width: 游戏场景的宽度，单位为px
height: 高度，
renderer: 渲染方式，有Phaser.CANVAS，Phaser.WebGL，Phaser.AUTO，auto是自动识别
parent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中
state: 场景，通常会有（init，proload，create，update等）
|
state 是一个场景，可以是一个对象，也可以是一个构造函数，只要存在proload、create、update中的一个，就是一个合法的state；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var state1 = {
preload : function(){ },
create : function(){ },
update : function(){ }
}
var state2 = function(){
this.preload = function(){ };
this.create = function(){ };
this.update = function(){ };
}
var state3 = function(){
this.aaa = function(){};
this.bbb = 'first';
this.create=function(){}
}
|
加载资源
proload函数是最先执行的，用来加载资源、create是初始化场景的函数，等proload执行完成后执行，update是更新函数，游戏每一帧都要执行update；
1
2
3
4
5
6
7
8
9
10
| function state() {
//加载资源
this.preload = function () {
// load img and 精灵
game.load.image("sky", 'assets/sky.png');
game.load.image("platform", 'assets/platform.png');
game.load.image("star", 'assets/star.png');
game.load.spritesheet('dude', "assets/dude.png", 32, 48);
}
}
|
使用方法为:
game.load.’资源’(‘别名’,’路径’)；
常用的资源有：image、audio、tilemap、text、spritesheet；
别名指后面用的名称；
其中spritesheet还需要添加每帧的宽高帧数等。
初始界面
资源加载完成后，会自动进入create函数
1
2
3
| this.create = function () {
game.add.sprite(0,0,'sky')
}
|
sprite对象，也叫精灵，可以用图片来创建精灵，然后用phaser提供的属性，来操作。
1
| game.add.sprite(0,0,'sky')
|
创建后，会自动添加对应的内容在主界面。
说一个比较重要的对象：Phaser.group(),也就是组，相当于一个统一一个父容器，把需要的子对象放进去，然后可以通过组的方法进行批量的操作，比如统一的位移和碰撞检测等。
1
2
3
4
5
| platforms = game.add.group();
var ground = platforms.create(0,0,'platform');
var ledge = platforms.create(400,200,'platform');
|
物理引擎
Phaser已支持一些不同的物理系统，有Arcade Physics,，Ninja Physics 和 P2.JS Full-Body Physics。对与简单的物理方法，我们使用Arcade Physics即可。
物理引擎在Phaser中是默认关闭的，要启用可以在create中使用：
1
| game.physics.startSystem(Phaser.Physics.ARCADE);
|
要启用整组的物理属性，使用enableBody即可
1
| platforms.enableBody = true;
|
开启物理属性后，即可得到一个body属性，所有的物理属性方法都挂在body上面
常用的属性有：
immovable、bounce、gravity、drag、sprite、x、y、collideWorldBounds、input等，对应各种固定，弹性、重力，拖拽，边界等。
1
2
| ground.body.immovable = true;
legs.body.immovable = true;
|
1
2
| player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
|
TileSprite、Rope、Image、Button、Sprite等拥有animations属性，可以添加动画方法
1
| Phaser.Sprite.animations.add(name, frames, frameRate, loop, useNumericIndex)
|
分别为动画名称，帧数数组，每秒帧数，循环次数；
添加文字
1
| game.add.text(10,10,'score:0',{ font: "35px Arial", fill: "#ff0044"})
|
//Phaser.Game.add.text(x, y, text, style, group);
如果你经常使用canvas的话，对这种应该不陌生，分别为：x、y、文字内容，样式组。
这样我们基本完成了create函数的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| this.create=function () {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0, 0, 'sky');
platforms = game.add.group();
platforms.enableBody = true;
var grounds = platforms.create(0,game.world.height-32,'platform');
grounds.scale.setTo(2,1);
grounds.body.immovable = true;
var legs = platforms.create(-150,120,'platform');
legs.body.immovable = true;
legs = platforms.create(400,270,'platform');
legs.body.immovable = true;
player = game.add.sprite(32, 150, 'dude');
game.physics.arcade.enable(player);
player.body.bounce.y = 0.3;
player.body.gravity.y = 500;
player.body.collideWorldBounds = true;
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
cursors = game.input.keyboard.createCursorKeys();
fonts = game.add.text(10,10,'score:0',{ font: "35px Arial", fill: "#ff0044"})
stars = game.add.group();
stars.enableBody = true;
for(var i =0;i<12;i++){
var star = stars.create(i * 70 , 0, 'star');
star.body.bounce.y = 0.7;
star.body.gravity.y = 400;
star.body.collideWorldBounds = true;
}
}
|
