最近开发基于微信分享的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
//state可以是一个自定义对象
var state1 = {
preload : function(){ },
create : function(){ },
update : function(){ }
}

//state也可以是一个构造函数
var state2 = function(){
this.preload = function(){ };
this.create = function(){ };
this.update = function(){ };
}
//state里面可以存在其他的方法,和属性
//state里面只要存一个proload、create、update中一个即可
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;
}
}

如果觉得我的文章对您有用,请随意打赏。

Alipay
感谢您的阅读,本文由 李经纶 版权所有。如若转载,请注明出处:李经纶个人博客(https://lijinglun.com/2018/04/27/Phaser游戏开发/