独立游戏制作者谈像素风格游戏的制作技巧与经验

像素风格游戏是怀旧与个性的代表。其画面一般看上去比较粗糙，类似八九十年代的游戏，正因如此，经历过那个时代游戏的80后人群中，有许多对这种画面风格颇感兴趣。并且，这类游戏的最大亮点在于自由度高，不受画面的严格限制，能给玩家带来天马行空的想象空间与体验。下面将分享独立游戏制作者关于像素风格游戏的制作技巧与经验。

像素风是当下独立游戏最流行的画面风格之一，主要有以下几个原因：

1. 独特的画面风格：像素风能够轻易与游戏大厂的精致画面区分开来。如今3A游戏的大趋势是追求画面的极致逼真，甚至出现了像《超凡双生》《教团1886》这类游戏性存在短板，但画面却极为出众的游戏。独立游戏若与3A游戏比拼画面，显然不现实。倒不如在画面上不求精致，只求独特，然后在游戏性上取胜。这既是独立游戏的生存之道，也是对千篇一律商业模式的一种反叛精神追求。
2. 引发玩家的怀旧情怀：不少玩家和独立游戏制作人都怀有“像素情怀”，像素游戏能让许多从FC时代走过来的玩家产生亲切感。
3. 较低的学习成本：像素绘画的学习成本相对较低，即便零基础的人，经过较短时间的学习，也能画出可用的像素画。有不少独立游戏制作者既是程序员，又兼职美工，例如制作《雨血：死镇》的梁其伟、制作《Spelunky》的Derek Yu等。在没有专业美工的情况下，选择门槛较低的像素风格不失为一种好方法。当然，想要画出优秀的像素画，仍需要一定的美术基础和长时间的学习。

例如，98年《Street Fighter Alpha 3》中的桑吉尔夫动作图，其光影、体积感和肌肉纹理看上去宛如3D建模。有兴趣的可以下载查看，放大后便能看出画面的粗糙。当年受机器性能限制，如何用较少的像素展现更逼真的画面，是各大游戏厂商面临的难题。最终，游戏厂商只能一帧一帧、一个像素一个像素地精细雕琢。上述画面扣除空白区域后，不到200*200像素，却能表现出逼真的立体感，这种级别的像素画，并非入门画师所能企及。

而如今，由于不再受硬件限制，大部分像素画已从追求逼真画面转变为追求舒适画面。不过，也有大厂在追求极致逼真的像素风格，比如《拳皇13》的不知火舞站立图，仅200*200像素，却呈现出5层亮度的光影、完美的人体结构以及符合物理因素的乳摇效果，几乎难以手工绘制。SNK通过3D模型转2D画面实现了这一令人惊叹的效果，每个角色的制作成本高达1000万日元，这几乎是追求高保真低像素的极致体现。

如果你不追求逼真画面，而是追求看着舒服、独特的画面，那么经过一段时间的练习，你也可以画出在独立游戏中完全够用的像素图。若特效制作得好，甚至会呈现出非常炫酷的效果。

下面是一篇适合新手入门的像素教程，由独立游戏制作人Derek Yu创作，经我翻译补充。若有疏漏，还望指正。

版权声明：原文 by Derek Yu：Make Games - Pixel Art Tutorial 注：【】里为本人补充内容

像素绘画教程

2007年，这个教程在我的个人网站上发布，此后做了一些小的调整，但无重要改动。

在这十个部分的教程中，我将教你如何绘制一个“精灵”，“精灵”是指独立的2D角色或者物体，该术语源于视频游戏。

我学习像素绘画，是因为需要为自己的游戏作图。经过大量练习，我逐渐擅长绘制像素图，并开始将其视为一门真正的艺术，而非仅仅是一种工具。近年来，像素图在游戏开发和插图艺术领域极为流行。

几年前，我撰写了这篇像素画教程的初版，阐述了像素图背后的概念。现在这个版本经过了简化。网上虽有其他像素教程，但我认为它们过于复杂繁琐。像素绘画并非科学，画像素图时，无需逐个计算矢量。

一、工具

绘制像素图的一大优势在于无需任何花哨的工具，电脑内置的画图工具或许就已足够。网上有专门绘制像素图的工具Pro Motion，以及Mac平台上的pixen。说实话，我并未使用过它们，但听闻效果不错。在本教程中，我将使用Photoshop，它虽价格昂贵，但适用于所有绘画类型，且具备许多对像素绘画非常有用的功能。

【虽然有不少像素转化软件，可方便地将图片转化为像素图，甚至PS里就有像素化的滤镜，但几乎没有画师会先画出图片再用工具转化。一是多此一举，二是工具转化的像素画可能会出现转化混乱的情况，届时还需逐点修改，远不如直接绘制简单。常用的绘画软件是SAI和PS，SAI有抖动修正功能，适合画长线会手抖的新手，但我建议使用PS，因为像素图本身无需绘制太多长线，选择更专业的PS更为合适。】

使用Photoshop绘制像素图

使用Photoshop时，主要工具是铅笔（快捷键“B”），而非画笔。铅笔可用于填充单独的像素，且不含任何抗锯齿处理。

另外两个常用工具是选框（快捷键“M”）和魔术棒（快捷键“W”），用于选择、拖放、复制或粘贴。记住，选择时按住“Shift”键或“Alt”键，可从当前选区中添加或减去元素，方便选取不规则的四边形区域。

还需使用吸管工具（快捷键“I”）选取颜色。在像素图中，“颜色维持”至关重要，因此需经常选取相同颜色进行重用。 【颜色维持指有选择地使用颜色，使图像的颜色保持在统一风格中，下文会详细介绍。】

最后，要学会使用快捷键，这能节省大量时间和精力。例如“X”键，可用于切换前景色和背景色。

二、线条

像素本质上是小的颜色块。学习像素绘画，首先要掌握如何有效利用这些颜色块绘制所需的线条。我们将讨论两种最基本的线段类型——直线和曲线。

直线

你或许会认为画直线很简单，但在像素画图中，即使是直线也可能出现问题。要极力避免出现“锯齿”，即线条上的断裂部分，它会使线条看起来不平整。当线条上某一处的像素不协调时，就会产生锯齿。

曲线

绘制曲线时，要确保曲率在下降或上升时保持一致。例如，干净的曲线变化为6 > 3 > 2 > 1，而有锯齿的曲线变化为3 > 1。

【锯齿几乎难以避免，在固定的图像大小下，常会出现无法修正的锯齿。例如原作者的某张图，圆圈圈出的地方，这个锯齿无法解决，要么让这块肌肉整体变形，要么就得容忍该锯齿。像素越少的图像，不可避免的锯齿就越多，我们能做的只是减少那些可避免的锯齿，对于无法避免的锯齿无需过度计较。当然，在放弃修正某个锯齿前，最好多尝试几种方法。】

结论：画出让人舒服的线条对像素图至关重要。接下来，我们将学习如何使用抗锯齿让线条看起来更光滑。

三、构思

绘制像素图的首要任务是拥有一个好想法。可先在脑海中或纸上将想要绘制的像素图具象化，简单的画前准备能让你更专注于实际的像素绘制。

应考虑的因素

1. “精灵”的使用场景：“精灵”将应用于网站还是游戏？后续是否需要为其制作动画？若需制作动画，可能要让它更小、细节更少；反之，若无需制作动画，则可添加更多细节。思考“精灵”的使用场景，有助于提高工作效率。
2. 风格的维持：前文提到“颜色维持”很重要，原因之一是色板颜色可能受限，这可能受硬件（这种情况较少）或画面风格的影响。若要模拟特定的主机风格（如64位的NES），则会受主机精度的限制。除颜色受限外，还需考虑“精灵”的尺寸大小，以及如何使其融入环境，不显突兀。

【我不建议完全模仿特定的主机风格，例如FC机的同屏发色数只有16色，显然不够用。我们应追求适合游戏风格的画面，而非一味追求复古。“颜色维持”更重要的意义在于使整个画面协调，这涉及到色彩搭配的知识。若你对此感兴趣，我可提供相关资料。若不想看书，可模仿他人的上色方式，在百度搜索“色板”，有现成的可供参考，也可找好看的图片提取颜色制作自己的色板。】

在本教程中，我未设定任何风格限制，只是确保“精灵”足够大，以便你看清每一步的细节。为此，我选择“摔跤律师”作为教程原型，它可用于格斗游戏或其他类似“Habeus Corpse Blaster”的游戏中。

四、轮廓线

黑色的轮廓线能为“精灵”提供良好的基本结构，是绘制的最佳起始步骤。选择黑色是因为它醒目且美观。稍后，我将介绍如何改变轮廓线的颜色，使“精灵”显得更真实。

两种方法

有两种描绘轮廓线的方法：一种是直接拖拽出轮廓线，然后进行清理修改；另一种是从一开始就用像素点逐个填充成所需的线条。选择哪种方法取决于“精灵”的尺寸和你对像素绘画的熟练度。若“精灵”较大，先拖拽出草图再修改，比用像素填充追求一次性通过要容易得多。

在本教程中，我们绘制的“精灵”较大，因此我将演示第一种方法，这也更便于文字和图片说明。

第一步：粗绘轮廓

使用鼠标或数位板勾勒出“精灵”的粗略轮廓，但不要过于粗略，应尽量接近最终效果。

【这一步最重要的是抓造型的能力。例如，对比两个路飞的图片，明显后者更像，因为后者更准确地概括了路飞的特点，如草帽上的红色圆环、大眼睛中眼白区域大而眼珠区域小、因橡胶果实能力而较长的手臂以及不可或缺的草鞋等细节特征，能让玩家清晰地识别出所画的人物及其形象。抓形能力需要多思考，下笔前应仔细考虑“精灵”的人物特征，添加更多小细节，使其更加生动。】

第二步：修改轮廓

首先，将轮廓图放大6倍或8倍，以便看清每个像素。然后修改轮廓，尤其要修剪掉离散的像素（轮廓线应仅为一个像素宽度），去除所有锯齿，并添加第一步中遗漏的细节。

一般来说，即使是较大的“精灵”，其尺寸也不会超过200*200像素。在像素图中，“以少成多”的原则十分适用，你会发现，用极少的像素也能表现出丰富的内容。

【一般独立游戏的“精灵”尺寸无需这么大，在优秀画师手中，200*200像素的像素图甚至可能看不出是像素画。选择几十像素的尺寸即可，过大的像素图画起来更繁琐，“像素味”也会更淡。】

此时，应让轮廓线保持简单，细节后续再添加。现在要专注于“打形”，完成如肌肉分割等基础步骤。尽管当前的画面可能与你期望的像素图有差距，但请耐心，这是必经的过程。

五、颜色

完成轮廓线绘制后，我们得到了一幅空白的填色图，可使用PS里的油漆桶和其他填充工具进行上色。填充颜色有一定难度，色彩理论超出了本教程的范围，但你最好了解一些基础概念。

HSB颜色模式

HSB代表色调、饱和度和亮度，是计算机的几种颜色模式（即数值表示颜色）之一，其他颜色模式包括RGB模式和CMYK模式。大多数绘图程序采用HSB模式采色，下面详细介绍HSB模式。

• 色调：指你感知到的颜色，如“红”“橙”“蓝”等。
• 饱和度：表示颜色的强烈程度，100%饱和度的颜色最鲜艳，饱和度越低，颜色越暗淡。
• 亮度（也称“明度”）：指颜色的明亮程度，0%亮度的颜色为黑色。

颜色选择

颜色的选择取决于个人喜好，但需注意以下几点：

1. 饱和度低、亮度低的颜色会显得更朴实，不那么卡通。
2. 考虑色盘上的颜色关系，色盘上距离越远的颜色越难协调，相邻的颜色（如红色和橙色）搭配在一起会更美观。
3. 使用的颜色越多，“精灵”看起来可能会越混乱，使用两种或三种主要颜色会让“精灵”更具吸引力。（例如，当年的超级马里奥仅使用了红色和褐色。）

【若不懂如何上色，可模仿他人的上色方式。平时养成收集喜欢图片的习惯，需要上色时，可提取他人图片的色彩，制作自己的色板。具体操作可参考：设计师必备取色技巧！教你在PS里通过照片创建色板 】

填色

使用绘画程序填色较为容易。若使用PS，可使用魔棒工具（快捷键“W”）选中区域，然后用[Alt+Del]填充前景色，或用[Ctrl+Del]填充背景色。

六、阴影

画好阴影是追求极致像素图的关键一步，它决定了“精灵”的表现效果是出众还是糟糕。按以下步骤操作，你将取得成功。

步骤1：选择光源

首先，要挑选一个光源。若“精灵”处于大场景中，可能会有多个局部光照在它上面（如灯光、火光、叠加光等），这些光源会形成复杂的光照情况。但在大多数情况下，选择一个远光源（如太阳）是不错的选择。对于游戏而言，可以绘制一个通用的被照亮的“精灵”，使其适用于更多场景。

我通常选择“精灵”上方偏前位置的远光源，这样物体的顶部和前部会被照亮，其他部分则处于阴影中，这种光照下的“精灵”看起来最自然。

步骤2：画暗面

确定光源后，先用深色填充离光源最远的区域。以“前上位置”灯光模型为例，头的边缘、手臂、脚等部位会处于阴影中。

要记住，光和影之间的差异能让物体显得立体。将一张白纸揉成纸球后摊开在桌上，我们能判断它不是平的，是因为能看到褶皱周围的细小暗面。你需要用阴影勾勒出衣服的褶皱，突显肌肉、头发、毛皮、裂纹等。

步骤3：画灰面

灰面属于第二级阴影，比第一级暗面亮，常作为软阴影使用。灰面是物体被间接照亮的区域，也可作为亮面到暗面的过渡区域，尤其适用于曲面过渡。

步骤4：涂高光

被光源直接照射的地方会出现高光效果，高光应适度使用（比暗面少得多），因为频繁使用高光会分散观看者的注意力。

先涂完阴影再上高光，可避免很多麻烦。若未用阴影填充好区域，上高光时可能会画得过大。

注意事项

涂阴影对大部分初学者来说是个难点，涂阴影时应遵循以下规则：

1. 不要使用渐变工具，这是新手最易犯的错误。渐变效果难看，且与真实光照不符。
2. 不要使用“枕形阴影”。枕形阴影是内轮廓的阴影，因形状类似枕头且无专业定义而得名。 【“枕形阴影” -- “pillow-shading”，我咨询了大神@all Artplus，他也不确定准确的翻译，大致意思是从中间高光到四周阴影的高低变化。我搜索发现，国外一个博客有相关介绍，详细内容在：The Pixel Art Tutorial ，里面是些进阶内容，很有用。】
3. 不要使用过多的阴影。人们常误以为“颜色越多越真实”，但实际上，我们倾向于在大块的光影中观察物体，大脑会过滤掉光影之间的细节。在基础色上，最多使用两种阴影（浅阴影和深阴影）和两种亮面（浅亮面和高亮）。
4. 不要使用太过相似的颜色。除非你想让“精灵”模糊不清，否则不要在一个物体上使用两种过于相似的颜色。

【大部分像素风格的游戏通常不会划分太多层次的明暗，一般亮部、暗部、阴影三层明暗就足够了，甚至只分亮部和暗部，不设阴影。划分的明暗层越多，画面越逼真、越有立体感，但再次强调，我们绘制的像素图并非追求逼真效果。若不懂阴影怎么画，可百度“三大面五大调”。】

七、抖动网点

“颜色维持”是像素艺术家必须重点考虑的问题。有一种方法可让你用较少的颜色获得更多的阴影层次，即“抖动网点”。它类似于传统绘画中的“交叉影线”和“点画”，通过交错两种颜色来得到它们的中间色。

简单例子

有一个简单的例子，运用“抖动网点（dithering）”技巧，用两种颜色制作出了4种不同的明暗效果。

高级例子

对比两张图片，上面一张使用PS的渐变工具制作，下面一张用3种颜色通过“抖动网点”实现。注意创建中间色的不同模式，尝试使用不同模式创建新的纹理。

应用

“抖动网点”能为“精灵”带来复古的感觉。许多古老的视频游戏严重依赖“抖动网点”，以充分利用有限的色板。（可查看MD上使用“抖动网点”的诸多例子。）我不常用这个技巧，但为了学习，我将其应用在我们的“精灵”上（可能过度使用了）。

你可根据自己的想法使用“抖动网点”，但说实话，能将该技术运用好的人并不多。

【“抖动网点”不仅可以使较少的颜色体现出多种明暗效果，还能让物体更具质感。例如，运用抖动的砖块看起来更有质感。是否使用“抖动网点”取决于你想要表现的材质，但需谨慎使用，因为使用过多会使画面变脏，清新风格的游戏一般不采用该技巧。具体操作可查看：手把手教你画像素（二）】

八、调整轮廓线

调整轮廓线，也称为“选择输出”，是一种描绘轮廓的方式。我们使用更接近“精灵”原色的颜色绘制轮廓，而非全部使用黑色。此外，改变“精灵”边缘轮廓线的亮度，让光源决定使用的颜色。

直到这一步，我们一直保持轮廓线为黑色，这并无不妥，因为黑色美观且能使“精灵”与周围环境区分开来。但一直使用黑色，可能会牺牲画面的真实性，使“精灵”显得更加卡通。“选择输出”是避免这种情况的有效方法。

【意思是重绘一遍轮廓线，这在游戏素材绘制中是必要步骤，没有哪个游戏会使用黑色描边。】

你会发现，我还使用“选择输出”软化了“精灵”的肌肉纹理。最终，“精灵”开始呈现出连贯的整体效果，而非零散的片段。

将调整后的轮廓线与原来的进行对比，效果差异明显。

九、抗锯齿

抗锯齿的工作原理是在扭结的线条上添加中间色，使线条变得平滑。例如，在白色背景上有一条黑色的线，可在线的边缘添加灰色像素使线平滑。

技巧1：平滑曲线

一般来说，应在线条断裂、参差不齐的地方添加中间色进行过渡。若线条仍不平坦，可沿着曲线方向，再添加一层比中间色更亮的像素。

通过下面的图片示例，你能更直观地理解我的意思。

技巧2：圆滑驼峰

[此处可补充相关图片及详细说明]

技巧3：线条减淡

[此处可补充相关图片及详细说明]

应用

现在对“精灵”应用抗锯齿。需注意，若想让“精灵”在任何背景色上都美观，不要在其外缘使用抗锯齿，否则会出现难看的光辉，使“精灵”看起来很脏。

【谨慎使用抗锯齿，特别是图像小、像素少的图，最好避免使用，否则中间色会过于明显，使“精灵”看起来朦胧不清，且经过抗锯齿处理后的“精灵”无法在所有场景通用。每次背景色改变，抗锯齿中间色也需相应调整。】

抗锯齿效果虽微妙，但能产生显著的差异。

为什么要手动调节？

你可能会问，为何不直接使用绘图程序里的滤镜让精灵变得平滑？答案是，没有任何滤镜能达到手动调节的效果。手动调节能完全掌控，可调节更多的颜色层次。在需要平滑处理的区域使用抗锯齿滤镜，会降低该区域的像素质量。

十、结束语

终于到了可以放松的时候，但还需完成最后一步。这一步是区分充满热情的业余爱好者和专业人士的关键。

退后一步，仔细审视你的“精灵”，它可能仍有些粗糙。花时间完善它，确保每个部分都完美无缺。这其实是最有趣的部分（尽管你可能已感到疲惫）。添加细节能让“精灵”更具吸引力，这也是你展现技术和经验的时刻。

你可能会疑惑，为何“摔跤律师”的眼睛消失了许久，或者他拿着的法院传票为何是空白的。这是因为我想将这些细节留到最后处理。此外，我还为他的臂章添加了裁剪细节，为裤子添加了裤门襟……为何这个男人没有乳头呢？我还调暗了他下半身的亮度，以突出左手，使其更具立体感和层次感。

你终于完成了！“摔跤律师”使用了45种颜色，大约115*150像素。现在你可以去喝啤酒庆祝了。

全过程

整个过程充满乐趣，这是一个gif动画，展示了“精灵”不断改进的过程。

结尾建议

1. 学习绘画的基本原理，练习传统工具。所有关于素描和上色的技能和知识对像素绘图都有帮助。
2. 从小的“精灵”开始画。学习像素绘画，最难的是用少量像素体现大量细节，不要绘制过大的“精灵”，以免浪费时间。
3. 学习你欣赏的画家的画法，不要害怕模仿。模仿是最好的学习方式，找到自己的绘画风格需要时间。
4. 若没有数位板，建议购买一个。重复点击鼠标既无趣，也不高效。我使用的是小型数位板Wacom Graphire2，它占用空间小，便于携带。你可能更喜欢大型数位板，购买前最好先试用。

【用鼠标绘制小的像素图也可以，甚至我认为鼠标更适合画小图，但数位板价格不贵，迟早会用到。Wacom Graphire2已停产，我现在使用的是Wacom CTL-671，我认为它最适合新手，价格不贵，大小适中。更便宜的数位板太小，昂贵的数位板压感更好，但对于我们绘制像素画来说，无需追求太好的装备。像680那种无线数位板，使用一段时间就得充电，不如有线的方便。除了Wacom，不建议购买其他品牌的数位板，因为Wacom拥有众多专利，其他品牌难以山寨。】

5. 和其他人分享你的作品，获取反馈。说不定你会结识一些新的极客朋友。