动画和补间动画

在 Phaser 中，动画涉及从外部来源获取一个精灵表并按顺序显示精灵。例如，我们将让球在击中某个东西时晃动。

首先，从 GitHub 获取精灵表 并将其保存在你的 /img 目录中。

接下来，我们将加载精灵表 - 将以下行放在你的 preload() 函数底部

game.load.spritesheet("ball", "img/wobble.png", 20, 20);

我们可以加载整个精灵表（包含多个不同图像），而不是加载单个球的图像。我们将按顺序显示精灵以创建动画的错觉。spritesheet() 方法的两个额外的参数确定给定精灵表文件中每个单独帧的宽度和高度，指示程序如何将其分割以获得单独的帧。

接下来，进入你的 create() 函数，找到加载球精灵的行，并在其下方放置对 animations.add() 的调用，如下所示

ball = game.add.sprite(50, 250, "ball");
ball.animations.add("wobble", [0, 1, 0, 2, 0, 1, 0, 2, 0], 24);

要向对象添加动画，我们使用 animations.add() 方法，它包含以下参数

• 我们为动画选择的名称
• 一个数组，定义在动画过程中按顺序显示帧的顺序。如果你再次查看 wobble.png 图像，你会看到它有三个帧。Phaser 会提取这些帧并将对它们的引用存储在一个数组中 - 位置 0、1 和 2。上面的数组表示我们正在显示帧 0，然后是 1，然后是 0，等等。
• 帧速率，以 fps 为单位。由于我们以 24fps 运行动画，并且有 9 帧，因此动画每秒将显示不到三次。

在处理球和球拍之间碰撞的 arcade.collide() 方法调用中（update() 中的第一行，见下文），我们可以添加一个额外的参数来指定一个函数，该函数将在每次发生碰撞时执行，与 ballHitBrick() 函数类似。按如下所示更新 update() 中的第一行

function update() {
  game.physics.arcade.collide(ball, paddle, ballHitPaddle);
  game.physics.arcade.collide(ball, bricks, ballHitBrick);
  paddle.x = game.input.x || game.world.width * 0.5;
}

然后我们可以创建 ballHitPaddle() 函数（以 ball 和 paddle 作为默认参数），在调用它时播放晃动动画。将以下函数添加到你的结束 </script> 标记之前

function ballHitPaddle(ball, paddle) {
  ball.animations.play("wobble");
}

每次球击中球拍时都会播放动画。如果你觉得这能让游戏看起来更好，你也可以在 ballHitBrick() 函数中添加 animations.play() 调用。

动画按顺序播放外部精灵，而补间动画则平滑地动画游戏世界中对象的属性，例如宽度或不透明度。

让我们在游戏中添加一个补间动画，使砖块在被球击中时平滑地消失。转到你的 ballHitBrick() 函数，找到你的 brick.kill(); 行，并将其替换为以下内容

const killTween = game.add.tween(brick.scale);
killTween.to({ x: 0, y: 0 }, 200, Phaser.Easing.Linear.None);
killTween.onComplete.addOnce(() => {
  brick.kill();
}, this);
killTween.start();

让我们一步一步地进行，这样你就能看到这里发生了什么

1. 在定义一个新的补间动画时，你必须指定要进行补间动画的属性 - 在我们的案例中，我们不会在球击中砖块时立即隐藏它们，而是让它们的宽度和高度缩放到零，这样它们就能很好地消失。最后，我们使用 add.tween() 方法，指定 brick.scale 作为参数，因为这是我们要进行补间动画的对象。
2. to() 方法定义了对象在补间动画结束时的状态。它接收一个对象，该对象包含所选参数的期望结束值（scale 接收一个比例值，1 表示 100% 的大小，0 表示 0% 的大小，等等）、补间动画的持续时间（以毫秒为单位）以及要用于补间动画的缓动类型。
3. 我们还将添加可选的 onComplete 事件处理程序，它定义一个在补间动画完成后要执行的函数。
4. 最后要做的事情是使用 start() 立即启动补间动画。

那是补间动画定义的扩展版本，但我们也可以使用简写语法

game.add
  .tween(brick.scale)
  .to({ x: 2, y: 2 }, 500, Phaser.Easing.Elastic.Out, true, 100);

这个补间动画将在半秒内将砖块的比例放大一倍，使用弹性缓动，将自动启动，并且延迟 100 毫秒。

你可以在下面的实时演示中查看本课的完成代码，并使用它来更好地了解它的工作原理

动画和补间动画看起来很不错，但我们还可以为游戏添加更多内容 - 在下一节中，我们将介绍如何处理 按钮 输入。

• « 上一页
• 下一页 »