第5节 - 玩家

By Richard Davey on 20th February 2018 @photonstorm

我们已经有了可爱、诱人的平台，但还没有人在上面跑动。让我们改一下。

做一个新的变量player，并把下面的代码添加到create函数中。你可以在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
});

这里有两件不同的事情：生成物理精灵（sprite），生成精灵能用到的几个动画。

物理精灵#

代码第一部分生成精灵：

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

player.setBounce(0.2);
player.setCollideWorldBounds(true);

这样生成一个新的精灵，叫player（玩家），位于100 x 450像素，在游戏的下部。精灵是通过物理游戏对象工厂函数（Physics Game Object Factory，即this.physics.add）生成的，这意味着它默认拥有一个动态物体。

精灵生成后，被赋予0.2的一点点反弹（bounce）值。这意味着，它跳起后着地时始终会弹起那么一点点。然后精灵设置了与世界边界（bound）的碰撞。——边界默认在游戏尺寸之外。我们（通过player.setCollideWorldBounds(true)）把游戏（的世界边界）设置为800 x 600后，玩家就不能不跑出这个区域了。这样会让玩家停下来，不能跑出画面边界，或跳出顶边。

动画#

如果回顾一下preload函数，你会看到'dude'是作为精灵表单（sprite sheet）载入的，而非图像。这是因为它包含了动画帧（frame）。完整的精灵表单是这个样子的：

总共有9帧，4帧向左跑动，1帧面向镜头，4帧向右跑动。注意：Phaser支持翻转精灵，以节省动画帧，不过因为这是教程，我们将保持老派做法。

我们定义两个动画，叫'left'和'right'。这是'left'动画：

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

'left'动画使用0, 1, 2, 3帧，跑动时每秒10帧。'repeat -1'告诉动画要循环播放。

这是我们的标准跑动周期。反方向的动画把这些重复一下，键值用'right'。最后一个动画键值用'turn'（转身）。

补充信息：在Phaser 3 中，动画管理器（Animation Manager）是全局系统。其中生成的动画是全局变量，所有游戏对象都能用到它们。它们分享基础的动画数据，同时管理自己的时间轴（timeline）。这就使我们能够在某时定义一个动画，却可以应用到任意多的游戏对象上。这有别于Phaser 2，那时动画只属于据以生成动画的特定游戏对象。

第5节 - 玩家

物理精灵#

动画#

评论