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

前言

  在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创建空物体RiverMidRiverTopCloudsFog,然后分别将env_RiverMidenv_RiverTopenv_Cloudsenv_Fog拖到RiverMidRiverTopCloudsFog下成为其子物体。完成之后,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.animRiverMid.controllerRiverMid.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按钮,然后点击TransformPosition属性右边的+号将RiverMidPosition作为动画要改变的属性。

选择动画控制的属性

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

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

录制关键帧


创建剩下的动画

  创建好RiverMid的动画之后,我们使用相同的步骤为RiverTopCloudsFog创建动画。

RiverTopCloudsFog的动画关键帧信息如下:

  • 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

《土豆荣耀》重构笔记(四)创建背景动画
https://asancai.github.io/posts/cb0dc95d/
作者
RainbowCyan
发布于
2018年12月24日
许可协议