
3.2 控制动画:交通安全
在2D游戏里最常出现的游戏方式就是让玩家操控游戏中的主角,通过移动等动作进行闯关前进。我们在操控这些主角时,仔细观察就会发现,每当主角收到不同动作的执行指令时,就会出现与之对应的动画,本节将要学习如何控制动画。
任务要求
本案例将要制作的交通安全控制动画,是由玩家通过按钮发出指令,使得交警可以做出各种动作。在完成本实例的过程中主要使用Animation进行动画制作,使用Animator设置动画状态之间的切换方式。当程序运行时,在窗口中会显示三个图形按钮的初始界面,如图3-11所示。单击不同按钮,会播放相应的动画,如图3-12所示。

图3-11 交通安全动画初始界面

图3-12 单击按钮后效果
通过完成任务:
● 掌握使用Animator进行动画切换的设置方法。
● 进一步熟悉Animation的使用方法。
(资源文件路径:Unity 3D/2D移动开发实战教程\第3章\实例2)
3.2.1 图片切割和动画制作
步骤1 创建项目并导入素材
启动Unity,创建一个新的2D项目。在Assets文件夹中单击鼠标右键,选择Import New Asset…命令,将素材Mr.Policeman导入项目中。
步骤2 图片切割
为了完成动画,需要将导入的素材Mr.Policeman切割成独立的图片文件。利用前面学习的图片切割方法完成图片切割,图片切割后的效果如图3-13所示。

图3-13 图片切割后效果
步骤3 创建动画
(1)为图片制作站立Stand动画。首先在Project面板的Assets文件夹中选择“Mr.Policeman_0”图片,拖至Hierarchy面板中,然后适当调整对象的大小和位置,并将此对象重新命名为Mr.Policeman。
(2)单击Hierarchy面板中的Mr.Policeman对象,再选择上方菜单栏的Window→Animation命令,打开Animation动画编辑器界面。在动画编辑器中单击Create按钮建立动画,此时Unity会要求保存Animation动画文件,将文件命名为Stand。
(3)接着打开Project面板的Assets文件夹,将Mr.Policeman_0图片拖曳至动画编辑器中第0画格并摆放好,然后单击预览按钮,观看动画效果。如果觉得动画执行速度过快,可调整Samples数值,如图3-14所示。

图3-14 创建“Stand”动画
(4)因为要为同一Mr.Policeman制作不同动画,所以要在Animation编辑器中单击Clip下拉菜单,通过在下拉列表中选择Create New Clip命令来建立新的动画,将该动画文件命名为Straight,如图3-15所示。接着将图片“Policeman_1”、图片“Policeman_2”、图片“Policeman_3”、图片“Policeman_4”和图片“Policeman_1”依次拖曳至动画编辑器中画格位置并摆放好,如图3-16所示。

图3-15 创建Straight动画

图3-16 编辑Straight动画
(5)以相同的方式在Animation编辑器中单击Clip下拉菜单,选择Create New Clip命令建立Left动画,如图3-17所示。然后将图片“Policeman_5”、图片“Policeman_6”和图片“Policeman_5”依次拖曳至动画编辑器中画格位置并摆放好。

图3-17 创建Left动画
3.2.2 设置动画切换条件
步骤1 动画间关联设置
完成动画的设置后,接下来要处理动画之间的关系。在游戏过程中,Straight动画和Left动画不能同时进行,也就是说,要先完成一个动作停下来再完成第二个动作。
(1)在Unity中直接双击建立动画时产生的“.controller”文件,该文件图标为,可以启动Animator控制器面板进行设置。此时,在Assets文件夹中找到Mr.Policeman.Controller文件并双击,打开Animator控制器面板,关于设置Stand、Straight和Left三个动画状态之间的动作关联性,如表3-1所示。
表3-1 设置Stand、Straight和Left动作关联性

(2)为完成上述关联设置,先在Stand状态上单击鼠标右键,弹出的菜单中选择Make Transition命令,然后在Straight状态上单击,就会出现一条指向Straight状态的白色指向线。相同的操作,完成如图3-18所示的四条指向线,其中两条是由Stand状态分别指向Straight状态和Left状态,另外两条分别由Straight状态和Left状态指向Stand状态。这样界面中就有四条指向线,分别对应表格中的四种成立状态。

图3-18 为动作之间建立关联
步骤2 为动画切换增加触发条件
(1)指向线设置完成后,每个动作都会按照设置好的路线去切换动作,因为动作的切换需要一定的触发条件,所以接下来要为动作切换增加触发条件。首先声明两个条件变量,在Animator控制器面板的左上角可以看到Parameters选项,单击旁边的“+”按钮,在弹出的菜单列表中选择Bool选项,创建两个Bool类型条件变量,两个变量分别取名为Straight和Left,如图3-19所示。

图3-19 为动作切换声明Bool变量
(2)接着为状态切换设置触发条件。单击一条指向线之后,可以从Inspector面板中看到这条指向线的属性。以Stand状态到Straight状态这条线为例(指向线变为蓝色),在Conditions属性中设置条件变量Straight为true,表示当条件变量Straight值为true时触发Straight动画,如图3-20所示。可以按下键盘上的Delete键删除错误的指向线。
(3)当从Straight状态切换到Stand状态时,在Conditions属性中设置Straight为false。四条线的设置内容,如表3-2所示。

图3-20 设置触发条件
表3-2 四条指向线触发条件

3.2.3 编写脚本控制动画
完成动作间的切换条件设置后,还需要给条件变量赋值,这需要编写脚本。
步骤1 创建脚本文件
(1)在Project面板的Assets文件夹下新建一个文件夹,命名为Script。
(2)打开Script文件夹,在文件夹中单击鼠标右键,在弹出的快捷菜单中选择Create→“C# Script”命令,创建“C# Script”文件,并命名为Control.cs,双击打开该文件。
步骤2 编写脚本


【程序代码说明】
第6行:定义所要操作的对象。
第7行:定义Animator对象。
第12~13行:获取当前所要操作的对象以及它的Animator组件,gameObject指的就是脚本绑定的GameObject对象。
第17行:使用SetBool函数给Animator中定义的变量赋值,该函数中第一个参数是Animator面板中定义的变量名称,第二个参数是程序代码内的变量名称。
第18行:使用SetBool函数给在Animator中定义的Left变量赋值。
第22~25行:在屏幕上绘制Stand按钮,并且实现单击Stand按钮时播放Stand动画。
第26~29行:在屏幕上绘制Straight按钮,并且实现单击Straight按钮时播放Straight动画。
第30~33行:在屏幕上绘制Left按钮,并且实现单击Left按钮时播放Left动画。
步骤3 将脚本连接至Sprite对象
(1)编写完脚本后,将脚本文件Control.cs拖曳至Hierarchy界面内的Mr.Policeman对象上,以建立脚本与对象的连接。
(2)运行软件进行测试时,在Game面板左边会出现Stand、Straight和Left三个按钮,单击相应的按钮,可以控制交警做不同的动作。