Phaser笔记-scene的preload、create、update、player、键盘控制

一般phaser最简单的配置文件如下：

1.  
   let config = {
2.  
   type: Phaser.AUTO,
3.  
   width: 800,
4.  
   height:600,
5.  
   scene: {
6.  
   preload: preload,
7.  
   create: create,
8.  
   update: update
9.  
   },
10.  
    physics:{
11.  
    default: 'arcade',
12.  
    arcade: {
13.  
    gravity: { y: 300},
14.  
    debug: false
15.  
    }
16.  
    }
17.  
    };

其中scene有3个函数：preload、create、update

preload：是在create函数前调用的，一般用于资源的加载；

create：preload完成后，就会调用到这函数，这个函数一般用于构造界面，关联玩家键盘，游戏大部分逻辑事件等等等；

update：会按周期进行调用，一般用于键盘控制玩家，玩家坐标更新等。

下面是player键盘控制，首先定义变量：

let player;

create函数中奖player构造成精灵，并且设置好回弹参数以将碰撞属性设置为true：

1.  
   player = this.physics.add.sprite(100, 450, 'dude');
2.  
   player.setBounce(0.2);
3.  
   player.setCollideWorldBounds(true);

如果给出的精灵是这样的：

那么还需要创建动画，方便后边的键盘操作，上面的精灵是个横版的图，左边4幅是左，中间那一幅是停止的，右边4幅是右走。

1.  
   this.anims.create({
2.  
    
3.  
   key: 'left',
4.  
   frames: this.anims.generateFrameNumbers('dude', {start: 0, end: 3}),
5.  
   frameRate: 10,
6.  
   repeat: -1
7.  
   });
8.  
    
9.  
   this.anims.create({
10.  
     
11.  
    key: 'turn',
12.  
    frames: [{key: 'dude', frame: 4}],
13.  
    frameRate: 20
14.  
    });
15.  
     
16.  
     
17.  
    this.anims.create({
18.  
     
19.  
    key: 'right',
20.  
    frames: this.anims.generateFrameNumbers('dude', {start: 5, end: 8}),
21.  
    frameRate: 10,
22.  
    repeat: -1
23.  
    });

 比如横版游戏中有个platforms，玩家可以站在平台上：

this.physics.add.collider(stars, platforms);

在平台上有些加分道具（如stars），当玩家捡到（重叠）到加分道具会执行对应的回调函数：

this.physics.add.overlap(player, stars, collectStar, null, this);

其中stars是变量，collectStar是回调函数。

同样平台上还会有一些敌人，如果玩家接触到这些敌人也会触发对应的回调函数：

this.physics.add.collider(player, bombs, hitBomb, null, this);

其中hitBomb就是回调函数。

关于键盘首先定义cursor变量：

let cursors;

在create函数中创建光标：

cursors = this.input.keyboard.createCursorKeys();

在update函数中通过按下不同的键盘干不同的事情：

1.  
   function update(){
2.  
    
3.  
   if(cursors.left.isDown){
4.  
   }
5.  
   else if(cursors.right.isDown){
6.  
   }
7.  
   else{
8.  
   }
9.  
    
10.  
    if(cursors.up.isDown && player.body.touching.down) {
11.  
    }
12.  
     
13.  
    }

分别是左键被按下，右键被按下，跳起一次。

如将玩家（精灵）在不同操作下，设置不同的X，Y轴坐标，以及播放不同的动画。

1.  
   function update(){
2.  
    
3.  
   if(cursors.left.isDown){
4.  
    
5.  
   player.setVelocityX(-160);
6.  
   player.anims.play('left', true);
7.  
   }
8.  
   else if(cursors.right.isDown){
9.  
    
10.  
    player.setVelocityX(160);
11.  
    player.anims.play('right', true);
12.  
    }
13.  
    else{
14.  
     
15.  
    player.setVelocityX(0);
16.  
    player.anims.play('turn', true);
17.  
    }
18.  
     
19.  
    if(cursors.up.isDown && player.body.touching.down) {
20.  
     
21.  
    player.setVelocityY(-330);
22.  
    }
23.  
    }

这篇好文章是转载于：学新通技术网