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

前言

  在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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351