在Phaser中添加游戏动画很容易。动画使电子游戏角色栩栩如生。将动画融入游戏的一种方法是为角色的移动设置动画。你甚至可以给他们一个空闲状态的动画，将运行时，球员没有任何移动。这会让你的角色更有个性。

游戏设置

你需要对Phaser有一个基本的了解才能使用动画。如果您不熟悉Phaser，请先从基本的游戏教程开始，然后再继续。本教程将建立在这些基础之上。

首先，创建一个具有可移动角色的游戏。在我们的示例中，我们将从用箭头键移动的块开始。以下是起始代码：

var config = { type: Phaser.AUTO, backgroundColor: 0xCCFFFF , width: 600, height: 600, physics: { default: 'arcade' }, scene: { preload: preload, create: create, update: update }}; var gamePiece;var keyInputs;var game = new Phaser.Game(config); function preload(){ this.load.image('gamePiece', 'img/gamePiece.png');} function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); keyInputs = this.input.keyboard.createCursorKeys();} function update(){ if(keyInputs.left.isDown){ gamePiece.x = gamePiece.x - 2; } if(keyInputs.right.isDown){ gamePiece.x = gamePiece.x + 2; } if(keyInputs.up.isDown){ gamePiece.y = gamePiece.y - 2; } if(keyInputs.down.isDown){ gamePiece.y = gamePiece.y + 2; }}

此代码将创建一个可以在蓝色背景周围移动的游戏块。为简单起见，该示例仅使用橙色块作为游戏角色。看起来是这样的：

创建精灵图纸

第一步是创建动画。有许多方法来创建动画，但这是超出了我们在这里可以涵盖。出于我们的目的，将动画保存为精灵表非常重要。

相关：最好的像素艺术工具，创造像素完美的艺术品

精灵图纸是包含一组动画帧的单个图像文件。动画中的每一帧都放在它后面的一帧旁边。每个框架的大小必须相同。动画程序将根据单个帧的尺寸将图像分割成单个帧。

图像存储在一个数组中。与所有数组一样，这意味着第一个图像位于零位置。因此，在上面的示例中，向下动画从0开始，到3结束。左边的动画从四点开始，到七点结束。

向phaser添加精灵表

加载sprite表类似于在Phaser中加载图像。但是，您的程序将需要有关图像文件的更多信息。之前，我们在图像中加载了以下文本：

this.load.image('gamePiece', 'img/gamePiece.png');

不过，Sprite表还需要一些参数。我们还必须指定框架的尺寸。因此，要加载sprite表，我们需要按如下方式调整代码：

this.load.spritesheet('gamePiece', 'img/spriteSheet.png', { frameWidth: 60, frameHeight: 60});

代码非常相似。最大的区别是我们添加了第三个参数，用于指定动画帧的宽度和高度。在这种情况下，帧是60像素乘60像素。

本例将使用一个简单的sprite表。我们已经添加了一个箭头和闪烁的指示灯的游戏精灵。箭头将指向我们的精灵移动的方向，指示灯将朝这个方向闪烁。如果角色没有移动，动画将在所有帧中循环。

创建动画

在为角色设置动画之前，我们必须先创建动画。我们已经上传了精灵表，现在我们要说哪些帧在动画中。要创建动画，请将以下代码添加到create函数：

this.anims.create({ key: "up", frameRate: 2, frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}), repeat: -1});

上面是向上方向的动画。

• 关键字anims是animati***的缩写。早期版本使用完整的关键字动画，但当前版本使用此快捷方式。
• 关键点是动画的名称。您将使用该键调用动画。
• 帧速率控制每秒显示多少帧。这个例子每秒只有两帧。
• 下一行指向动画中使用的图像和帧。向上动画使用游戏件图像，从第0帧开始，到第2帧结束。
• 如果希望动画连续循环，请将“重复”设置为-1。否则，可以输入动画在停止前应重复的次数。

您需要为每个方向和空闲状态创建动画。

相关：PowToon使创建动画视频和幻灯片变得很容易

如何设置角色的动画

向角色添加动画非常容易。棘手的部分是动画之间的转换。可以在“创建”函数中设置开始动画。

gamePiece = this.add.sprite(270, 450, 'gamePiece');gamePiece.anims.play("spin");

第一行创建播放器。这和我们以前用一个图像创建一个精灵是一样的。第二行将动画设置为旋转。自旋是一个空闲的动画，它将在0到11帧的所有帧之间循环。

现在，重新加载游戏时，空闲动画将开始播放。但是，你会注意到，即使你移动了你的角色，它仍然会继续播放。基于运动设置动画有点棘手。

诱惑是改变动画时，球员按下按钮，就像我们做了设置运动。这种方法的问题是，我们检查播放器是否在更新函数中按下了一个键。update函数每帧运行一次。如果我们把一个动画放在那里，动画会在播放器按下键的每一帧重新开始。

要解决这个问题，我们需要使用不同的方法。我们不想检查一把钥匙是否坏了，而是想知道一把钥匙是否坏了。JustDown只有在第一次按下时才是真的。如果拿着钥匙，那就不是真的。如果我们用JustDown设置动画，动画将不会重置每一帧。

您需要为要在create函数中监视的键输入创建一个变量：

leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);

然后，您需要检查是否在更新功能中按下了该键：

if(Phaser.Input.Keyboard.JustDown(upKey)){ gamePiece.anims.play("up");}

现在，游戏将更改为向上动画一旦向上键是第一次按下。您需要为每个方向键编写一个类似的if语句。

我们还有最后一个修改要做。现在，当播放器停止按键时，最后一个动画继续播放。我们希望它回到我们的闲置动画。为此，我们使用JustUp方法。与JustDown类似，它会在玩家释放一个键时触发。

if(Phaser.Input.Keyboard.JustUp(upKey)){ gamePiece.anims.play("spin");}

一旦播放器停止按向上键，它会将动画设置回我们的空闲旋转动画。您需要为每个方向键编写一个类似的语句。

要查看最终代码，请转到pastebin。

下一步：创建自己的动画

在Phaser中创建动画与使用静态图像没有太大区别。但它会把你的游戏发展到一个新的水平！Phaser使添加动画变得简单，因此您可以集中精力在困难的部分：**动画！

创建自己的sprite表时，不要忘记以下指针：

• 动画帧必须具有相同的尺寸
• 帧将存储在从零开始的数组中
• 动画通常需要不同于设置移动的触发器的触发器。