独立游戏人：像素风格游戏制作分享(转)

独立游戏人：像素风格游戏制作分享

 

 

文/vikingzombie

像 素风格在独立游戏中非常火，我也挺喜欢玩像素风格的游戏。特别是独立游戏大电影里介绍的《Fez》，在我心目中的游戏榜单能排到前5。我也想做像素风格的 游戏，在经过一段时间的研究学习后，有了些心得，现在把我博客里的一篇文章贴出来，权当抛砖引玉，希望对同样喜欢像素风格，计划做像素游戏的人有所帮助。

—————————————————————————————————————————

像素风是现在独立游戏最流行的画面风格之一。

第 一个原因是：像素风是一种很独特的画面风格，轻易就能与游戏大厂的精致画面区分开。现在3A游戏的大趋势就是画面追求极致的逼真，甚至出现了《超凡双生》 《教团1886》这样游戏性短板，画面却极致出众的游戏。独立游戏与3A游戏比拼画面不现实，倒不如在画面上不求精致，只求独特，然后在游戏性上取胜，这 既是独立游戏的生存之道，也是反叛千篇一律的商业模式的精神追求。

第二个原因是：不少玩家和独立游戏制作人都有「像素情怀」，像素游戏能让许多从FC时代走过来的玩家产生亲切感。

第 三个原因是：像素绘画学习成本低，就算是零基础的人，经过较短时间的学习，也能画出能用的像素画。我知道不少独立游戏制作者都是既当程序员又兼职美工的， 比如做《雨血：死镇》时的梁其伟、做《Spelunky》时的Derek Yu 等。在没有专业美工的情况下，选择门槛较低的像素风格也不失为一种好方法。当然，想要画出优秀的像素画也是需要一定的美术基础和长时间学习的。

比如下面这张图，出自98年的 《Street Fighter Alpha 3》中的桑吉尔夫动作图。（他的梅花大坐估计是不少人童年的噩梦……）

看这光影和体积感，还有肌肉纹理……看上去是不是跟3D建模的一样？

有 兴趣的可以下载来看看，放大来看就能看出画面的粗糙了。当年的机器性能不行，怎样使用较少的像素展现更逼真的画面是一个摆在各大游戏厂商面前的难题，最后 游戏厂商们只能选择一帧一帧，一个像素一个像素的去扣，上面的画面扣除掉空白区域，200*200像素都不到，却能表现出逼真的立体感。这种级别的像素 画，可不是入门画师能画得出的。

而现在不再受限于硬件，大部分像素画也由追求逼真的画面转为追求舒适的画面了。

比如这种。

当然，也有大厂在追求极致逼真的像素风格。

比 如这张《拳皇13》的不知火舞站立图，5层亮度的光影、完美的人体结构、符合物理因素的乳摇……才200*200像素，这几乎不可手工画出来。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 < 3。

【锯齿几乎是不可避免的，在固定的图像大小下，经常会出现无法修正的锯齿。 比如原作者的这张图：

请注意圆圈圈出的地方，这个锯齿是无法解决的，我们要不让这块肌肉整体都变形，要不就得容忍这个锯齿。像素越少的图像不可避免的锯齿就会越多， 我们能做的仅仅是减少那些可避免的锯齿，对于无法避免的锯齿也不用过多计较，当然，在放弃修正某个锯齿前，你最好先多试试】

结论

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

三、构思

你要做的第一件事是拥有一个好想法。试着在你脑海中或是纸上具象化你想要的像素图。一个简单的画前准备就可以让你专注于实际的像素绘制。

应该考虑什么

1.「精灵」将用于什么场景？

用于网站,还是游戏?接下来需要为它做动画吗?如果接下来需要制作「精灵」动画,你可能要让它更小，拥有更少的细节。相反,如果你不需要为这个「精灵」做动画，你就可以把更多的细节放进这个「精灵」里。思考「精灵」的使用场景,会让你工作的更好。

2.我该维持什么风格？

上 文中，我说过「颜色维持」很重要。其中一个原因就是你的色板颜色可能是有限的。受限于硬件（很少是因为这个）或者受限于画面风格。如果你是在模拟一个特定 的主机风格（例如64位的NES），则会受限于主机的精度。除了颜色受限，你还得考虑「精灵」的尺寸大小，以及如何让它融入环境，不显突兀。

【我 不建议完全模仿一个特定的主机风格，比如FC机的同屏发色数只有16色，这显然是不够用的，我们追求的应该是适合游戏风格的画面，而不是一味的追求复古。 「颜色维持」更重要的意义在于使整个画面协调，这里面涉及的色彩搭配又是一个大坑，我这儿有些相关资料，感兴趣的可以找我要。实在不想看书，就模仿别人的 上色，百度“色板”，有现成的可供参考，或者找好看的图片来提取颜色制作自己的色板】

让我们开始进入正题吧！

在本教程中，我没有设定任何风格限制。我只是确保「精灵」足够大，方便你看清每一步的细节。为此，我决定用「摔跤律师」来作为教程原型，它是我们这儿最屌的摔跤代理人！它能用于格斗游戏或者其他像「Habeus Corpse Blaster」这样的游戏中。

四、轮廓线

黑色的轮廓线线能为你的「精灵」提供一个良好的基本结构，它是最好的开始步骤。我们选择黑色的原因是因为它好看且醒目。稍后，我会告诉你如何改变轮廓线的颜色来让「精灵」显得更真实。

两种方法

有两种描出轮廓线的方法，一种是直接拖拽出轮廓线，然后再进行清理修改。另一种是从一开始就用像素点一个个的填充成你想要的线条，你懂的，就是点点点。

用哪种方法取决于「精灵」的尺寸和你对像素绘画的熟练度。如果一个「精灵」很大，那么拖拽出草图再进行修改，要比用像素填充追求一次性通过容易的多。

在这个教程中，我们绘制的是一个相当大的「精灵」，所以我会演示第一种方法，这也更利于文字说明和图片说明。

• 第一步：粗绘轮廓。

使用鼠标或数位板勾勒出「精灵」的粗略轮廓。不过也不要太粗略，他应该跟你想要的最终效果差不多。

这个实例中，我在草图阶段完成了轮廓线的主要部分。

【这一步最重要的是抓造形的能力，比如这两个路飞：

，

是 不是明显后者要像的多？这是因为后者概括路飞的特点要比前者准确的多，首先路飞的草帽是有圈红色圆环的、路飞的大眼睛是眼白区域大，中间眼珠区域小，还有 路飞的手臂因为橡胶果实的能力而较常人长，以及不可或缺的草鞋，这些细节特征能“提醒”玩家，这个图是在画谁，他的形象如何。抓形能力是需要多动脑的。下 笔前好好考虑清楚自己「精灵」的人物特征，多给它加小细节才能让它生动起来。

PS. 画人千万别画这种正面人体侧面腿，还有火柴杆一样直直的手，难看的不行】

• 第二步：修改轮廓

首先，放大轮廓图6倍或8倍，方便我们看清每一个像素。然后修改轮廓，尤其，你需要修剪掉离散的像素（轮廓线应该只有一个像素宽度），去除所有锯齿，并添加你在第一步里错过的细节。

一般来说，即使是较大的「精灵」也不会超过200*200像素。「以少成多」在像素图里再正确不过了，你慢慢会发现，用极少的像素仍能表现极多的不同。

【一般独立游戏的「精灵」都没这么大，200200像素在优秀的画师手中都能画的看不出是像素画了。选择几十几十就差不多了，越大的像素图画起来越繁琐，“像素味”也越淡。】

让轮廓线简单。细节我们之后会添加，但现在，让我们全神贯注于「打形」，完成例如肌肉分割这样的基础步骤。它现在可能不像你想要画的像素图，但请耐心，这是一个必经的步骤。

五、颜色

随着轮廓线的完成，我们有了一幅空白的填色图，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.不要使用太过相似的颜色。不要在一个物体上使用两种太相似的颜色，除非你想让你的「精灵」模糊不清。

【大部分像素风格的游戏都不会分太多层的明暗，一般都是亮部，暗部，阴影这三层明暗就够了，甚至只分亮部，暗部，不要阴影。分的明暗层越多，自然就越逼真，越有立体感，不过再次强调一点，我们画的像素图并不追求逼真。PS。如果不懂阴影怎么画，可以百度“三大面五大调”】

七、抖动网点

「颜色维持」是像素艺术家必须多加考虑的事情。有一种方法能让你使用较少的颜色得到更多的阴影层次，这种方法叫做「抖动网点」。类似传统绘画中的「交叉影线」和「点画」，把两种颜色交错起来，为的就是得到它们的中间色。

简单例子

这是一个简单例子，它运用「抖动网点（dithering）」技巧，用两个颜色制作出了4种不同的明暗：

高级例子

对比这两张图片，上面那张图片是用PS的渐变工具做的，下面那张图片用3种颜色通过「抖动网点」做出的，注意创建中间色的不同模式，尝试使用不同的模式来创建新的纹理。

应用

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

你能遵照自己的想法使用「抖动网点」。但老实说，我很少见到能将这个技术运用好的人。

*【这个也是常见的技巧，抖动不仅可以使少颜色体现出多种明暗效果，还能使物体更有质感，比如这张图，运用抖动的砖块看起来更有质感。

这两张对比就更明显了，第一张看起来非常光滑圆润，后一个就像饱经沧桑的坚果墙或者矿石之类的，用不用「抖动网点」取决与你想表现什么样的材质，不过我劝你谨慎使用，抖动用多了会使画面变脏，清新风格的游戏一般不用「抖动网点」。具体操作可以看：手把手教你画像素（二）】*

八、调整轮廓线

调整轮廓线，也叫「选择输出」，是一种描绘轮廓的方式。我们使用一种更接近「精灵」原色的颜色来绘制轮廓，而不是全使用黑色。此外，我们改变「精灵」边缘轮廓线的亮度，让光源决定我们该使用什么颜色。

直到这一步，我们一直保持着轮廓线是黑色的。这没有什么不好的，真的，因为它很好看，而且它让「精灵」和周围的环境分开。但使用一直使用黑色，我们牺牲的真实性可能会超出我们预期，因为他让「精灵」显得更加卡通。「选择输出」是一种避免这现象的好方法。

【意思就是重绘一遍轮廓线，这在游戏素材绘制中是必做的，没有哪个游戏是用黑色描边的】

你会注意到我还使用「选择输出」来软化了他的肌肉纹理。最后，这个「精灵」开始看起来像个连贯的整体而不是一堆单独的片段了。

把这个与原来的做对比：

九、抗锯齿

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

技巧1：平滑曲线

一般来说，你应该在线条断裂、参差不齐的地方加上中间色来过渡。如果线条仍然看起来太不平坦，就沿着曲线的方向，再添加一个比中间色更亮的像素层。

我解释的再好都不如让你直接看例子，只用看下面这些图片，你就明白我的意思了。

技巧2：圆滑驼峰

技巧3：线条减淡

应用

我们现在来对「精灵」使用抗锯齿。请记住，如果你想要让你的「精灵」在任何背景色上都好看，就不要在它的外缘使用抗锯齿。否则，你会看到有一个难看的光辉围绕着你的「精灵」，让你的精灵看起来非常脏。

【谨慎使用抗锯齿，特别是图像小，像素少的图，最好别使用，不然中间色太明显了会让你的「精灵」看起来朦朦胧胧的，而且经过这种抗锯齿处理后的「精灵」是不能在所有场景通用的。每一次背景色改变，就意外着你用的抗锯齿中间色也得跟着改变】

正如你看到的，这种效果虽然微妙，但会产生极大的不同。

为什么要手动调节？

你可能会问，为什么我们不直接使用绘图程序里的滤镜来让精灵变得平滑?答案是没有什么滤镜能比得上我们手动调节的效果。手动调节有完全的控制权，能调节更多的颜色层次。在需要被平滑处理的区域使用任何抗锯齿滤镜，都会让那个区域降低像素质量。

十、结束语

唷！到了关掉电脑来瓶冰啤酒的时候了。但不行，还差一点！最后的这部分是一个充满热情的业余爱好者和一个专业人士之间的区别。

退后一步，然后仔细的看看你的精灵，可能它仍然有点粗糙。花时间去完善它，确保所有部分都是完美的。这其实是最有趣的部分（虽然你可以已经累了）。添加细节来让你的精灵变得更吸引人。这会是你展现技术和经验的地方。

你 可能想知道为什么「摔跤律师」的眼睛消失了这么久，或者为什么他拿着的法院传票是空白的。这是因为这些细节我想留到最后。也请注意我添加到他臂章上的裁剪 细节、添加到裤子上的裤门襟，还有……好吧，为什么这个男人没有乳头？我还调暗了他下半身的亮度，来使他的左手突出，显得更有立体感和层次感。

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

全过程：整个过程都很有趣。这是一个gif动画，展示了我们的精灵不断改进的过程。

结尾建议：

1.学习绘画的基本原理和练习传统工具。所有关于素描和上色的技能和知识对像素绘图都有益处。

2.从小的「精灵」开始画。学习像素绘画，最难的部分在于如何用很少的像素来体现大量的细节，不要画太大的「精灵」（这纯属浪费时间）。

3.学习你欣赏的画家的画法，不要害怕成为抄袭者。模仿其他人的画法是最好的学习方式。找到自己的绘画风格需要时间。

4.如果你没有一个数位板，就去买一个。重复点击鼠标没有任何乐趣，也不会显得你更绅士。我用的是一个小型的数位板Wacom Graphire2，它正好适合我，只占据我桌上很小的空间，而且够便携。你可能更喜欢大的数位板，不过买之前最好先试用下。

【用 鼠标画其实也可以，画小的像素图我还觉得鼠标更好用，不过买个数位板也不贵，迟早要用得到的。Wacom Graphire2 早停产了，我现在用的是Wacom CTL-671，我认为这个是最适合新手的，不贵，大小适中，再便宜的就太小了，贵的当然压感更好，不过我们不是美工，而且只是画像素画，没必要追求太好 的装备。680那种无线的也没必要，用一会就得充电，还不如用连线的。PS.除了Wacom别买任何品牌的数位板，Wacom手中专利不知道多少，不是国 产能山寨的。】

5.和其他人分享你的作品然后得到反馈。说不定你会遇到一些新的极客朋友呢？