画像素特效，先只给自己 12 个方块
文本概览：全文约 1,978 字，阅读约 5 分钟。
方法：先限死方块数和帧数，做出一个能循环的三帧版本。它能动了，再加帧、加碎块。
这套思路来自特效教学站 VFX Apprentice 的一篇长文。作者 Devlyn Daubenschmidt 做过动画、概念设计、界面和二维特效，参与过《Cards and Castles》。
他最近两份像素画合同里，所有概念图、成品美术和动画都是他一个人做的。一个人包下所有美术，就得知道哪里能省。下面几招，都是在省。
先给自己设限：12 个方块
作者说，到了一定尺寸，美术就让位给了功能。像素火焰能小到什么程度？去看看《恶魔城》里的蜡烛。
他最想问一个想入行的像素画师的问题是：只给你几个方块，你能做什么？他说的不是画布大小，而是“这里有 12 个方块，让它们在画布上做点刺激的事”。这里的方块就是像素，一格一个。
能缩小的不只是尺寸。颜色数、帧数，都可以往下砍。
他的原话是：能画 8 帧火，你就能画 150 帧。
可以这样理解：往上窜、碎块脱离、消散，这几件事 8 帧里就都得画到。150 帧要画的还是这几件事，只是每件分到的帧更多。所以先在 8 帧里把它们弄明白。
三帧、四帧、六帧：先比，再加
作者拿一个叫 Coopers 的云朵角色做了实验。它由三团棉花球一样的云组成，他只是把头和几团云推来推去，分别做了三个待机版本。
作者的结论：简单的做法，看起来可以和精修过的复杂动画一样好玩。只要整套动画风格统一，它就成立。
作者还给了一个游戏里的理由：很多时候，动画太精细会拖慢游戏节奏，也会干扰给玩家的反馈。
所以别一上来就想“做到多流畅”。先做三帧，循环播放，看它已经能做到多少。够用了，再决定要不要加到四帧、六帧。
复杂感，是两种节奏叠出来的
那么复杂好看的像素火焰是怎么来的？作者拆了一个例子：美术师 Joe Williamson（《Jack Move》的主美）给火元素角色 Sparker 画的待机动画。
结论先说：身体慢慢晃，火苗快快跳，两边不同步，你就看不出它在循环。
整段一共 16 帧，里面是两层东西：
身体：画了 8 张姿势，每张在时间轴上连着占 2 格，这叫一拍二。8 张乘 2 格，正好 16 帧。
火焰鬃毛：8 张画一个循环，每张只占 1 格，这叫一拍一。所以身体晃一遍，火焰已经跳了两遍。
作者说，这种快慢错开的循环，是他最喜欢看到的技巧之一。
再看细一点。他让你盯住火焰里的空白处，也就是火焰形状之间没涂颜色的缝和洞，行话叫负空间。火不好看清，缝的形状反而好认。
跟着缝看，右边有一股稍强的力往左推，火苗上升时就多绕了一个圈。
同一系列里，另一位美术师 Jason Tom Lee 画的岩石角色 Terry 也用了类似的错位：肩膀比头慢两帧。
复杂感不靠堆帧数，靠的是在一个很小的循环上，让不同部位错开节奏。
只画剪影，盯住边缘
作者自己常用的第一招：只用一种颜色画剪影动画。
为什么？剪影逼你只关心两件事：边缘像素的形状变化，和空白处用得好不好。
代价是会丢一些细节。但一段单色动画，本身就能直接放进 1 位色风格的游戏里用。1 位色就是每个像素只有涂和不涂两种状态，你的剪影天生符合这个规矩。
他的做法是在 iPad 上用 Procreate 画剪影动画，满意了导出动图，丢进 Aseprite 清理。
偷懒的路：画大，再缩小
第二招是缩放。作者一直听人说它是像素画的作弊捷径，看过做得好的例子，他也有点同意。他不会拿它换掉自己的画法，但会拿它做实验。
他用 Flash CS 5.5 画了一个很粗糙的爆炸，只用 4 到 8 种纯色和一堆椭圆。
然后把文件直接丢进 Aseprite，用菜单 Sprite > Sprite Size 把整张图从 512 像素缩到 128 像素，调色板稍微往暖色调了一点，形状一格都没修。
他另一次试验是从 1024 像素缩到 128 像素，自己也承认缩得有点过了。但脱离出去的碎块里留下了很多单个像素，大部分信息都保住了。
这条路适合什么时候用？你手上已经有一段大尺寸的动画，想快速看看它做成像素特效是什么样。
它不会替代一格一格画。但缩一次很快，先看结果，再决定要不要一格格去修。
总结
- 先限死方块和帧数
：给像素数定个上限，帧数从三帧起步，规律摸清了，帧数随时能加。
- 复杂感靠错开节奏
：身体一拍二、火焰一拍一，不同部位不同步，循环就藏住了。
- 先剪影后上色
：只盯边缘和空白，形状对了再加颜色；手上有大图时，也可以画大再缩小。
练习：画一根火把，在它顶上用不超过 12 个像素画一团三帧的火，每帧停 300 毫秒循环播放，直到它看起来在往上窜。
参考资料
https://www.vfxapprentice.com/blog/pixel-art-game-effects-animated: https://www.vfxapprentice.com/blog/pixel-art-game-effects-animated
热门跟贴