像素画，动起来更有趣！
说到像素艺术，第一时间总会回忆起小时候玩的那些FC游戏
图片来源：slynyrd.com
在那个时代由于硬件设备的限制，能显示的颜色最多只有8种，16种颜色，能表现出来的细节也是非常有限。但即使在如此多限制的条件下，当时的艺术家们创造出来的作品即使现在来看也是非常的美。
《Donkey Kong - NES》
在现在图形技术如此发达的时代，支持的色彩深度已经超过32位，可以储存4亿多种颜色，早已没有了当初的硬件限制，有许多游戏设计师在 追求更逼真的画面效果 的同时，还依然有许多艺术家想通过像素风来模拟一些复古效果，以获得更加独特的视觉体验。
随便举几个近些年画面不错的像素风的游戏
《Stardew Valley》
《Eastward》
《Dead Cells》
《VA-11 Hall-A: Cyberpunk Bartender Action》
《Coffee Talk》
《The Red Strings Club》
《BAD END THEATER》
《NEEDY STREAMER OVERLOAD》
《FEZ》
《Owlboy》
《Yes, Your Grace》
从色彩搭配，光影场景渲染，画面看起来都非常精美！
今天要想分享像素动画的绘制技巧，
游戏设计师 Pedro Medeiros，他曾经制作过一款游戏《Celeste (蔚蓝)》，在制作这款游戏的几年时间里面，他把自己在学习像素艺术过程中解决的问题，制作成了像素绘制的经验技巧的教程， 每周更新一篇，持续了好几年！而且是免费分享的分享！
先来看一张他参与制作的这款游戏的海报，《Celeste》
来2张看起来很刺激的GIF！
噢，对了。
原文教程是英文的，不过有位热心网友@风农，把它翻译成了中文，连GIF图片里的文字都翻译了！有需要的同学可以去原文网站找到后续的分享。
原文作者 - @saint11
https://www.patreon.com/saint11/posts?tag=tutorial
中文译者 - @风农
废话不多说，看干货！
什么是动画？
动画是由一系列表现动作流程图像，按特定顺序播放，所引起的运动错觉。动画师的工作就是让这个序列看起来尽可能让人信服。
在绘画软件里，就需要用到 时间轴制作它。PS里面也有时间轴工具，而这里推荐另一款专门绘制像素画的软件 Aseprite
时间轴是一种在单个文件里表现多个图像的方法。每一列都是完整的图像，上面有一个编号，我们称之为 帧。
画动画有非常多的技巧，比如应该按什么顺序绘制每一帧，如何去优化，不过我们暂时先讲最简单的一种技巧： 逐帧动画。
这样就是一个具有 “连续动作” 的动画，它的每一个动作变化，都是按顺序一帧一帧直接画的，简单来说，全是体力活。
当然，这里也有小技巧，就是先画出关键帧，再补充中间过渡的动作变化。
迪士尼有个经典的动画教程《动画的12项基本法则》，里面有教你如何画出一个弹跳的小球。我们就以这个来举例。创建一个 32 x 32 像素大小的的画布。
第一帧，我们称为 "静止帧" 或"起始帧"，它是整个动画的概念核心，用于代表动画的风格。把小球放在最底部的位置。
第一帧
然后复制一个图层，把它向上移动 4 个像素。作为第二帧。
第二帧
以此类推，向上 3px，2px，1px。每次稍微移做出小小的变化。到达顶部之后，停顿1帧，然后反过来往下移动。
最后，像这样的弹跳小球动画，就完成了~
最后导出成 gif 格式，他就可以变成像表情包的动态图了。（没错，表情包也是这么制作的！它本质就是一个 gif 格式的序列帧，明白了吗？）
动画节奏
你可能会发现，尽管它会动了，但感觉差了点意思？和其他的动画比起来，简直就是劣质的PPT。所以，这就是另一个课题，叫 动画节奏。每一帧都有一个播放时长，停留多少秒后，切换到下一帧。
你可以试着改变时间轴的播放速度，让小球在落地后停留一段时间，再跳起来。或者在即将到达顶点时，增加一些等待时间，或者复制多一帧，让动画看起来更加有节奏感。
挤压和拉伸
这次给小球做一个简单的改进。在保持小球移动的同时，加入一点挤压和拉伸，挤压和拉伸，是一种让动作看起来更流畅自然的动画技巧，沿着运动方向拉伸或压扁物体，同时还保持整体面积。
玩过美图秀秀的朋友，对 "瘦脸", "瘦腿" 的液化工具，应该非常了解吧~ 试着给小球加一点特效吧。
用挤压来预示即将跳跃
起跳帧
复制第一帧，把它水平拉伸，垂直方向压扁，尽量保持整体的体积。 保持体积是非常重要的点，让物体不会看起来变小或变大，只是轻微变型，像在捏一个皮球。这一帧，也叫 " 准备帧"，用来预示接下来的动作即将发生变化，有一个准备动作。
落地帧
用同样方式复制并修改球落地时的帧，因为是落地，它受到的动力影响会更大，所以变形的效果可以画的更加夸张点。
落地
想象一下，你正在按压一个皮球，或者一个弹簧。给垂直方向拉伸的同时，向水平方向挤压。而当你松开手的时候，它会恢复原来的形状。这个形变的过程就叫拉伸。
最后，小球看起来是这样的。
看看 gif 效果
是不是很Q弹
如果你把静止帧和起跳帧去掉，它看起来就会像是在无限循环
好了，相信你现在以及是跃跃欲试的样子了。建议你可以多尝试一下时间轴，多试试画一些别的动画。
接下来看些其他的小技巧：
阴影
轮廓线
像素画基础
光照
闪光动画
这是个简单的闪光动画，最重要的就是时机的掌握。
第三帧可以掠过大部分你想闪的区域。
可以只用左边的简单效果，或者插入一个空白帧后，再加上右边的额外闪光效果。甚至是只用这个额外的部分，取决于实际的效果。
攻击动画
这个稍微复杂点，如何画个最简洁的攻击动画
做攻击动画最重要的一点就是让玩家输入后瞬间得到反馈。所以第一帧就要立即覆盖攻击判定区域，不要加预判动作，啥都别加。
整个动作非常的快，还要确保他返回到空闲状态。我通常会额外加一点回弹（第八帧），让动作更有趣一点。
大家要注意这里说的是个简单的动画，如果你的目的是做出某种带有硬直的，或者有起手动作的动画，那肯定要加入一些预备动作的帧。
其实这里的重点是给反馈，无论是视觉上的还是听觉上的，要迅速的给玩家一个输入的反馈。
简单跑步循环
对学习走/跑动画的同学，我最大的建议是 注意头部的运动。即使手和腿的动作不太好，但只要头部动作够好，就可以让人信服。
现在我解释下为什么选这个跑步循环。可能很多人不会喜欢这个“跳起”帧，更想用“过渡位置”帧，像这种：
这种也完全OK。这里只是我能想到的最简单的方式，来做出适合平台跳跃类型的跑步动作。走/跑的动画很能体现角色的个性，所以会有无数种方式来做。
我倾向于“跳起”帧的原因是它非常容易复制，往下拉一两个像素，再稍微动动手和腿，就能得到个“下落”帧。我觉得这种方法做快跑动画非常高效。
另一个原因是，如果第一帧是个跳跃，就感觉角色瞬间扎进了动作里，让动画更有活力。
简单的走路循环
这是我能想到最简单的走路循环了。我画成了12帧长，所以可以很容易的剪成6帧的。除了这个之外，其他的走路循环我都画成8帧+2 （10帧）的，为了流畅性。
图里我忘了加的一条建议：如果你在画画过程中感到困惑的话，先集中在腿上，再考虑手臂，
俯视角跑步循环
这不是俯视角跑步循环的唯一做法。我选这种是因为我通常这样画，而且这是我能想到最简单的方式。
我一般重点关注3帧的跳跃帧和2帧的恢复帧，之后再用其他动画，像头发的运动，衣服等等来把这些都连起来。
也可以只用一帧跳跃和一帧恢复做个超简洁动画，不过看起来不太顺滑。
四足动物走/跑
如果你要学着画一个四足动物的行走循环，你需要先画一个两足的行走循环，再复制一份，然后把时间偏移25%左右，取决于你想要达到的风格。
四足动物非常复杂，他们可以走，小跑，快跑，快走，还有其他很多的运动风格，每种都有完全不同的模式。
烟雾效果
每次处理烟雾，水花，火焰这种复杂系统的动画时，我会把这个系统分解成零件，再把这些部分分别画出来。
考虑一整团烟雾是如何运动的太复杂了，但是一个小的部分的运动相对来说简单一些。
最后那个例子是个循环烟雾的效果，跟另外几个的区别在于，我差不多每4帧就多生成一些烟雾。并且在第一帧延续最后一帧的粒子效果。
最后那个循环动画，大家注意看，就是当烟雾快没了的时候，就再生成几个新的大块，同时最后一帧没有消散的粒子，在第一帧里延续下来。这样就循环起来了。拆开看更清楚。
我个人做闪电类的东西遵守的法则就是让所有东西都闪烁，非常闪。而且会做成24帧，看起来就比较顺滑。
闪电是很快的，所以第一帧就应该是最大，然后逐渐消散。
一开始我会把闪电画得很尖锐，然后消散过程中逐渐变柔和。尽管实际生活中闪电几乎没有这么尖锐的，但我发现在动画里这么画效果很好。
画闪电类的东西我一般会加点烟雾，你可以参考之前的烟雾教程。
爆炸
爆炸是我最喜欢画的主题之一了！里面有非常多的火和烟雾，还有很多很多的粒子，我通常都会一个一个的处理。比如我会从头到尾画一个弹片，接着从头到尾画一团烟雾，等等。
流体运动
如何进入循环，让所有东西看起来都一直在移动。
火焰
风
冰雪
粘液
子弹
太空和星星
幽灵
无缝循环
左下角的火焰，每条绿色的线代表的区间都是一个火苗生成到消散的过程区间。火苗生成是从最底层开始，最小只有一个绿色的点。
故障效果
我总会参考身边真实的故障效果。像商场里坏掉的显示器，商店的广告牌里的诡异故障效果，或者是我自己的显卡崩了的时候。
我会去注意这个故障效果实际上是做了什么，是把所有东西都往左移？绿色显示不出来？还是所有东西都变成了乱七八糟的噪点？
我会分析这些真实的故障效果，并把它们变得更好看，更酷。对我来说，目的就是达到它看起来不是真的，但又不会太假。
布/旗子
小于1像素的运动
动画缓冲
挤压和拉伸
动态模糊的抽帧
飞行的翅膀怎么动？
处理飞行动画主要的建议：
重点看垂直运动和剪影
观看像素动画的时候，我们的眼睛一般聚焦到的是大块的形状。
简单的攻击动画
做攻击动画最重要的一点就是让玩家输入后瞬间得到反馈。所以第一帧就要立即覆盖攻击判定区域，不要加预判动作，啥都别加。
整个动作非常的快，还要确保他返回到空闲状态。我通常会额外加一点回弹（第八帧），让动作更有趣一点。
译者注：大家要注意这里说的是简单的动画，如果你的目的是做出某种带有硬直的，或者有起手动作的动画，那肯定要加入一些预备动作的帧。
其实这里的重点是给反馈，无论是视觉上的还是听觉上的，要迅速的给玩家一个输入的反馈。
攻击动画的小技巧
这个小tip是为了回答来自Cam的提问：
“如果剑在角色身前，该怎么画剑的动画？有什么区别吗？剑停在身后的时候那个弧线比较好懂，我想知道在身前的话该怎么画。”
好问题，如果剑在身前，直接把它往下移动看起来没什么力。有时候，剑，拳头，或者别的什么东西不在你想要的位置，你可能觉得要加个准备帧。这没错， 但是这可以做个假。我通常会用个”风斩“，或者其他的模糊效果来模拟它。假装攻击是从你想要的位置发起的，而且极大的夸张了整个动作。玩家不会察觉到缺少了准备帧。另外一个技巧就是用长点的返回动画。
还有，声明一下，上个教程虽然没提，但是我们做的是”玩家的动画“。敌人的动画是应该有准备帧的。有些游戏里玩家也有准备帧，（像恶魔城Castlevania）。后面我会在进阶一点的攻击动画教程里详细讲，但一般是需要遵守这条法则的，除非你想让玩家感到无力，或者让敌人不好预测，这类东西。
如何规划角色复杂的动画
通常我绘制角色复杂的动画顺序是：
静态帧＞草图>关键帧>中间帧（及一些修改）
我感觉最难的是关键帧，通常意味着你得想出低分辨率下看着还很酷的姿势。但是中间帧是最累的部分，需要做所有的调整，次级动画以及繁重的复制粘贴。
角色动画
关卡设计
界面UI
9分图或者3分图，我认为是任何UI的基本元素，是个不错的学习起点，你可以把它用在差不多任何地方。
下面是我对9分和3分不同部分的叫法：
其实还有一种名字，点9图。做UI的同学会比较熟悉。
如何制作金属的效果
飞船的火焰推进粒子怎么画？
场景的画法
如果觉得动画播放的太快，想要更仔细研究的同学，可以通过电脑端访问上方原文链接，把 图片下载到本地硬盘再用 Photoshop或者 Aseprite打开GIF文件，就可以用时间轴一帧一帧的参考了。
就像下方这张图，可以在PS的时间轴里面观察每一帧图像的变化，每一帧的持续时间，缓动动画的方式等等
Johan Vinet@johanvinet
这么干货的文章，
发给身边想学习像素艺术的小伙伴看看吧！
-------------------------
往期精华文章导读：
同事不愿教你的87招！
原来创意是可以偷的！
甲方最爱的构图方式，没有之一！
-END-