Phaser学习（1）

一、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'
            });