
5.2 创建对象和动画
任务要求
这部分主要完成三项工作,一是英语启蒙教育小游戏的素材准备,二是完成四个字母放大和左右摇摆的动画,三是让每个字母的动画之间建立联系,即字母状态可以发生改变,由静止不动到放大或者左右摇摆,效果如图5-3所示。
通过完成任务:
● 掌握创建对象与创建动画的制作方法。
● 进一步熟悉Unity中动画的制作和控制。
● 进一步熟悉在动画之间建立联系的方法。

图5-3 最终效果
(资源文件路径:Unity 3D/2D移动开发实战教程\第5章\实例1)
5.2.1 素材准备
步骤1 准备图片素材
由于游戏里面会出现四个不同的英文字母,首先要创建一个名为Texture的文件夹,在该文件夹里存放事先准备好的A、B、D和F四个英文字母图片,如图5-4所示。

图5-4 四个英文字母图片
步骤2 音频素材
另外在游戏中特别加入了语音播放的功能。首先创建名为Sound的文件夹,在该文件夹里存放事先准备好的录音文件,各个录音文件名与对应的语音内容整理如表5-1所示。
表5-1 文件名与语音内容

5.2.2 创建项目并导入素材
启动Unity,创建一个新的2D项目。然后将准备好的Texture素材文件夹和Sound素材文件夹复制粘贴到Assets文件夹中,随即便可以在Unity的Project面板中看到这两个素材文件夹,如图5-5所示。

图5-5 Assets中的素材文件夹
5.2.3 创建对象与动画
在创建字母对象和为字母对象创建动画时,四个字母的操作步骤是完全一样的,这里以字母A为例进行详细讲解,对于其他字母,仿效字母A即可,把操作步骤中字母A换成其他字母就能得到与字母A相同的效果。
步骤1 创建字母A对象
将Assets\Texture文件夹下的字母A图片直接拖曳至Hierarchy面板中,重新命名为A,即创建了一个名为A的对象,如图5-6所示。然后在场景面板把字母A摆放在合适的位置。

图5-6 创建字母A对象
步骤2 为字母A对象添加动画
(1)为字母A对象添加静止不动的动画。先在Assets文件夹下新建一个anim文件夹,统一保存所有创建的动画文件,以便进行管理。
(2)选择Hierarchy面板中的字母A对象,从菜单栏中选择Windows→Animation命令,进入Animation编辑器中。
步骤3 创建字母A静止不动的动画
(1)单击Animation编辑器中的Create New Clip按钮来创建动画文件,将文件命名为A,保存到anim文件夹。
(2)将Assets\Texture文件夹下的字母A图片直接拖曳至第0画格,如图5-7所示。

图5-7 将字母A图片拖曳至第0画格
步骤4 创建字母A的缩放动画
(1)在打开的Animation动画编辑器中,单击名为A动画左侧的下拉按钮,在下拉列表中选择Create New Clip……命令,创建一个名为A_Scale的动画文件,该文件是字母A放大缩小的动画。
(2)选择A_Scale动画文件,将Assets\Texture文件夹下的字母A图片直接拖曳至第0画格。然后单击Add Property按钮,在展开的属性列表中选择Scale选项,再单击其右侧的“+”按钮,如图5-8所示。

图5-8 给A对象加入缩放的动画
(3)然后在第30画格、第60画格的上方双击鼠标,代表复制第0画格到这些位置上,如图5-9所示。

图5-9 复制画格
(4)接着选择第30画格,将红色的播放条也移动到第30画格处,然后将X、Y和Z轴的数值都调整为2,如图5-10所示。设置完毕后,可以单击左上角的预览按钮来查看效果。

图5-10 设置30画格
步骤5 创建字母A左右旋转动画
(1)打开Animation动画编辑器中,单击名为A动画左侧的下拉按钮,在下拉列表中选择Create New Clip……命令,创建一个名为A_Rotation的动画文件,该文件是字母A向左或向右旋转的动画,可以实现左右摇摆的效果。
(2)选择A_Rotation动画文件,将Assets\Texture文件夹下的字母A图片直接拖曳至第0画格,然后单击Add Property按钮,在展开的属性列表中选择Rotation选项,然后单击其右侧的“+”按钮,如图5-11所示。

图5-11 给字母A对象加入左右旋转的动画
(3)然后在第20、40、60画格上方双击,将第0画格复制到20、40、60画格处,如图5-12所示。

图5-12 复制画格
(4)单击选中第20画格,将红色的播放条也移动到第20画格处,然后将Z的数值调整为45,步骤如图5-13所示。

图5-13 设置第20画格属性
(5)单击选中第40画格,将红色的播放条也移动到第40画格处,然后将Z值调整为-45,如图5-14所示。设置完毕后可以单击左上角的播放按钮,查看动画的效果。

图5-14 设置第40画格
步骤6 建立动画间的关联
(1)关闭Animation动画编辑器,双击Project→assets →anim →A.controller文件,打开Animator动画控制器面板。或者选择菜单栏中的Windows→Animator命令,打开Animator动画控制器面板。
(2)在字母A的三个动画A、A_Scale和A_Rotation之间建立图5-15所示的关联性。若建立由A指向A_Scale的关联,只需用鼠标右键单击A图标按钮(图5-15所示的黄色图标按钮),在弹出菜单中选择Make Transition命令,再单击A_Scale图标按钮即可。然后使用同样的操作方法,完成其他关联。

图5-15 建立A与另外两个动作的关联性
(3)在Animator动画控制器面板左上角的Parameters选项卡下单击“+”按钮,添加一个Trigger变量,并命名为scale,如图5-16所示。

图5-16 添加scale变量
(4)单击A动画至A_Scale动画方向的连线,在Inspector面板中即可看到Conditions条件的选项,如图5-17所示。将选项改为刚才添加的Trigger类型的变量scale,代表触发scale,可以由字母A的A动画切换到A_Scale动画。

图5-17 设置A切换到A_Scale的条件
(5)接着单击A_Scale动画至A动画方向的连线,在Inspector面板的Settings选项区域中,保持Exit Time等于0.75的数值不变,即代表缩放动画播放至0.75秒后回到静止状态,如图5-18所示。

图5-18 设置A_Scale到A的切换条件
(6)下一步进行动画A_Rotation的设置,在Animator动画控制器面板左上角的Parameters选项区域中单击“+”按钮,添加一个Trigger变量,命名为rotation,如图5-19所示。

图5-19 添加rotation变量
(7)选择A动画至A_Rotation动画方向的连线,进入Inspector面板,将Conditions条件的选项改为刚才添加的Trigger类型的变量rotation,代表触发rotation可以由字母A的A动画切换到A_Rotation动画,如图5-20所示。

图5-20 设置A切换到A_Rotation的条件
(8)接着单击A_Rotation动画至A动画方向的连线,在Inspector面板的Settings设置中,保持Exit Time等于0.75的数值不变,即代表左右旋转动画播放至0.75秒后回到静止状态,如图5-21所示。

图5-21 设置A_Rotation动画至A动画切换的条件
然后以相同的步骤完成字母B、D、F的对象创建、动画创建和动画间关联的相关操作。