前言
「魔物酒馆」商店页面开启,这么快解锁是为了对比一下「抛投!」最开始的数据。
所以之后的很长一段时间要开始返工上一个游戏。
先聊一聊「抛投大乱斗!」立项时的一些技术路线选择的思考,以及学习动画的源头,最后记录一下初次学习动画的过程。
「抛投大乱斗!」立项回顾
「抛投大乱斗!」在立项之初,我的绘画学习经验大概只有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:
- 减少线条的使用,避免抖动。
- 蓝线条确定动态,红线条确定轨迹
走路的两种方式
- 向上放置法
- 通常的处理方式
- 向下放置法
- 更容易创建出变化的动作
尾声
1.
因为之前设计「抛投大乱斗!」时,没掌控动画的制作方法,这方面的短板性导致很多地方的设计表现都颇为生硬。
这次研究了5天动画后,之前那些硬设计的缺陷,似乎有了许多种解决的方法。
2.
新兵与老兵的沟通是有代际的,老兵在他们年轻时付出的那些努力与思考,在融入他们骨子以后,就像呼吸一样正常,他们会忘记那些艰苦的岁月,然后以一种稀疏平常的口吻教训新人。
我写下这篇日志,也是为了记录我在泥地里打滚的过程,如果将来有人刚好经过这个成长过程,以及看到我是如何挣脱泥泞,希望这些文章能给你带来一些帮助。
(我最近在试着提升自己的表达能力,主要是想把技术以一种更平易近人的方式写出来,让观者觉得有趣,让还在赶来这个阶段的开发者能够思考。
如果觉得文章有晦涩,拗口,结构性问题,又或者其他不足,希望能在评论区给出看法和建议,非常感谢。)
哇噢!日志里的gif可以换成循环播放的吗?
@virmint:刚才在PS里Batch替换了,之前没注意到还要设置。
你有时不我待的感觉吗?
@moonagent:有,十年眨眼已过。但是没办法,心态已经放宽。😀
@RockTaoist:所以我选择了合作,找优秀的同伴。比如美术,我也曾深入学习过,从基本功开始,但是现在我只会当作一个爱好去看待。
@moonagent:我也很想找合作者,但是烧掉太多年最后只能亲自上阵,这只能说是环境与际遇的问题了。
挺好
最近由 π 修改于:2023-02-21 18:09:28我其实一直有个看法是觉得游戏和动画有极大的亲缘关系,甚至粗暴点可以说动画是游戏创作的一半灵魂
之前偶然看过神奇之歌作者greg的某个采访,记得他也说过很类似的话,感觉彼此看法差不多
我有尝试想过,或许是出于
一方面是二者的要素都是来自并基于于脑海心像的再现,即都是非实拍获取
一方面是游戏中的信息和表演可大量的基于动画的知识、经验、思维去呈现和思考...
总之想说看到你这块下功夫了感觉很酷,也感觉动画的知识是能帮我们走得更快更远所不可或缺的
能最终下决心投入精力在这里应该算是投资回报比很高的决策了
最后顺带几句其他的
* 前半段提到的那个鞭子原理估计是【跟随动作与重叠动作overlapping & follow through】
* 联网方面的插件可以优先留意一下Photon,至少前年调查时这个算是最佳选择,现在变没变不敢说
* 画动画Aseprite这个工具太有爱也放松了,我最近这几年都只用它了,steam上有可以试试
@π:老兄每次评论都能给我非常大的帮助,感谢!
动画确实是非常重要的一环,之前我在这块的认知进了误区,觉得独立游戏可以把玩法拉满,动画最简化(比如整个游戏只有Transform动画)。最近在思考时,发现自己狭隘了,不是每个游戏类型的动画内容都可以压缩。
动画学习这块目前会持续输入,最后应该会产出一些复合性的设计思考。
- 估计就是这个,最近都在吸收一些基础的理论,没能深入。
- 我对服务器和联网的代码相关知识非常缺乏,之前也曾考虑过Photon和Mirror,但是还没有时间尝试。最近有位朋友告诉我,Steam的SDK能覆盖我的游戏联网功能需求。(https://partner.steamgames.com/doc/features/multiplayer)(不过这个SDK可能会在接入Switch之时,需要更改)
- Aseprite之前误以为是简化版PS,也不知道它还能作动画,今晚研究看看。
文章阅读方面的感受是,中下部分有一些流水的内容会显得散,当时读的时候会有灵感觉得部分内容可以笔记化,以链接嵌入,几个动画学习部分保留其最开始的那个或其中的精华留在原文里,如此可以在阅读的过程中缓急得当,且可以适当有的放矢
现在部分地方我当时瀑布式看下来会感觉稍显信息量比前面淡了,有的地方会想略读,但又担心略过比较有意思的信息和段落...
@π:这条评论非常有帮助,也是我在思考的问题。
文章的结构,我采取的是一半故事一半就事的方式。可能属于两种不同的阅读体验,导致后半部分更显冗长。
最初是想把过程剖得详细一些,这样说不定会有动画专业的朋友指出我的问题。另外原计划是打算整合成两三张动图配合思考进行总结,没想到AE和PS在整合GIF这块有很多问题,试了半天无果,最后只能散装收场。
吃一堑长一智,下次会改良这个写法。
@RockTaoist:嗯 有时候会感觉作品最后还是作为信息流进入脑袋里形成印象、记忆。游戏最后进入大脑也如此,只是由于是体验引擎,往往通过系统产生信息流。而动画算是直接对信息流进行构造的艺术,所以从信息流的角度去思考和设计自己的游戏往往就自然近似了做动画要思考的方方面面...
* steamSDK这个之前关注少了,之后我看看,但从直觉上感觉估计pc上指望它可以,跨平台的时候就得再换别的了
* tvpaint其实可能是最强的,通常动画系的朋友就有事直接上这个了,但aseprite足够轻度也挺酷的,画资产的话大多数时候够用了(我也喜欢看到steam上对这个软件统计的使用时间的持续增长的感觉 哈哈 数据化修炼人生之美)
@RockTaoist:GIF整理如果是遇到压缩上的困难,可以试试ezgif.com这个在线工具,gif优化神器,也提供基于image sequence合成的功能。我很久没用经典工具直出过gif了,印象里好像是隐约觉得之前就感觉它们自带的压缩功能总是不太能满足当时的要求....
https://ezgif.com/optimize
https://ezgif.com/maker
(不过这周我在上面总传不上去图片,不知道是我换地方了网络的问题,还是它服务器拉了)
所以我最近也在找它的本地替代,但还没找到合适的。
@π:原本是打算把GIF导入到AE里面排版导出,再转换GIF。结果AE无法加载GIF,需要序列帧,遂用PS重新Batch拆分GIF成序列帧,但时间太久。后来尝试先转视频文件,再进AE排版,结果帧率被改变。一来一回感觉杀掉太多时间,最后就直接把原图放上来了。😀下次会注意导出两份,这样进行合图的时候就会轻松很多。(用PS绘画和制作动画,主要是它的Action和Batch实在太强了,另一个原因是习惯了。)
@RockTaoist:哈哈看来确实在软件间传递上遭受了大折磨 但感觉已经思路清晰了 没白搞
@RockTaoist:如果是以教学动画为目的的话表现形式可以参考下这个 https://saint11.org/blog/pixel-art-tutorials/, 不过这种形式感觉花费精力超多
最近由 mnikn 修改于:2023-02-24 14:52:50@mnikn:
- 我能力还没到能够教学啦,主要是分享一下自己的思考。
- 我最开始就是想以这种方式制作的,如果导出带有alpha的序列图就会容易很多。因为第一次制作,不知道AE和PS对GIF的包容度极差,导致最后散装摆图。
谢谢分享,看这篇日志整理了一些动画相关的知识点
看了您的日志感觉题主还是很厉害的,可以坚持自学这么久。
但是看到了打击gif动画后,有几个不成熟的小建议,希望可以让你的动画变得更好:
①打击连段之间没有充分的拉开节奏感,例如前两下轻击可以快速打出,后面重击有明显蓄力延长帧后再打出,会让你的打击动作更具备节奏感
②蓄力-出拳可以做出更明显的动画收缩-舒张的差距。即在蓄力前摇的时候身体收缩更明显、以储备充分势能,在出招后尽量舒展、将力量打出
③攻击定格的关键帧和后摇动作是展示人物性格的好方法。看gif的后摇好像是想做出最后用力过猛的倾向,但因为太短展示的不够充分
@Nova-nBxvoJ:兄台所言极是,这些问题确实都是显性的。目前在动画这一块仍是初窥门径,只能理解一些标尺、幅度、空间、时间的入门知识点。在节奏感、性格这些进阶的技巧上,目前还不是我所能触及的,比如建议3里面提到‘展示性格’的技巧,书里有长达上百页关于人物行走产生的性格与形象变化,但是我目前连控制行走带来的性格变化都做不到。
如果将来能尝试进阶的技巧,还望兄台来指点迷津。