在昨天的教程中,我们分享了创建《吃豆人》迷宫的方法,今天我们将告诉大家如何添加游戏主角 - 吃豆人的动画!

添加吃豆人

● 吃豆人精灵


现在该游戏主角——吃豆人出场了! "上下左右“每个方向的移动都需要一个动画,将所有动画放在一张图中,一行就是一个方向的动画:

1.png

注:右击图片选择另存为,存到项目目录Assets/Sprites文件夹下。
导入设置如下:

2.png

 切割吃豆人精灵

将Sprite Mode设为Multiple很重要,这会告诉Unity其中包含了多个吃豆人精灵。点击按钮打开Sprite Editor:

3.png

现在就让Unity对吃豆人精灵进行切片。选择Slice将Grid设为16x16,然后点击下面的Slice按钮:

4.png

精灵切割完成后关闭Sprite Editor。如果Unity提示Unapplied Import Settings,选择Apply。现在项目视图中吃豆人精灵下有12个子精灵:

5.png

● 创建吃豆人动画

现在可以创建4个方向的动画了。再提一下,我们需要的动画如下:右(切片0,1,2),左(切片3,4,5)上(切片6,7,8),下(切片9,10,11)
先创建向右的动画。在项目视图中选中前三个切片精灵:

6.png

然后将它们拖拽到场景中:

7.png

现在同时拖拽几个精灵到场景中,Unity就会知道我们想创建动画,并自动询问动画保存的位置。将动画命名为right.anim并保存到新建的PacmanAnimation目录。Unity会自动在场景中加入游戏对象pacman_0,并在项目视图中新增两个文件:

8.png

第一个文件是动画状态机,用于设置动画速度和混合树等。第二个的动画文件。对余下的动画重复以上步骤。
现在层次面板看起来如下:

9.png

● 清除Unity自动添加的内容

Unity为每个动画都新建了游戏对象,但我们这里只需要一个。选中其余三个并删除:

10.png

在项目视图中也一样。动画和状态机各有4个:

11.png

同样删除其它多余的三个:

12.png

● 吃豆人动画状态机

现在有4个动画文件,但Unity并不知道要播放哪个动画。所以我们需要一个具有4种状态的动画状态机:right, left, up, down
还要添加变换让Unity知道何时切换动画。注:Unity会在处于right状态时重复播放right动画。它依靠Transition来判断何时切换状态。这些都是Unity自动完成的,我们要做的就是在后面的脚本中告知它吃豆人的移动方向。
在项目视图中双击pacman_0动画状态机:

13.png

现在可在Animator查看状态机:

14.png

● 创建其它状态

状态机中已经包含right状态了,将项目视图中ShipAnimation文件夹下的left.anim文件拖拽到Animator中新建left状态:

15.png

对剩下的两个状态重复以上步骤:

16.png

Mecanim最大的优点是它会完全自动管理动画状态。我们要做的就是告诉Mecanim注意吃豆人的移动方向。Mecanim会自动切换动画状态,不需我们操心。

● 创建参数

下面就来告诉Mecanim主意吃豆人的移动方向。移动方向参数类型是Vector2,下图展示了几种可能的移动方向:

17.png

本例中吃豆人只有4个移动方向。也就是说在动画状态机中仅需4种状态变换:
DirY>0则向上移动,DirY<0则向下移动DirX>0则向右移动,DirX<0则向左移动
在Animator界面中选择Parameters标签页:

18.png

点击右边的+添加一个Float类型的参数命名为DirX,再添加一个Float参数命名为DirY:

19.png

后面可以在脚本中设置参数,代码如下:
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状态:

20.png

点击白色箭头后在检视面板中设置变换的条件(即何时切换状态)为DirX > 0.1:

21.png

注:点击右下角的+新增条件。
禁用Settings中的Can Transition To Self :

22.png

注:这样可以避免出现按下某个方向键时动画会一直重新开始的情况。
因此,当吃豆人向右移动时(DirX > 0.1),状态机会切换到right状态播放向右移动的动画。同样的步骤新建另外3个变换:Any State到left,条件为DirX < -0.1,Any State 到up,条件为DirY > 0.1Any State 到down,条件为 DirY < -0.1
现在Animator如下:

23.png

动画状态机就差不多完成了。还要进行最后一个调整,选中所有状态并在检视面板中修改Speed以便动画看起来不会太快:

24.png

点击Play就可以看到right动画:

25.gif

● 吃豆人命名及摆放

在层次面板中选中pacman_0并重命名为pacman(右击选择重命名,或按F2):

26.png

将其坐标设为 (14, 14) 这样就不会位于迷宫外了:

27.png

在下一期教程中,我们将为大家介绍如何设置吃豆人物理。
原文链接:http://noobtuts.com/unity/2d-pacman-game