跳转至

第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)。完整的精灵表单是这个样子的:

image

总共有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,那时动画只属于据以生成动画的特定游戏对象。