微信小游戏开发新手教程12-游戏积木之动画

436 阅读6分钟

这是“人人都能做游戏“系列的第12篇,此系列教程面向的是没有任何游戏开发经验的绝对新手,做个微信小游戏并不是很难,你也可以的。

教程中所使用的小游戏开发工具为微信官方的小游戏制作工具:微信小游戏制作工具

如果你对游戏开发感兴趣,欢迎关注我的公众号:小蚂蚁游戏开发。

动画是游戏中必不可少的部分,这一节里我们就学习一下与动画有关的积木块,以及如何利用手中的小游戏制作工具制作简单的动画。

添加敌机的爆炸动画

让我们直接从示例开始,上一节中我们让“战机”发射子弹,击中“敌机”,然后敌机直接隐藏。这个过程过于粗糙,在真实的游戏中,敌机被击中后往往会伴随着爆炸动画以及音效。

上一节的示例为基础,我们的场景是这样的:场景中包含战机,敌机,和蓝色子弹,当点击战机时,战机会发射一枚子弹,击中正上方的敌机,敌机被击中后立即消失。如果忘记了,可以去回顾一下(游戏积木之碰撞)。

1.png

接下来,我们要丰富一下敌机被击中后的逻辑,当被子弹击中后,敌机先播放一段爆炸动画,然后再消失。

在“图层管理”中选中“敌机”,然后在“图层属性”区中点击“编辑造型”按钮。

2.png

在弹出的“造型编辑”对话框中可以看到,当前敌机只有一个造型,点击上方的“从素材库添加”。

3.png

在素材库中选择“彩色飞机大战”,然后选择“红色敌机-动画”,点击“导入”按钮。

4.png

从造型编辑窗口可以看出,当前的敌机包含2个造型了,一个是正常的造型,一个是爆炸时的造型。点击“完成”按钮,敌机的“爆炸动画”就添加好了。

5.png

小提示:当选中动画造型时,可以预览当前的选中的动画的播放效果。

选中敌机,积木区中当前敌机的逻辑是,当碰到子弹后直接隐藏。

6.png

下面我们为其增加动画积木块。

选择“外观”,将“切换自己造型为1.敌机且不更新尺寸”积木拖拽到积木区中。

7.png

接着,选择“动画”,把“自己在1秒内循环播放造型”积木块拖拽到积木区中。

8.png

最后看起来是这样:当敌机碰到子弹时,将造型设置为“2.红色敌机-动画”,也就是敌机的爆炸动画,然后设置动画播放时间0.5秒,因为爆炸只需要一次即可,所以这里的爆炸动画不需要循环。

9.png

点击预览,查看效果:

10.gif

子弹击中敌机,敌机直接消失了,没有显示爆炸动画。哪里出了问题?

11.png

我们再看一下上方的积木块,有一点需要注意的是:当游戏运行时积木块是从上向下一块一块的执行的,中间不会有时间间隔。当积木块执行到“自己在0.5秒内不循环播放造型”这块积木时,其实是需要0.5秒钟的时间来播放造型的,但是由于积木块之间没有时间间隔,所以爆炸的造型还没有来得及播放,就执行到了下一块积木“隐藏自己”了。所以,我们并没有能来得及看到爆炸动画,敌机就直接隐藏了。

举个简单的类比,有助于你对积木块执行流程的理解。这个就像你去排队办业务,当到你开始办理时,发现缺少一个证件需要出去补办,此时,你就需要离开去补办证件,而下一个人就可以继续办理了。这种情况,一般都会继续进行下一个业务办理,而不是等待直到你补办证件回来。

但是有时可能你缺少的证件只需要到旁边的柜机上用几秒钟的时间就可以办好,这种情况下通常就会等待你几秒钟,等你回来以后继续办理。

再回看上方的积木块,如果我们想要看到敌机的爆炸动画,我们就需要在“隐藏”自己前,等待0.5秒钟,让爆炸动画有时间播放完。

选择“逻辑”,将“等待1秒”积木块拖拽到“隐藏自己”积木块之前。

12.png

最后看上去是这样,播放爆炸动画,等待0.5秒钟(动画播完)后,再隐藏自己。

13.png

点击预览,再次看下效果:

14.gif

这次达到了预期的效果,敌机先播放了爆炸动画后才隐藏了。

制作简单的动画

接下来,我们学习一下如何利用手中的小游戏制作工具,做一些简单的动画。

在资源管理器的右上角有一个小小的画板图标,点击这个画板图标。

15.png

进入到一个新的界面,这就是一个简单的画画工具,我们可以使用它画一些图片或者做一些动画。你可以在中间大画布上写写画画,熟悉一下这个小工具。

16.png

接下来,我会做一个旋转的正方体动画,来展示制作动画的流程。

首先,我们在画布中间使用正方体工具绘制一个正方体,通过右侧的属性简单设置一下,大小250x250,位置位于画布的中间,旋转角度为0。

17.png

接着,我们增加一张画布,点击上方画布右侧的下拉按钮,在弹出的框中点击“加号”按钮,再添加一张画布。

18.png

我们在第二张画布上的同一个位置画一个同样大小的正方体,但是设置正方体的旋转为120度。

19.png

接着,我们再创建一张画布,画一个同样的正方体,还是同样的位置,然后将旋转角度设置为240度。

20.png

点击“预览动图”按钮,就可以看到动画效果了。

21.png

动画的效果是这个样子,其实,所谓的动画就是将许多图片按照顺序一张一张的展示而成的,这就是动画的制作原理。

22.gif

制作好动画后,我们点击右上角的“保存”按钮。

23.png

起个名字,点击“确定”。

24.png

这样,我们的动画就会被当作资源插入到游戏中了。

25.png

点击预览,看一下:

26.gif

总结一下

这一节我们学习了如何加入动画,并通过积木块来控制播放动画。

接着我们学习了如何使用手中的小游戏制作工具来制作简单的动画,并直接导入到游戏中。

练习一下

尝试使用动画制作工具制作一些动画,加入到游戏中,通过使用积木块来对你的动画进行进行控制。