游戏开发新手入门教程12:游戏积木之动画
  nYrzcJimKxjR 2023年11月02日 85 0

动画是游戏中必不可少的部分,这一节里我们将学习与动画有关的积木块,以及如何自己创建简单的动画。

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

以上一节的示例为基础,我们的场景是这样的:场景中包含战机,敌机,和蓝色子弹,当我们点击战机时,战机会发射一枚子弹,击中正上方的敌机,敌机被击中后立即消失。

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具

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

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_02

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_03

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_04

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

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_05

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

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_06

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

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_07

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_08

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_09

点击​预览场景​,查看效果:

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_10

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

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_11

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

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

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

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

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

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_12

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_13

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_14

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

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

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_15

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

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_16

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

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_17

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

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_18

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_19

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_20

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

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_21

动画的效果是这个样子,其实,所谓的动画就是由一张一张的图片拼接而成的,这就是动画的制作原理。

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_22

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

游戏开发新手入门教程12:游戏积木之动画_微信小游戏开发_23

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_24

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

游戏开发新手入门教程12:游戏积木之动画_可视化游戏开发工具_25

点击​预览场景​,看一下:

游戏开发新手入门教程12:游戏积木之动画_游戏开发教程_26


总结一下:

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

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

练习一下:

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


我是会做游戏也会教你做游戏的小蚂蚁,想学习做游戏的话,关注我就对啦!欢迎关注公众号【​小蚂蚁教你做游戏​】,领取全网最全的微信小游戏开发原创教程资料。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

nYrzcJimKxjR