《土豆荣耀》重构笔记（四）创建背景动画
前言
在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这个仓库到本地进行查看。
