游戏开发零基础入门教程(11):游戏积木之动画

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

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


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


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


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


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


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


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


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

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


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


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


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


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


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


点击预览,查看效果:


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


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


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


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


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


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


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


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



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


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


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


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


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


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


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


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


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


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


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


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


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


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


点击预览,看一下:



总结一下


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

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


练习一下


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

没有系统性的学习课程和路线?自己学习没氛围学不下去?遇到问题无人帮助即时解答?缺少经验不知该如何前行?......欢迎加入小蚂蚁的游戏开发年度课程,不只是一门课,而是围绕着学习游戏开发有关的一整套服务。帮助你用一年的时间学会做游戏,做出自己的游戏,让游戏为你带来睡后收入。欢迎来跟一百多位同学一起学习做游戏,一起探索游戏的更多可能。【点击这里】了解课程服务详情,【点击这里】可了解小蚂蚁能为你提供的其它课程和服务。


这里是小蚂蚁的部分小游戏,闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装,点击下方的游戏卡片就可以直接玩啦!










欢迎加个微信,交个朋友,朋友圈每日分享与做游戏有关的知识和内容,可以来围观。备注“学习做游戏”可免费领取原创的游戏开发教程资料大合集!非学员只接受付费咨询,不闲聊,望见谅。


目录
打赏
0
0
0
0
15
分享
相关文章
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
193 69
游戏开发丨基于Tkinter的扫雷小游戏
游戏开发丨基于Tkinter的扫雷小游戏
180 3
|
8月前
Libgdx游戏开发(7)——开始游戏界面实现
使用上的注意事项 1. 切换到一个新的Screen的时候,如果之前的Screen不再使用,需要手动调用Screen.dispose方法,进行资源的释放 2. 给Game对象设置Screen的时候,设置的新的那个Screen会调用onShow()方法,而之前的Screen会调用onHide()方法 3. 如果有需要的话,一般在onShow()方法,给当前Screen设置一个输入监听器 优化尝试 - 全局game对象
78 0
EasyX图形库实现贪吃蛇游戏
EasyX图形库实现贪吃蛇游戏
205 0
游戏开发零基础入门教程(10):游戏积木之碰撞
顾名思义就是两个物体碰到一起。联系到我们的现实世界,你随手将一个东西扔出去,这个东西最终掉落在地上,就可以说这个东西与地面发生了碰撞。在游戏开发中,我们关注的“碰撞”重点在于发生的那一刻:是谁碰到了谁,碰撞的一方或者被撞的一方又该做出怎样的反应。
101 0
游戏开发零基础入门教程(10):游戏积木之碰撞
游戏开发零基础入门教程(8):游戏积木之逻辑
“如果,那么”的逻辑非常的直白,如果玩家死了,那么游戏就应该结束。反之,如果玩家没有死,那么游戏就不应该结束。如果我干掉了一个敌人,那么我的得分就应该加一。如果敌人被子弹打中了,那么它就应该爆炸......
151 0
游戏开发零基础入门教程(9):游戏积木之克隆
这一节里我们学习一下另一种游戏中常用的积木:克隆。 先回顾一下克隆的概念,就是将一个东西复制出很多份,每一份都是一个“克隆体”,而所有的“克隆体”都与“本体”有着相同的特性。 在“打飞机”的游戏中,需要有许许多多的敌机不停的从屏幕上方落下来。 我们就使用“克隆”来实现这个功能,通过“克隆”敌机,来产生无穷无尽的敌机。 首先,导入“背景”和“敌机”素材,布置一下场景。
107 0
游戏开发零基础入门教程系列:人人都能做游戏
你正在阅读的是我原创的游戏开发零基础入门教程系列,面向的是没人任何游戏开发和编程经验,想要学习自己做游戏的普通人。这个系列教程已经帮助了很多人做出了自己人生的第一个游戏,希望它也能帮助到你。
527 0
从零开始手把手教你使用javascript+canvas开发一个塔防游戏03敌人一波一波的出
从零开始手把手教你使用javascript+canvas开发一个塔防游戏03敌人一波一波的出
101 0
从零开始手把手教你使用javascript+canvas开发一个塔防游戏02敌人自动寻路
从零开始手把手教你使用javascript+canvas开发一个塔防游戏02敌人自动寻路
238 0

相关实验场景

更多