《土豆荣耀》重构笔记（四）创建背景动画

前言

  在2D游戏中，游戏背景常常由一张、或者多张图片构成。而图片是静态的，为了不让游戏背景那么一成不变，显得更有动感一点，我们通常需要加入一些不能与游戏内的元素发生交互的背景动画，本篇文章的主要内容，就是讲述如何使用Unity制作一些简单的2D动画。

---

Animation Editor

  Unity专门提供了Animation Editor让开发者来制作动画。选中Unity顶部菜单栏的Window，然后点击Animation即可打开Animation窗口。当然，也可以使用快捷键Ctrl+6打开。关于Animation Editor的使用，可以参考Unity的关于Animation Editor的介绍Animation Window Guide。

---

添加素材

  首先，我们在Hierarchy窗口中右击Background并选择Create Empty创建空物体RiverMid、RiverTop、Clouds和Fog，然后分别将env_RiverMid、env_RiverTop、env_Clouds和env_Fog拖到RiverMid、RiverTop、Clouds和Fog下成为其子物体。完成之后，Hierarchy窗口中的场景结构如图所示：

场景结构

它们的属性设置如下:

• RiverMid:
  • Position: (0, -11, 0)
• env_RiverMid:
  • Position: (0, 0, 0)
  • Sorting Layer: Background, Order In Layer: 4
• env_RiverMid (1):
  • Position: (48, 0, 0)
  • Sorting Layer: Background, Order In Layer: 4
• RiverTop:
  • Position: (0, -11, 0)
• env_RiverTop:
  • Position: (0, 0, 0)
  • Sorting Layer: Background, Order In Layer: 5
• env_RiverTop (1)
  • Position: (48, 0, 0)
  • Sorting Layer: Background, Order In Layer: 5
• Clouds:
  • Position: (0, -2, 0)
• env_Clouds:
  • Position: (-40, 0, 0)
  • Sorting Layer: Background, Order In Layer: 2
• env_Clouds (1):
  • Position: (0, 0, 0)
  • Sorting Layer: Background, Order In Layer: 2
• env_Fog:
  • Position: (-48, 0, 0)
  • Sorting Layer: Background, Order In Layer: 3
• env_Fog (1):
  • Position: (0, 0, 0)
  • Sorting Layer: Background, Order In Layer: 3

---

创建动画的基本步骤

  接着，我们在Project窗口的Assets文件夹下创建一个名为Animation的文件夹，然后在Animation文件夹下再创建一个名为Environment的文件夹，用于保存背景动画。接着打开Animation Editor，在Hierarchy窗口中选中RiverMid并点击Animation Editor中的Create按钮在Assets\Animation\Environment文件夹下创建一个名为RiverMid.anim的文件。

创建动画

  创建完成后，我们可以看到在Environment下生成了两个文件，分别是RiverMid.anim和RiverMid.controller。RiverMid.anim是我们要的动画，而RiverMid.controller则是用于控制动画播放的状态机。当我们在使用Animation Editor创建动画的时候，Unity自动帮我们创建了一个以我们创建的动画作为默认动画的状态机，并将其附加在我们选择的物体上。此时在Hierarchy窗口下选中RiverMid，可以看到多了一个Animator组件。

RiverMid

  为了有序地管理资源文件，我们需要将controller文件分开存放。在Assets文件夹下创建一个名为Animator的文件夹，然后在Animator文件夹下再创建一个名为Environment的文件夹，用于保存背景动画的状态机文件。创建完成之后，在Project窗口中，将RiverMid.controller拖动到Assets\Animator\Environment下。为了避免丢失资源引用，我们应该尽量在Unity中移动资源文件。

文件结构

  接着，我们点击Animation Editor中的Add Property按钮，然后点击Transform下Position属性右边的+号将RiverMid的Position作为动画要改变的属性。

选择动画控制的属性

  选择好动画控制的属性之后，我们开始录制动画。首先，我们使用鼠标右击Animation Editor生成的默认结尾帧，然后选择Delete Keys删除该帧。此外，我们还需要鼠标单击初始帧，并使用鼠标右击选择该关键帧的切线类型为Auto。关于几种切线类型的详细说明，详见Unity的Animation。

  接着，点击Animation Editor左上角的圆形按钮进入录制模式。然后，我们在右边方框内输入1500后按回车键确认，表示我们想在第1500帧处记录一个关键帧。此时，因为Sample的值为60，因此我们可以认为经过60帧以后，就经过了1s。当然，我们这里也可以使用鼠标左右拖动来选择我们要在哪里记录关键帧。最后，我们设置该关键帧下RiverMid的Position属性的值为(-24, 0, 0)。设置完成后，可以看到Animation Editor在第25秒处生成了一个关键帧。点击Animation Editor的三角形按钮可以播放我们生成的动画以便预览效果。

录制关键帧

---

创建剩下的动画

  创建好RiverMid的动画之后，我们使用相同的步骤为RiverTop、Clouds和Fog创建动画。

RiverTop、Clouds和Fog的动画关键帧信息如下：

• RiverTop
  • 关键帧位置: 0, Position: (0, -11, 0), 切点类型: Auto
  • 关键帧位置: 2500, Position: (-24, -11, 0), 切点类型: Auto
• Clouds
  • 关键帧位置: 0, Position: (0, -2, 0), 切点类型: Auto
  • 关键帧位置: 3600, Position: (40, -2, 0), 切点类型: Auto
• Fog
  • 关键帧位置: 0, Position: (0, 1.5, 0), 切点类型: Auto
  • 关键帧位置: 7200, Position: (48, 1.5, 0), 切点类型: Auto

---

后言

  所有的动画都创建完成之后，点击Unity编辑器界面的Play按钮运行游戏，可以看到动画在游戏中实际播放的效果。如果觉得效果不符合自己想要的，读者可以返回上一步设置自定义的值。最后，本篇文章所做的修改，可以在PotatoGloryTutorial这个仓库的essay2分支下看到，读者可以clone这个仓库到本地进行查看。

---

参考链接

1. Animation Window Guide
2. Using the Animation view
3. Creating a New Animation Clip
4. Animating a GameObject
5. Unity的Animation