这篇翻译不完整。请帮忙从英语翻译这篇文章

这是Gamedev Phaser教程 16 第14步您可以在Gamedev-Phaser-Content-Kit / demos / lesson14.html完成本课程后找到源代码

为了使游戏看起来更加多汁和活泼,我们可以使用动画和补间。这将导致更好,更有趣的体验。让我们来探讨如何在游戏中实现Phaser动画和补间。

动画

在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()函数(具有ballpaddle作为默认参数),在调用时播放摆动动画。在结束</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看起来很不错,但我们可以添加更多的我们的游戏 - 在下一节我们将看看处理按钮输入。

文档标签和贡献者

 此页面的贡献者: j787701730
 最后编辑者: j787701730,