《抛投大乱斗!》EA分享01:动画的学习与准备

作者:Rocktaoist
2023-03-03
4 2 0

前言

《魔物酒馆》商店页面开启,这么快解锁,是为了和《抛投大乱斗!》最开始的数据对比一下。所以之后的很长一段时间,要开始返工上一个游戏。

先聊一聊《抛投大乱斗!》(Throwing Master,下称《抛投!》)立项时一些技术路线选择的思考,以及学习动画的源头,最后记录一下初次学习动画的过程。

《抛投大乱斗!》立项回顾

《抛投!》立项之初,我只有大约 3 个月的绘画学习经验(在 2 年的时间里,断断续续抽出时间学习艺术原理,并进行小部分速写训练尝试。原理与速写的时间分配比例大约为 7:3)。

最初,我对美术素材制作的理解比较肤浅,以为凭借自己娴熟的 PS 技巧能够用时间去换取结果,但在实际操作中,我发现这样的工作流存在很大问题,效率低到离谱不说,风格的统一性也很难保证,于是开始抽空学习绘画理论。

‘低效率 x 时间’的第一个 2D 场景设计,可能花了两三天时间

两年前开始学习控笔

《抛投!》就像一个我亲手制作的电子精神小伙,付出了大量心血,但他在商业上毫无作为。虽然大家可能会笑着说,这只不过是前十个“小破烂”而已。但我必须嘴硬解释一下:不是的,他可能只是年少。

我决定继续深化这个游戏,虽然已经有在亏,但并不妨碍他亏得更大。(笑)

其实,按照当前游戏设计的主流观念,前十个“小破烂”应该赶紧做掉。但《抛投!》承载了我大量关于研发路线的策略,都是在为后续的开发做准备,所以我认为应该继续深化。比如:

  • 绘画
    • 如何用最少的颜色表达一种风格化美术;
    • 人物与造型如何设计? 剪影设计是什么?比例与结构如何控制?
    • 更高效的 StyleGuide;
    • 更高效的复用素材;
    • UI 的设计学习。
  • Unity
    • 学会使用以前不常使用的委托与事件;
    • 学习一些代码框架,寻找最适合自己的;
    • 摸索一些更符合自己思维习惯的写法,比如通过回调的写法来控制整个游戏的流程;
    • 使用设计模式;
    • 尝试接入手柄;
    • 学习一些原生接口如何实现;
    • 原生物理引擎的使用,控制脚本的生命周期;
    • IO
    • Git
  • 其他
    • 上架 Steam 的流程;
    • 设计文档该怎么写比较好;
    • 自我 QA;
    • 多人网上联机;
    • Switch 的可能性。

虽然这都是偏基础的知识,但量大会引起质变,如果缺失太多,最终就会变得棘手。在各个技术线间反复横跳,容易遗忘不说,还经常让人烦躁,导致时间白白流失。

在上述深化过程中,学习的原则越来越清晰:

  • 首要目的是把效率拉满
  • 其次是控制自己的学习边界
  • 然后是学会自我和解,保持愉悦的心态(心情)

2 个月的艺术学习积累后,再次尝试做的设计。此时的大气透视、景深以及尺度已经得到了大量的改善

在制作《抛投!》时,因为很多技术上的缺失,最终呈现出的很多设计的想法与表现都发生了变形。而其中最要命的则是动画表现这一块。如果缺失动画的表现,很多情绪就难以传达给玩家,比如:

  • 玩家胜利后,如何通过角色的表情去表达喜悦;
  • 失败时,如何通过人物的变化增加玩家的不安;
  • 如何从视觉上对目标进行指引;
  • 动画所能带来的那种生机感。

而我对动画的态度,颇为抵触与恐惧,这导致动画成了整个技术栈里最后一个学习的技能。

恐惧的源头,是以前我在公司被迫参与制作某个 Deadline 已经过期的 3D 渲染动画,耗时一个月时间,连轴转学习 max 的各种动画功能,顶点动画,蒙皮和绑定。而付出那么多精力后,最终结果也没多好,遂产生了对动画的抵触。以至于每次要下单购买 Spine2D 时,都会一哆嗦然后关掉网页。

动画对我而言就像一座大山,但现在,为了《抛投!》补完计划,我不得不硬着头皮滚下山。

动画的制作日志

旧日的准备

很多年前,在决定开发独立游戏时,我特地研究了动画原理,主要是为了评估自己做动画可能需要的时间与成本,但因为没有绘画经验,很多原理只能在 AE 上模拟。我当时以为,动画的轨迹应该是按照现实物理规律演算的,并基于此做过小球的弹跳伸缩动画。

当时做的小球动画

为了确定动画学习路线的准确性,我还特地咨询了前同事——当时很火的某机甲游戏动画师,他推荐了《原动画基础教程》,并科普了一些比如甩尾效应、预备以及惯性之类的常识,末了还提醒我《原动画基础教程》提及的很多知识已过时,随便看看了解一下即可(可能用词不准确,比如,甩尾是指鞭子末端的滞后表现)。

《原动画基础教程》

那一次,我花了两三天阅览《原动画基础教程》,可能 3%的吸收效率都未到,当时潜意识里以为这是老牌的动画工作流,看不懂很正常。


现在的准备

时间一晃多年,我又翻开了这本书。

这次花了一天吸收,主要精读 130 页以前的内容,剩下的 200+页则是快速浏览,寻找与游戏相关的可用、有效信息。

  • 这一次内容的吸收效率,乐观估计达到 90%以上;
  • 与上次学习效率差异的原因,大概是因为绘画技巧的提升,在动手尝试与阅读之间,提升了吸收效果;
  • 之所以精读前 130 页,是因为那些案例还在自己画功的承受范围之内。后续讲解的分镜头,我已经不具备对应的能力,且我的游戏暂时还用不上。

一些提醒:

  • 我用的制作软件是 PS;
  • 必须要跟着书里的示范进行绘画,一旦下笔,内容吸收效率就会大幅度提升;
  • 从我的学习经验来看,因为后面的内容画不出来,对应的知识点大都消化不良。

(如果下次再打开这本书,一定是我人体解剖与空间透视都已经有小成的时候。)

我写了一个简单的练习计划表。

学习-练习的记录

我个人的学习习惯,首先对要制作的内容核心点进行假设,然后尝试在应用中解决这些难点。再比照书本里的知识,看看哪些地方自己的想法更好,书中的哪些内容值得学习。


1.尝试绘制行走(在没打开书以前

行走本来应该是一个整体,但绘制成了一个下肢,这是因为担心要素过度可能会导致的手忙脚乱。


2.尝试绘制钟摆

无标记,纯感性选择帧位

有标记,根据加速度的变化理性选择帧位

钟摆让我感受到标记的重要性。


3.弹球动画的尝试

最开始画弹球时,我按照横向位移进行等分标记,然后发现运动起来很怪异。

想了一会,才想起加速度这事,然后重新修改(第三次落地前因为帧率一致,导致滞空异常)。

需要注意的流程:

  • 关键张
  • 空间幅度
  • 标尺
  • 落地前拉伸

需要刻意训练的动画习惯:

  • 注意空间幅度(左右的变化不大,但是上下起伏比较大)
  • 使用标尺
  • 使用压缩与变形——在落地前一帧,有一个拉伸,而落地弹起没有形变


4 走路训练(第 1 天)

尝试一个偷懒的画法,就是两关键帧搞定,非常适合用在游戏里。此时我还不太注意前倾与重心问题,导致人物行走产生了跛脚的效果。


5.走路训练(第 2 天)

先从脑海里提取昨日的信息,然后通过回忆重点进行制作。

a. 这一次则是尝试“接触法"的试验,以及检测脑海里昨日的知识点。

  • 尝试只有关键张进行细化
  • 刻意将其他的补足帧画得比较随意
  • 假想人物行走,不参考真人

我喜欢尝试在练习中加入变量,验证方法的效率

出现的问题:

  • 因为把开始帧复制到了结束帧,导致前后脚的阴影变化出现问题。


b. 第二次绘制,我选择现绘制一组草图动画,通过不同的颜色确定动势与位置,然后再绘制人物细节。

定下的练习方向

  • 先绘制基本的躯体为块状作为参照
  • 这一次通过观察真人进行绘制
  • 特意不使用分离式的躯体打样(为了对比,下一次则使用分离打样)
  • 使用标尺决定横向位移
  • 大原画与小原画的先后顺序绘制
  • 走路的节奏设定:8 格(8 格一步,1 秒三步,主要绘制出 16 格的走路节奏即可)


出现的问题:

  • 我发现自己没有太理解关键帧的意思,并且强行完成了补足帧,导致画面抖动很厉害;
  • 在绘制中依然出现的问题,那就是没有找实物参考,靠空想,这一直都是我的坏习惯;
  • 实际上应该从真实的行走影片里截图,找出 4 张关键帧。

c. 第 3 次行走动画绘制

  • 经过第 2 次绘制后,我对节奏与动画的理解似乎加深了一些,实际上,只要画出关键帧,并放在正确的位格就可以了。
  • 这次使用分离式的躯体打样(也就是 PS 分层,一个层级负责躯干与脚,另一个负责手臂。躯干与脚分开会更好)。

确实如书里说的,大小原画是动画最关键的位置。


6.待机动画练习(第 3 天)

应该怎么做?

我的猜想:

  • 胸腔的变化方式(最难的部位,因为控制整个动画的重心)
    • 上下
    • 前弓与收缩
  • 手臂的甩尾变化
  • 腿部往外压缩(压缩比较好控制)
  • 通过动画的节奏猜测,应该是 16 格(闲适的漫步)。就是说,16 格做完一个呼吸。


实际的情况:

虽然有问题,但需要掌握的知识已经 Get 到手,根据我的经验,继续细化的工作已经能够猜到怎么做,所以做下一个动画。

Tips:

  • 关节的地方应该搞一个类似图钉的标记物,这样做,绘制时容易依据标记物进行变化;
  • 跨与下肢的变化幅度比上肢要小很多,可以保守调整;
  • 胸腔本来还遵循大小原画的步骤,结果下肢变成一步一步绘制,导致最后一帧与第一帧的动作幅度过大。如果要让最后一帧变得顺畅,那就会牵动若干帧。


7.击打动画练习(第 3 天)

自我 QA:

  • 怎么找到关键帧?
  • 节奏如何变化?标记的位置?
  • 高低起伏与重心怎么掌控?

找关键张

标尺位置信息

打完收工

总结:

这很像弹球的轨迹,需要考虑到节奏的变化,而不是线性的空间标记。如果没有前面的钟摆、弹球,以及行走作为前置练习,大概率会晕头转向。


8.特效训练-火焰(第 4 和第 5 天)

特效是一个更讲究规律的绘画表现形式,开始的时候我完全没有头绪,所以到油管翻了一下。随便拉一下进度条,猜测是粒子发射器的原理,然后就带着发射器的思路去绘制。

假想一个发起点,然后加入 N 个点,这些点会逐渐消失。

老样子,先假想,再看别人怎么想。

猜想:

  • 首先能够绘制出不同形态的火焰,才开始考虑绘制连贯的动画,所以要先临摹
  • 粒子发射器的可能性
  • 块面假想
  • 一种通过随机缩放大小旋转的偷懒做法

临摹与思考

以粒子发射器去思考的绘画方式

我想象中的偷懒的方式


结果:

没什么意义,有形状没内核。画出的东西,看到就丢进垃圾桶了。下次应该保存,提供给观者。


新假想:

  • 应该用气流去思考线条的变化,然后根据线条进行创作[1]
  • 那么尝试训练一个直线的气流,以及斜着走的气流表达;
  • 如果以气泡的方式去绘制,那么按照 1.5 倍拉伸的规律,则泡泡会在 1 的位置进行切割。如果气流上升得更快,则可以将拉伸的倍率提升;
  • 气泡实际上应该是一直往上,而不是在原始位置变化,分裂时为整体的一半;
  • 火焰应该也有 T 叠,这样体积感会更好体现;
  • 可以先画出正常的节奏,然后通过改变侧翼气泡两帧的节奏,让火焰的节奏变得混乱,这样也许可以更真实。

关于线条绘画[1]的结果被我弄丢了,大概就是一个蜡烛的火焰,有效果,但是没意义。主要的思考方式是使用类似三角函数的变化进行绘制,虽然无用,但促成了我的一些新理解。

关于气泡的猜想,是因为我看到了一个国人的教程,是关于气泡的绘制方法,非常高效。

  • 气泡进行等分:比如说,一个八字形气泡,两个圆应该是等分的,但是生命周期的尾端应该要往外延伸 1.5 倍。

努力控制火焰的节奏与气流影响,开始时,掌控不好走向

变成 1 拍 3,看看这样是否可以减少火焰急促的走向

技法的总结

逐张画法与原动画法的结合:

  1. 先画出主要动作的连续运动轨迹
  2. 然后画出次重要动作的连续运动轨迹
  3. 再画出次次重要动作的连续运动轨迹
  4. 接着是第四重要的
  5. 最后才加上头发、尾巴、服饰或会飘动的部位灯

什么是一拍二?

  • 所谓一拍一,一拍二,一排三,都是在帧率为【每秒 24 帧】情况下而言的;
  • 一拍一即在帧率为 24 帧的情况下,每一帧图内容都有变化;
  • 一拍二即在帧率为 24 帧的情况下,图片内容连续两帧不变;
  • 一拍三即在帧率为 24 帧的情况下,图片内容连续三帧不变;
  • 一拍四即在帧率为 24 帧的情况下,图片内容连续四帧不变(一拍四以上基本已经绝迹了)。


我个人的一个猜想:能否通过这种方式(首先绘制一个看起来平衡的块面,然后填充人物动态)检测重量?


走路的总结:


窍门:


设定节奏:


节奏:

  • 4 格=飞快的跑(每秒 6 步)
  • 6 格=跑或者快走(每秒 4 步)
  • 8 格=慢跑或“卡通式”走路(每秒 3 步)
  • 12 格=轻快、正统、“自然”地走路(每秒 2 步)
  • 16 格=闲适的漫步(每秒 2/3 步)
  • 20 格=年长或者疲惫的人(接近每秒 1 步)
  • 24 格=很慢的脚步(每秒 1 步)
  • 32 格=“请……告诉我……回家……的路”(老态龙钟)

一些总结:

  • 12 格是正常人的行军式走路
  • 业内会把摄影表的模板定位 16 表,12 表,8 表
  • 《猫和老鼠》就是 8 格节奏

自我 QA:

  • 标尺是不是应该在原画与小原画绘制好以后才标注

核心技法:

  • 时间节点与空间幅度
  • 压缩和伸展
  • 原画与原画之间是中间画
  • 小原画(过度位置)
  • 缓冲-渐入渐出
  • 中间画是最关键的
  • 这个会扰动整体的感受
  • 关键张
  • 8 字型尝试(下一次绘制尝试)
  • 注意绘画的透视
  • 动作一定是弧线的形态,注意这个弧线(重点,还未吸收的)
  • 如果动作没有弧线或者轨迹,那么做出来的动画就不会流畅。一定要利用弧线做出流畅的动画(除非要求的是直线运动)
  • 缺少一个利用弧线制作动画的练习

可以通过 Overlap 的方式去表现 1 拍 1 动画,意思就是拉长中间帧。

书里提到的 Dry Brushing(进行一个练习,通过 DryBrushing 做 1 拍 1):


人物走路动画的思考

绘制时需要运用的习惯:

  • 基础的八字轨迹之外,是不是可以考虑用挤压的球形去表达人物的行走轨迹?

形象设计的技巧:

  • 人物的下沉决定了力量
  • 下沉的少,说明足够轻盈,适合用来表达女性

个人的 Tips:

  • 减少线条的使用,避免抖动
  • 蓝线条确定动态,红线条确定轨迹

走路的两种方式:

  • 向上放置法
  • 通常的处理方式
  • 向下放置法
  • 更容易创建出变化的动作

尾声

因为之前设计《抛投!》时,没掌控动画的制作方法,这方面的短板导致很多地方的设计表现都颇为生硬。这次研究了 5 天动画后,之前那些硬设计的缺陷,似乎有了许多种解决方法。

此外,新兵与老兵的沟通是有代际的。老兵在他们年轻时付出的那些努力与思考,在融入他们骨子以后,就像呼吸一样正常,他们会忘记那些艰苦的岁月,然后以一种稀疏平常的口吻教训新人。

我写下这篇日志,也是为了记录我在泥地里打滚的过程,如果将来有人刚好经过这个成长过程,以及看到我如何挣脱泥泞,希望这系列文章能给你带来一些帮助。

(我最近在试着提升自己的表达能力,主要是想把技术以一种更平易近人的方式写出来,让观者觉得有趣,让还在这个阶段的开发者能够思考。如果觉得文章有晦涩、拗口、结构性问题,又或者其他不足,希望能在评论区给出看法和建议,非常感谢。)