教程分享 | 使用Unity 2D制作经典游戏《吃豆人》(2)
在昨天的教程中,我们分享了创建《吃豆人》迷宫的方法,今天我们将详细介绍如何添加游戏主角——吃豆人的动画。
添加吃豆人
吃豆人精灵
现在该游戏主角——吃豆人登场了!吃豆人“上下左右”每个方向的移动都需要一个动画,我们将所有动画放在一张图中,一行代表一个方向的动画。
注:右击图片选择“另存为”,保存到项目目录 Assets/Sprites 文件夹下。导入设置如下:
切割吃豆人精灵
将 Sprite Mode 设为 Multiple 至关重要,这会告知 Unity 该图片中包含了多个吃豆人精灵。点击按钮打开 Sprite Editor。
接下来,让 Unity 对吃豆人精灵进行切片。选择 Slice,将 Grid 设为 16x16,然后点击下面的 Slice 按钮。
精灵切割完成后关闭 Sprite Editor。如果 Unity 提示 Unapplied Import Settings,选择 Apply。此时,项目视图中吃豆人精灵下会有 12 个子精灵。
创建吃豆人动画
现在可以创建 4 个方向的动画了。我们需要的动画如下:右(切片 0,1,2),左(切片 3,4,5),上(切片 6,7,8),下(切片 9,10,11)。
先创建向右的动画。在项目视图中选中前三个切片精灵,然后将它们拖拽到场景中。
当同时拖拽几个精灵到场景中时,Unity 会自动识别我们想要创建动画,并询问动画保存的位置。将动画命名为 right.anim 并保存到新建的 PacmanAnimation 目录。Unity 会自动在场景中加入游戏对象 pacman_0,并在项目视图中新增两个文件:
- 第一个文件是动画状态机,用于设置动画速度和混合树等。
- 第二个是动画文件。
对余下的动画重复以上步骤。现在层次面板看起来如下:
清除 Unity 自动添加的内容
Unity 为每个动画都新建了游戏对象,但我们这里只需要一个。选中其余三个并删除。
在项目视图中也同样操作。动画和状态机各有 4 个,删除其它多余的三个。
吃豆人动画状态机
现在我们有 4 个动画文件,但 Unity 并不知道要播放哪个动画。所以我们需要一个具有 4 种状态的动画状态机:right、left、up、down。
还要添加变换,让 Unity 知道何时切换动画。需要注意的是,Unity 会在处于 right 状态时重复播放 right 动画,它依靠 Transition 来判断何时切换状态,这些都是 Unity 自动完成的,我们要做的就是在后面的脚本中告知它吃豆人的移动方向。
在项目视图中双击 pacman_0 动画状态机,现在可在 Animator 查看状态机。
创建其它状态
状态机中已经包含 right 状态了,将项目视图中 ShipAnimation 文件夹下的 left.anim 文件拖拽到 Animator 中新建 left 状态。
对剩下的两个状态重复以上步骤。
Mecanim 最大的优点是它会完全自动管理动画状态。我们只需告诉 Mecanim 注意吃豆人的移动方向,Mecanim 会自动切换动画状态,无需我们操心。
创建参数
下面我们要告诉 Mecanim 注意吃豆人的移动方向。移动方向参数类型是 Vector2,本例中吃豆人只有 4 个移动方向,也就是说在动画状态机中仅需 4 种状态变换:
DirY > 0则向上移动DirY < 0则向下移动DirX > 0则向右移动DirX < 0则向左移动
在 Animator 界面中选择 Parameters 标签页,点击右边的 + 添加一个 Float 类型的参数命名为 DirX,再添加一个 Float 参数命名为 DirY。
后面可以在脚本中设置参数,代码如下:
GetComponent<Animator>().SetFloat("DirX", 0);
GetComponent<Animator>().SetFloat("DirY", 0);
创建变换
我们希望 Unity 基于这些参数自动切换动画状态,变换就是用于实现这一目的的。例如,新建一个从 left 到 right 的变换,条件是 DirX > 0。但由于浮点数的比较并不完美,最完美的变换也会存在细微误差,因此我们使用 DirX > 0.1 来判断。从其它任何状态切换为 right 都会用到 DirX > 0.1,所以借助 Unity 的 Any State 来节省一些工作量,Any State 几乎表示任何状态。所以创建一个从 Any State 到 right 的变换就相当于同时创建了 left、up 和 down 到 right 的变换。
具体操作如下:右击 Any State 选择 Make Transition,然后将白色箭头拖拽到 right 状态。点击白色箭头后在检视面板中设置变换的条件(即何时切换状态)为 DirX > 0.1。注:点击右下角的 + 新增条件。
禁用 Settings 中的 Can Transition To Self ,这样可以避免出现按下某个方向键时动画会一直重新开始的情况。
因此,当吃豆人向右移动时(DirX > 0.1),状态机会切换到 right 状态播放向右移动的动画。同样的步骤新建另外 3 个变换:
Any State到left,条件为DirX < -0.1Any State到up,条件为DirY > 0.1Any State到down,条件为DirY < -0.1
现在 Animator 如下:
动画状态机基本完成,还要进行最后一个调整,选中所有状态并在检视面板中修改 Speed ,以便动画看起来不会太快。
点击 Play 就可以看到 right 动画。
吃豆人命名及摆放
在层次面板中选中 pacman_0 并重命名为 pacman(右击选择重命名,或按 F2)。
将其坐标设为 (14, 14),这样吃豆人就不会位于迷宫外了。
在下一期教程中,我们将为大家介绍如何设置吃豆人物理。