Animations and tweens

在 Phaser，动画中，涉及从外部来源获取 spritesheet 并依次显示 sprites。作为一个例子，当碰到一些东西时，我们会让球摇摆。

首先，从 Github 抓取 spritesheet并将其保存在你的/img目录中。

接下来，我们将加载 spritesheet - 将以下行放在preload()函数的底部：

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

而不是加载单个图像的球，我们可以加载整个 spritesheet - 不同图像的集合。我们将按顺序显示精灵，创造动画的幻觉。该spritesheet()方法的两个额外的表格确定给定 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");
}

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

而动画依次播放外部精灵，补间游戏中物体的属性平滑，如宽度或不透明度。

让我们在游戏中增加一个补间，使砖块在被球击中时顺利消失。转到你的ballhitBrick()功能，找到你的brick.kill();行，并将其替换为以下内容：

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

让我们来看看这里，看看这里发生了什么：

1. 当定义一个新的补间时，你必须指定哪些属性将被补间 - 在我们的例子中，而不是在被球击中时立即隐藏砖块，我们将把它们的宽度和高度缩放到零，所以它们将很好地消失。最后，我们使用该add.tween()方法，指定brick.scale为参数，因为这是我们想要补间。
2. 该to()方法定义补间结束时对象的状态。它需要一个包含所选参数的期望结束值的对象（比例取尺度值，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 毫秒。

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

动画和 tweens 看起来很不错，但我们可以添加更多的我们的游戏 - 在下一节我们将看看处理按钮输入。

• 上一页
• 下一页