
3.1 编排动画:种子发芽
本节通过介绍制作“种子发芽”连续动画的过程,来学习利用Animation工具编排“画格”和“时间轴”,从而完成单独动画设计的方法。
动画是通过一格一格连续动作的图片串联成一个影片胶卷,然后以一定的速度逐格播放,只要眼睛长时间注视连续播放的图片,当每张图片播放速度足够快时,人眼就会发生“视觉暂留”现象,自动将这些快速播放的图片串联成流畅的动画。
在制作动画时,构成动画的基础就是“单张图片”和“影片胶卷连续播放”,将这两个基础元素投射到动画制作工具中,代表的就是所谓的“画格”和“时间轴”。画格用来存放单张图片,而时间轴用来编排这些图片的先后顺序与出现时间,当播放时就会按照时间轴的设置来显示这些画格,实现整个动画的视觉效果。
任务要求
本任务是制作种子发芽的连续动画。要设计种子发芽的连续动画,首先需要利用Unity提供的Sprite Editor编辑器进行图片切割,以获得种子发芽时不同状态的图片素材。然后进行动画设置,即把种子的图片加入到动画编辑器(Animation)中,调整好时间间隔和播放速度。本任务主要使用Animation来编排“画格”和“时间轴”,种子发芽动画的最终效果如图3-1所示。

图3-1 种子发芽动画的效果
通过完成任务:
● 进一步熟悉Sprite Editor编辑器的使用方法,即如何在合成图片中提取元素。
● 掌握使用Animation制作动画的方法。
(资源文件路径:Unity 3D/2D移动开发实战教程\第3章\实例1)
3.1.1 Sprite设置与编辑
步骤1 创建项目导入素材
启动Unity,创建一个2D项目。在Assets文件夹上单击鼠标右键,选择Import New Asset…命令,将名字为Seed的图片素材导入项目中,如图3-2所示。导入后图片自动转换为Sprite对象,如图3-3所示。

图3-2 执行导入素材命令

图3-3 动画素材
步骤2 Sprite设置
如果图片不是Sprite格式,需要先对素材进行Sprite设置,这样才可以进行后续的图片切割。要将种子发芽的图片类型(Texture Type)设置为Sprite,则需要将Sprite Mode设置为Multiple,然后单击Apply按钮,以应用相关设置,如图3-4所示。

图3-4 Sprite设置
步骤3 图片切割
由于种子发芽是由多张分解动作图片所组成的一张大图片,因此在建立动画之前必须先将每个动作图片切割开来。这个操作可以通过Unity所提供的Sprite Editor来执行。关于图片切割,前面已经进行了详细讲解,在此不再赘述,图片切割完成后的效果如图3-5所示。

图3-5 种子图片切割后效果
3.1.2 Animation动画编排
步骤1 创建对象
图片切割完成后,原本的种子素材已经可以展开成单个的分割图。此时将分割出来的第一张图片“Seed_0”拖曳到Hierarchy面板,也就是将种子加入到场景中,并重新命名为Seed,如图3-6所示。

图3-6 把分割出来的动作图片加入场景
步骤2 动画编排
(1)由于Animation动画编辑器原本默认为关闭状态,因此要在菜单栏中将编辑器打开,并把种子加入到动画编辑器中。操作方法为:依次在上方菜单栏中执行Window→Anination命令,打开Animation动画编辑窗口。
(2)单击选中刚刚加入Hierarchy面板中的Seed对象,回到动画编辑器窗口后,单击Create按钮,建立动画文件,如图3-7所示。

图3-7 Animation动画编辑器
(3)在单击Create按钮建立动画文件时,会弹出保存动画文件的对话框,将动画文件命名为Seed,保存路径设置在Assets文件夹下,存盘后会自动产生Seed.controller文件和Seed.Anim文件,如图3-8所示。

图3-8 把动画文件保存到项目目录下
(4)保存完成后进入动画编辑模式,此时动画编辑器中的录制动画按钮会变成红色。接下来将所有种子发芽的图片从Project面板按顺序拖到Animation编辑器的画格位置,并选取固定的时间间距分开摆好,如图3-9所示。

图3-9 设置动画的关键画格
(5)摆放好所有分解图片后,单击左上角红点即可取消编辑。单击旁边的播放按钮,就可以预览画格连续播放出来的动画效果。测试后,如果觉得播放速度不太合理,可以在Animation编辑器中调整Samples的参数,设置的数值越小,代表播放的速度越慢。