像素画角色行走动画从2帧极限约束练起

打开网易新闻 查看精彩图片

文本概览:全文约 3,723 字,阅读约 10 分钟。

你是不是也画过一堆站着的像素小人,一到“让他走路”就卡死?

站立还能糊弄,走路不行。腿一迈,剪影散了;帧一加,节奏乱了。很多独立游戏的角色,其实就卡在这一步:画得出人,走不出戏。

这篇把俄罗斯像素画家 Weilard 的《像素疾驰》第五篇整段拆开讲。核心就一件事:先在极端限制里把“步”的骨架摸清楚,再一点点加颜色、加细节、加方向。

你会看到,两帧两色也能骗过眼睛;三帧三色能做出体积;四帧四向,已经够撑起一款像《星露谷物语》那种体量的角色资源。

学完你可以立刻做一个练习:给自己的角色做一套“两帧剪影走”。能过这一关,后面加色加光才有底。

今天这一章专门讲角色行走。角色终于要“活”了。

练习从极简开始。

迪士尼动画师那套“关键帧 + 中间帧”思路会反复出现,但我们故意从两帧、三帧、四帧往上爬,而不是一上来就上二十四帧。

第一章:两色两帧的“二进制”行走

分辨率按老游戏常见的 320×200 想,全图只给你两个颜色,动画只给你两帧。一个颜色还得当背景。听起来像在整人。

可这正是训练剪影与关键姿态的好办法。颜色少,错处藏不住;帧数少,你必须抓住“迈步”和“迈满”这两个瞬间。

先画一个正面小人。

第一帧正常站着,第二帧整体上移一像素,他像在原地等你教他走路。这两帧还不是行走循环,只是“等待/呼吸”热身;真正的两帧走,要等你从下面的标本里抽出“抬腿”和“迈满”。

打开网易新闻 查看精彩图片

侧视更重要。角色左右移动时,玩家看到的是侧面。所以再画一组侧视“等待”的朋友们。同样只是等待示范,拍完请他们离场,别抢戏。

打开网易新闻 查看精彩图片

两帧的世界里,走路最直接能用的是姿势对姿势:先钉关键帧,再补中间帧。注意:这不是十二原则里的舞台调度/构图,别搜错词。可你现在根本没有中间帧:两帧本身就全是关键帧。还有一种画法是从头到尾一帧接一帧往前推(直线相位),适合一次性过场;游戏里要无缝循环时,更稳的是先钉关键帧再补中间。那怎么办?先借一套“帧很多”的动画,把关键姿态认出来。

下面这套二十四帧行走,来自作者未发行项目《Drake: The Golden Hind Story》。别一上来就模仿这种工作量。它只是标本:让你看清“一步”里有哪些峰值。

打开网易新闻 查看精彩图片

一步大约占十二帧。把半步的帧序摊开:

打开网易新闻 查看精彩图片

颜色太花,干扰判断。先压成黑白剪影,关键姿态会跳出来。

打开网易新闻 查看精彩图片

关键帧可以记成:在某一段动作里,最能说明“这一刻在干什么”的那几张。对走路来说,通常是“抬腿准备迈”和“双腿拉开到最开”这两类姿态。

从剪影序列里挑:第一帧(迈满,双腿拉开到最开)与第六帧(抬腿准备迈)。你自己做练习时认的是这两种姿态,帧号只对这份标本有效。左边彩色版糊成一团;右边黑白版缩小清理后,正好能撑住两帧任务。

打开网易新闻 查看精彩图片

照着这两个关键姿态,做出两色两帧循环。能走,是因为颜色被掐死了。一旦加细节,这层“骗过眼睛”的手法立刻穿帮。极限约束下的幻觉,本身就是一课。

打开网易新闻 查看精彩图片

同一骨架,换厚度、换像素团块、换剪影,七个小人也能各有脾气。限制不等于无聊,限制逼你想招。

打开网易新闻 查看精彩图片

第二章:三色三帧,体积从第二色开始

三帧一步,颜色也给到三:背景一色,角色还能用两色。两色意味着你能分出近处亮、远处暗,剪影里终于有前后腿。

奇数帧听着别扭。很多版本的 RPG Maker 序列偏偏就是三帧。作者拿它当挑战,也当“制造幻觉”的练习场。

先画姿态与情绪小稿。不必等于终稿,但动手前要想清楚角色是什么感觉。

打开网易新闻 查看精彩图片

别一次动全身。先只动腿。

打开网易新闻 查看精彩图片

关键手法来了:循环行走常常靠“同一剪影 + 换色”。第 1 帧与第 3 帧剪影可几乎一样,只把近腿/远腿的亮暗对调,左右脚就“换班”了。中间那帧用中性姿态,把抬起的腿藏进近侧腿与身体后面,别砸节奏。

打开网易新闻 查看精彩图片

手臂照抄同一招,反而容易更糟。帧太少,手臂甩太开,中间补不上,会出现讨厌的闪烁。腿能藏,手臂像树枝一样叉开就藏不住。

怎么办?收着点。很多老游戏侧视精灵里,远端手臂干脆很弱,甚至像“忘了画”,但动起来你不会注意,只在逐帧静看时才会发现。必要时为流畅牺牲远端手臂。再用第二色给近侧手臂加一点阴影,白胳膊贴白身子才看得见。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

主动作稳了,再加次要运动。中性帧整体上移一像素,迈满时略低,抬腿时略高。一点垂直起伏,走路就不像月球漫步。

打开网易新闻 查看精彩图片

再加一点“表情特征”:头发、衣角这类小部位,故意做成不同步的局部运动,剪影边缘每帧都有自己的小变化。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

阴影位移最好别超过一像素,否则光影跳会毁掉流畅感。

打开网易新闻 查看精彩图片

打开网易新闻 查看精彩图片

给角色装备上路:步枪、背包。注意背包顶、衣角、头发可以反相运动:不同部件不同动力学,剪影才会独特。

打开网易新闻 查看精彩图片

同样的三帧逻辑,也能撑起更大像素体量的角色。未发行废土项目《Finder》里的塔斯(Tas)就是例子:两帧大步 + 一帧抬腿;大步用光影对调复用;抬腿藏节奏;灰白发丝、手表这类小细节,让镜像左右走时仍有记忆点。

打开网易新闻 查看精彩图片

一段被埋掉的项目史

《Finder》前面还有《Project Serenity》。作者曾想做像《盟军敢死队》那种细节密度的等距游戏,钱烧完后缩成 RPG Maker 原型:预渲染背景 + 像素角色。主角就是塔斯。

打开网易新闻 查看精彩图片

后来不少图素进了 Dark Crystal Games 的《Encased》。作者说,内容被别的项目用上,总好过彻底失踪。独立开发里这种“半沉船”故事不少。你卡住的草稿,也可能是下一篇教程的骨头。

第三章:四帧四向:邮差约书亚

帧数升到四。颜色别再饿肚子,十六色左右就够折腾。目标:不只左右走,还要上下走,四向资源接近《星露谷物语》那套。

仍从情绪小稿开找形象。可以很草、很不正经。任务是抓住感觉,不是一笔出成品。

打开网易新闻 查看精彩图片

作弊声明(合法那种):你其实只需要画“半步”。另半步用镜像 + 光影换色补齐。前后方向也一样。省工,而且游戏里常用。下手顺序可以记成四步:① 只画前半步两帧(如迈满 + 抬腿);② 后半步先水平镜像剪影;③ 再按“近亮远暗”重排肢体颜色,必要时重画投到身上的影,不要直接用未改光影的镜像当终帧;④ 用臂章、手表等不对称件挡住“一眼看出是翻的”。跟第二章的换色是同一招,帧数翻倍时仍然管用。

近处肢体亮、远处肢体暗。脸、夹克、裤子各分两色起步。

打开网易新闻 查看精彩图片

加深帽子、整理夹克,帽后挖个小洞,剪影立刻更“帽”。

打开网易新闻 查看精彩图片

脸与胡子加中间色。中间角色的鞋尖敲一像素,待机也要有活气。

打开网易新闻 查看精彩图片

假设光从上方略偏一侧来:夹克加体积影,手臂投下影子,握紧的拳头画出来。

打开网易新闻 查看精彩图片

夹克里露出一件衬衫/T 恤。多一个颜色,远看可读性会好一截。

打开网易新闻 查看精彩图片

脸暂时不怎么改拓扑,可以在早期就把脸画到接近终稿。

打开网易新闻 查看精彩图片

魔术段落:手臂外形几乎不动,只换颜色,近亮远暗,空间感就出来了。

打开网易新闻 查看精彩图片

正面走向你时的帽子若像廉价喜剧里的刻板造型,就加高光改掉。腿也按距离加深阴影,前后走时体积更清楚。

打开网易新闻 查看精彩图片

头投到身上的影、夹克下沿、晃着的手臂、背后领口。领口线在邻帧挪一像素,领子就像在动。

打开网易新闻 查看精彩图片

侧视鞋尖加一像素高光;前后视的鞋要认真做弯折感。

打开网易新闻 查看精彩图片

放大看:手几乎只改色;鞋面上对的一像素,能让鞋“折一下”。

打开网易新闻 查看精彩图片

夹克别再像木头棍。用一条线把夹克和裤子分开,并让夹克下摆跟着步伐有形状变化。

打开网易新闻 查看精彩图片

有了暗部,就该有亮部。肩上加光,帽檐与帽身份色。

打开网易新闻 查看精彩图片

衬衫加影,裤子加深暗,髋部扭转更明显。

打开网易新闻 查看精彩图片

帽徽两点像素就够。作者顺手致敬了一把科斯特纳的《邮差》。你自己的角色也可以塞一点私心彩蛋。

打开网易新闻 查看精彩图片

前后视的夹克再补一小撮像素。一侧肩膀有臂章、另一侧没有。跟塔斯那招一样,镜像走时仍认得出来。

打开网易新闻 查看精彩图片

再加一点夸张:帽檐轻晃。现实里不一定这么晃,但动画要的是“活”。觉得假就改成邮差包、制式裤、真皮帽。即兴没有上限。

打开网易新闻 查看精彩图片

拆开看:每向四帧;一步其实两帧,后两帧是前半步的镜像加光影重画,再加遮丑小件。这是“最省工但仍好看”的路线之一。

打开网易新闻 查看精彩图片

终稿循环:

打开网易新闻 查看精彩图片

有预算当然可以画六帧、八帧、二十四帧全独特。没预算时,四帧 + 镜像换色,足够撑起很多项目的骨架资源。省下来的时间,拿去画关卡、做打击感、写剧情,往往更值。

总结

  • 姿势对姿势(关键帧法)

    :关键帧先定,中间帧后补。

  • 直线相位

    :一帧接一帧往前画,适合过场,不太适合游戏循环。

  • 关键帧

    :最能说明动作峰值的那几张(走路认“抬腿”和“迈满”,不认死帧号)。

  • 镜像半循环

    :画半步 → 镜像 → 近亮远暗重排 → 不对称件遮丑。

  • 颜色置换

    :外形不动,只改亮暗,制造前后肢交换。

你不一定要立刻做影院级平台跳跃。但把两帧剪影走、三帧换色走、四向四帧走练一遍,你的角色就能从“贴纸”变成“会走路的人”。再往下,才是跑步、攻击、受击那些第二层动画。

打开网易新闻 查看精彩图片

小练习(今天就能做)

  1. 只开两个颜色,画一个侧视小人的两帧行走:抬腿 + 迈满。

  2. 加第三色,把近腿画亮、远腿画暗,做成三帧循环。

  3. 选一个你正在做的角色,给他加一个“不对称小件”(手表、臂章、发丝),检查左右镜像后是否还能认出来。

会走路的角色,才谈得上进关卡、上 Steam、换第一笔收入。

像素画是第一站;让角色迈出第一步,是你把创作推进现实世界的一小步。

参考资料

https://habr.com/ru/articles/441562/: https://habr.com/ru/articles/441562/