Phaser3入门教程：第一个Phaser3游戏（中文版）（五）

有了这些可爱的平台，怎么能没人在上面跑动呢？

在create函数中，新建一个player变量，代码参看part5.html：

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.anims.create({

key: 'right',

frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),

frameRate: 10,

repeat: -1

});

这段代码可分为两个部分来看：

精灵体

第一部分创建精灵体的代码：

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);

player.setCollideWorldBounds(true);

这里创建了一个叫player的精灵体，定位在屏幕下部(100,450)的位置。精灵通过构造函数（this.physics.add）创建，默认创建的是一个动体。

然后我们给精灵赋予一个较小的弹力值0.2。这样精灵落地是会轻微弹起一点。接着我们设定精灵会和场景的边沿碰撞，默认边界就是游戏场景的边界，前面我们设置为了（800x600）大小，精灵将不会跑到这个边界之外，如果跑到边界它会停住，也不会跳出场景上部。

动画

你是否还记得在preload函数中，’dude’是以精灵表的方式载入的，而不是图片。因为它包含了动画的每一帧图像，一个完整的精灵表看起来是这样的：

表中总共有9帧画面，4帧向左跑的，一帧正面的，4帧向右跑的。注：Phaser是支持翻转帧画面的，但在这个教程中，我们还是用比较呆板的方法。

我们定义了两个动画，分别叫‘left’和‘righr’。下面是向左跑的动画：

this.anims.create({

key: 'left',

frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),

frameRate: 10,

repeat: -1

});

向左的动画使用了第0,1,2和3帧，帧率是每秒10帧。‘repeat -1’的意思是循环播放动画。

这是一个标准的动画周期，它持续在一个方向上循环播放，当我们们按下‘右’键时会转向。

补充知识：在Phaser 3中，动画是贯穿全局的。我们创建的是一个全局的动画对象。可以在任意时候管理动画数据。你可以只创建一次动画就可在整个程序中使用它，这一点是和Phaser 2有很大的不同的。