一、Phaser初始化：
var game = new Phaser.Game(config);
//其中config完成各种配置
var config = {
type : Phaser.AUTO,
width : 800,
height : 600,
scene : {
preload : preload,
create : create,
update : update
}
}
function preload(){}
function create(){}
function update(){}
其中属性type有3种，Phaser.CANVAS/Phaser.WEBGL/Phaser.AUTO。
二、加载资源
需要在preload时，将资源加载好。
调用load方法，加载资源。
function preload(){
//加载图片
this.load.image('sky','assets/sky.png');
//加载图片表单
this.load.spritesheet('dude','assets/dude.png',
{frameWidth:32,frameHeight:48});
}
资源加载完成后，就可以在create函数里，将图片显示出来。
this.add.image(400,300,'sky');
显示图片方法image()，前面400，300是放置图片的位置。
因为默认坐标系是以图片中心点为0，0点。
三、物理系统
要使用物理系统，需要配置使用的物理系统。我们采用Arcade物理系统。
var config = {
...
physics:{
default:'arcade',
arcade:{
gravity:{y:300},
debug:false
}
}
...
}
在Arcade物理系统中，分为静态和动态物体body。
动态物体可以动，会跟其他物体发生碰撞，反弹。
静态物体不能用，不受重力/碰撞影响。
“组”可以把近似对象组织在一起。
//生成静态物理组
var platforms = this.physics.add.staticGroup();
platforms.create(400,568,'ground');
四、物理精灵
通过物理系统生成一个动态物体，物理精灵。
var player;
player = this.physics.add.sprite(100,450,'dude');
//设置物体碰撞反弹
player.setBounce(0.2);
//设置物体不能跑出屏幕
player.setCollideWorldBounds(true);
五、动画
自定义动画：
this.anims.create({
key:'left',
frames:this.anims.generateFrameNumbers('dude',{start:0,end:3}),
frameRate:10,
repeat:-1
});
this.anims.create({
key:'turn',
frames:[{
key:'dude',
frame:4
}],
frameRate:20
})
碰撞
需要检测物体间的碰撞。
this.physics.add.collider(player,platforms);
六、键盘监控
提供了键盘监控方法。
var cursors = this.input.keyboard.createCursorKeys();
function update(){
if(cursors.left.isDown){
player.setVelocityX(-160);
player.anims.play('left',true);
}
else if(cursors.right.isDown){
player.setVelocityX(160);
player.anims.play('right',true);
}
else{
player.setVelocityX(0);
player.anims.play('turn');
}
//按键方向键up按下，则起跳。并且还要检测player的下面是否在地面
if(cursors.up.isDown && player.body.touching.down){
player.setVelocityY(-330);
}
设置动态组
stars = this.physics.add.group({
key:'star',
repeat:11,
setXY:{
x:12,
y:0,
stepX:70
}
});
stars.children.iterate(function (child){
child.setBounceY(Phaser.Math.FloatBetween(0.4,0.6));
});
//检测碰撞
this.physics.add.collider(stars,platforms);
添加文本显示
var scoreText = this.add.text(16,16,'score:0',
{
fontSize:'32px',
fill: '#000'
});
