
4.1 创建对象
气球漫游软件中,控制气球移动,气球落到钉子阵时出现晃动,碰到橘子皮时爆破。本节将创建需要用到的各种对象,并为对象添加相应动画。
4.1.1 创建地板对象
步骤1 导入素材
打开Unity,新建一个2D项目。在Assets文件夹下创建子文件夹,命名为Picture,将准备好的素材拖动至Picture文件夹中,如图4-4所示。

图4-4 导入素材
步骤2 创建Floor对象
(1)先将Assets\Picture文件夹下的Floor图片直接拖曳至Hierarchy面板中。
(2)选中Hierarchy面板中的Floor对象,在右边的Inspector面板中设置Floor的位置(Position)和大小(Scale)。地板的位置与大小设置如图4-5所示。

图4-5 设置地板的位置与大小
步骤3 添加Edge Collider 2D边缘碰撞器
(1)选中Hierarchy面板中的Floor对象,在右边的Inspector面板中单击Add Component按钮,选择Physics2D→Edge collider 2D选项,如图4-6所示。即可为Floor对象添加Edge Collider 2D边缘碰撞器。

图4-6 添加Edge Collider 2D
(2)场景中地板图片内会出现一条绿色的水平碰撞检测线,这条检测线就是承受其他对象的地板,因此要选择碰撞器来触发物理阻挡,注意在这里不勾选Is Trigger复选框。
(3)此时边线所处的位置可能不是理想的位置,那么在Inspector面板中展开Edit Collider 2D组件,然后单击Edit Collider按钮,如图4-7所示。

图4-7 单击Edit Collider按钮
(4)接着在Scene面板中对这条碰撞线的位置进行设置。用鼠标拖动绿色水平碰撞线最左端的顶点,移动顶点位置,如图4-8所示。

图4-8 移动碰撞线左端点
(5)同理,拖动绿色水平碰撞线最右端的顶点,移动顶点位置,如图4-9所示。

图4-9 移动碰撞线右端点
(6)鼠标在碰撞线上任意一处位置点击,可以添加顶点,使水平碰撞线变成曲线碰撞线,如图4-10所示。

图4-10 添加顶点
(7)按住Ctrl键,绿色碰撞线会变成红色,如图4-11所示。鼠标单击红色碰撞线上的顶点,此时添加的顶点会被删除,还原到原来的水平碰撞线。

图4-11 删除顶点
4.1.2 创建气球对象
步骤1 切割图片
本次任务需要创建两个动态游戏对象,分别为气球(Balloon)、爆炸气球(ExplodeBalloon)。利用前面所学知识,对Assets\Picture文件夹中的图片进行切割。
步骤2 创建Balloon对象
(1)将名为气球的图片直接拖曳至Hierarchy面板中,并重新命名为Balloon。
(2)选择Hierarchy面板中的Balloon对象,在右边Inspector面板中修改位置(Position)和大小(Scale)属性,如图4-12所示。

图4-12 修改气球的位置和大小属性
步骤3 制作动画
(1)选中Hierarchy面板中的Balloon对象,在菜单栏执行Window→Animation命令,如图4-13所示。

图4-13 选择Animation命令
(2)在打开的Animation编辑器中,单击右侧的Create按钮添加动画,将动画命名为Balloon_idle,并保存动画。
(3)将气球图片拉入至画格中第0格的位置,即可为Balloon对象制作静止不动的动画,如图4-14所示。

图4-14 Balloon_idle动画设置
(4)接着为Balloon对象创建晃动状态的动画。首先在Animation编辑器中选择Ballon_idle →Create New Clip下拉选项命令,如图4-15所示。

图4-15 选择Create New Clip选项
(5)新建动画文件并命名为balloon_shake。此时,Animation面板中显示为balloon_shake。单击Add Property按钮,在展开的属性中,选择Scale选项,单击其右侧的“+”按钮,如图4-16所示。

图4-16 为对象添加缩放晃动动画
(6)系统会自动在第0画格和第60画格添加关键帧。在第30画格上方的地方双击鼠标,代表复制第0画格到这些位置上,如图4-17所示。

图4-17 复制画格
(7)接着选择第30画格,将x,y的数值都调整为1.05,如图4-18所示。设置完毕后可以单击左上角的预览按钮来查看效果。

图4-18 设置第30画格
(8)预览动画并查看效果,可以适当调整动画播放速度,设置好动画后关闭Animation编辑器即可。
步骤4 设置动画切换
(1)接下来进行动画间的关联设置,选中Hierarchy面板中的Balloon对象后,在菜单栏中选择Window→Animator命令,如图4-19所示。

图4-19 选择Animator命令
(2)在Animator编辑器中切换到Parameters选项面板,单击“+”按钮,在下拉列表中选择Bool选项,添加一个Bool类型的变量,变量名为balloon_shake,如图4-20所示。

图4-20 添加Bool变量ballon_shake
(3)鼠标右键单击Animator编辑器中橘黄色的balloon_idle状态图标,选择Make Transition选项,连接到balloon_shake状态图标上。再右键单击balloon_shake状态图标,选择Make Transition选项,连接到橘黄色的balloon_idle状态图标上,这样就在balloon_idle状态图标和balloon_shake状态图标之间出现了双向连线,如图4-21所示。

图4-21 双向连线
(4)要在Inspector面板中设置conditions的属性,则需要单击balloon_idle至balloon_shake方向的连线,此时连线会变成蓝色,如图4-22所示。找到Inspector面板中的Conditions属性,添加切换条件balloon_shake为true,如图4-23所示。

图4-22 单击连线

图4-23 设置Conditions属性
(5)单击ballon_shake至balloon_idle方向的连线,找到Inspector面板中的Conditions属性,设置切换条件,选择ballon_shake变量为false,如图4-24所示。

图4-24 设置切换条件
上面完成的一系列工作,就是通过Animation编辑器为Balloon气球对象添加一个不动时的动画balloon_idle和一个晃动时的动画ballon_shake,利用Animator组件将这两个动画进行关联,使用Bool类型变量ballon_shake来控制气球由不动到晃动时的状态改变。
4.1.3 创建钉子阵对象和橘子皮对象
步骤1 创建钉子阵对象
将Assets\Picture文件夹下的钉子阵图片拖曳到Hierarchy面板中,并在Inspector面板中设置钉子阵对象的位置和大小属性,如图4-25所示。

图4-25 设置钉子阵的大小和位置
步骤2 创建橘子皮对象
同理,将Assets\Picture文件夹下的橘子皮图片拖曳到Hierarchy面板中,然后设置它的位置、大小属性值,并且旋转一定的角度,如图4-26所示。

图4-26 设置橘子皮属性
4.1.4 创建爆炸气球对象
步骤1 创建对象
(1)将图片爆炸_0直接拖曳至Hierarchy面板中,并重新命名为ExplodeBalloon。
(2)选择Hierarchy面板中的ExplodeBalloon对象,在右边的Inspector面板中修改该对象的位置(Position)和大小(Scale)属性,如图4-27所示。

图4-27 设置爆炸气球的位置和大小
步骤2 制作动画
(1)为Hierarchy面板中的ExplodeBalloon对象添加动画。首先选中Hierarchy面板中的ExplodeBalloon对象,在菜单栏执行Window→Animation命令。
(2)在打开的Animation编辑器中,单击右侧的Create按钮添加动画,并将动画命名为ExplodeBalloon。
(3)将图片爆炸_0摆放至画格中0格的位置,图片爆炸_1摆放至画格中30格的位置,图片爆炸_2摆放至画格中60格的位置,如图4-28所示。

图4-28 ExplodeBalloon动画设置
(4)预览动画,查看效果,可以适当调整动画播放速度,设置好动画后关闭Animation编辑器即可。ExplodeBalloon对象只有一种动画,程序一运行默认播放该动画。
4.1.5 添加图层
在2D平面下,有些对象会被遮挡,添加图层的目的是通过调整图层顺序,可以使其显示出来。
步骤1 添加front和behind图层
(1)选中Hierarchy面板中的Balloon对象,在Inspector面板中展开Sprite Renderer折叠按钮,选择Sorting Layers下的Add Sorting Layer命令,如图4-29所示。
(2)单击“+”按钮,添加两个图层,分别命名为front和behind,最后创建的图层会显示在最上面,如图4-30所示。

图4-29 选择Add Sorting Layer命令

图4-30 添加图层
步骤2 设置图层
(1)选择Hierarchy面板中的Balloon对象,在右边的Inspector面板中,将Sorting Layer属性设置为front,如图4-31所示。

图4-31 设置图层属性
(2)依次为Hierarchy面板中的其他对象设置图层位置,如表4-1所示。
表4-1 各个对象的Sorting Layer属性

(3)完成以上操作后查看效果,如图4-32所示。

图4-32 查看添加对象后的效果
(4)可以看到橘子皮挡住了爆炸效果,为了让爆炸效果显示在前面,对于同一层的对象,可以通过设置Order in Layer属性进行处理,这里将爆炸气球的Order in Layer属性设置为1(数值越大显示越靠前),如图4-33所示。最终的效果如图4-34所示。

图4-33 设置Order in Layer选项

图4-34 最终效果