Capcom像素画格斗角色研究

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

文本概览:全文约 2,763 字,阅读约 7 分钟。

格斗尺寸精灵不是把小图放大,也不是把插画一缩了事;线必须按 1px 手工重描,衣服装饰只在像素阶段按剩余格子加。

一、先看站姿,不看包围盒

先看 Alpha 3 里几个人物的站姿循环——体量差极大,读得清的是轮廓,不是统一画布。

Adon:单腿抬起的轮廓本身就能读出动作。

Balrog:蹲得更低,手套和肩宽把宽度拉开。

Guile:平头、迷彩裤,高度仍落在同一量级。

Guy:腰带轻轻晃,次要动作占的是边角像素。

E.Honda:宽角色的典型——高差不多,宽明显更大。
打开网易新闻 查看精彩图片
E.Honda:宽角色的典型——高差不多,宽明显更大。

Ryu:道服缺袖口,黑带一条就够认人。

Sagat:胸口斜疤是识别符号。

Sakura:相对“细”。头带飘动,身体只做呼吸起伏。

Zangief:宽度可以差出一整块胸肌。
打开网易新闻 查看精彩图片
Zangief:宽度可以差出一整块胸肌。

二、草稿先减细节

卡普空Capcom先把线稿扫描进去,再逐像素重描。

最关键:衣服曲线没有厚度。缩成精灵后,那些只是 1px 黄线。
打开网易新闻 查看精彩图片
最关键:衣服曲线没有厚度。缩成精灵后,那些只是 1px 黄线。

手稿阶段就要换成“精灵能读出来的简化画法”:该是一根装饰线的,就画成将来能变成单像素的线,不要画成有宽度的布条。

没有手绘或扫描仪时,可以使用剪影或线框人起稿,省略手绘草稿:

左:剪影,只问动作能不能被认出来。右:涂鸦人,四肢前后关系和肌肉块更清楚。
打开网易新闻 查看精彩图片
左:剪影,只问动作能不能被认出来。右:涂鸦人,四肢前后关系和肌肉块更清楚。

16×16 的 RPG 小人不必走“手绘→扫描→重描”。格斗尺寸才值得付这套手续。剪影也不是铁律:游戏精灵有固定机位,打领带那种任意角度在这里用不上;但“剪影还能否读出动作”仍是规划每一帧的底线。

三、草稿-像素画步骤

草稿扫描进电脑
打开网易新闻 查看精彩图片
草稿扫描进电脑

缩到约 100 像素高时,四周留几像素缓冲,后面要加高头发或拉长小腿才有地方。缩放算法不要混用:

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

Nearest Neighbor:零抗锯齿,适合成品放大 4 倍给人看。Bilinear / Bicubic:会出灰边,缩扫描稿时用 bilinear,正是为了让灰边当描线参考。

白框里的人会比 100px 再矮一点。缓冲不是浪费,是更比例的保险。
打开网易新闻 查看精彩图片
白框里的人会比 100px 再矮一点。缓冲不是浪费,是更比例的保险。

常见错误:有人用 Nearest Neighbor 缩手稿,线断成台阶,重描时只能猜;有人用 Bicubic 把线糊成一团灰雾。

推荐:缩扫描稿用 bilinear 跟线,再用 Nearest Neighbor 放大展示。

四、画像素画线稿

底层放缩小后的蓝线稿。新建一层填白,模式改成Multiply,线稿重新露出来。默认前景黑、背景白,画线时按X切换:白点在 Multiply 下等于擦除,不用来回换橡皮。想单独看精灵,把这一层改回 Normal,白底会盖住蓝稿。

蓝是参考,黑才是精灵。胳膊上如果一笔画出拐角黑团,立刻清。
打开网易新闻 查看精彩图片
蓝是参考,黑才是精灵。胳膊上如果一笔画出拐角黑团,立刻清。
脸在这一步往往像乱点。等眼白填上,旁边那颗黑像素才会被读成眼珠。
打开网易新闻 查看精彩图片
脸在这一步往往像乱点。等眼白填上,旁边那颗黑像素才会被读成眼珠。

四个挤在一起的黑像素会变成整张图最抢眼的脏点。胳膊贴大腿时,两条轮廓并排会变成 2px 宽的黑墙——挪开一只手脚,让接触处只剩 1px。实在避不开的团可以留,但大多数都能靠微调姿势消掉。脚难看就改脚,别忠于扫描稿。

五、平涂上色

平涂不要衬白底。白太亮,衬衫会显得更暗,眼睛会骗你。换成偏暗的底色再判断颜色。

左深右白。白底上衣服发闷,是对比错觉,不是调色板坏了。
打开网易新闻 查看精彩图片
左深右白。白底上衣服发闷,是对比错觉,不是调色板坏了。
嘴和鼻子用比普通暗部再深一档的肤色。纯黑嘴像张着,普通暗部又太浅。
打开网易新闻 查看精彩图片
嘴和鼻子用比普通暗部再深一档的肤色。纯黑嘴像张着,普通暗部又太浅。
衬衫滚边、袖线、鞋线,都等着色后才知道格子够不够。
打开网易新闻 查看精彩图片
衬衫滚边、袖线、鞋线,都等着色后才知道格子够不够。

袖子原本想画两道白线,这一号精灵上会挤成“白袖子上的黑缝”,或者纯白对比太强,看起来比 1px 更粗。只留一道;第二道可以等角色侧过身、袖弯挡住视线时再出现。裤缝的黑线也改成深色阴影线——和嘴鼻同一理由:纯黑太跳。

对比把单像素白线“加粗”了。这是亮度差,不是真的画了两排白点。
打开网易新闻 查看精彩图片
对比把单像素白线“加粗”了。这是亮度差,不是真的画了两排白点。

最后才轮到彩色轮廓:

左:黑线,衣片分界清楚。右:彩线,
打开网易新闻 查看精彩图片
左:黑线,衣片分界清楚。右:彩线,

彩线的坑是:红衣服配红轮廓,角色走进红色场景就融边。

黑线的坑更简单——精灵经过黑背景时会丢边,比管一堆彩色轮廓好躲。

参考资料

So you want to be a pixel artist? Part 9: Making a Fighting Game Sprite: http://gas13.ru/v3/tutorials/sywtbapa_making_fighting_game_sprite.php