查看原文
其他

带你领略马赛克之美,游戏像素画基本原理分析

王子饼干 腾讯GWB游戏无界 2022-08-30


编者按 像素画风是目前独立游戏中开发者们较为热衷的一种美术表现形式,但想要最大化呈现出它的美感却并非易事。本文将通过对游戏像素画原理的介绍,来帮助大家快速了解。欢迎大家留言说出你对像素风的看法,小编将在6月8日前抽取5位送出鹅厂周边。



作者:王子饼干,《多洛可小镇》制作人

本文内容首发知乎:https://www.zhihu.com/people/xie-e-ke-xue-jia

(转载请征得同意,文章仅为作者观点,不代表GWB立场)



1.1 思考和实践的关系

本篇针对像素画风格进行个人的一些反思和探讨,试图能够将像素风格这个概念用通俗的语言阐释的更加清晰一些。那么在我们开始之前,我觉得概述最重要的事情就是再强调一下我个人的学习理念。即学习分两部分,第一部分为实践,第二部分为思考。学习基于实践,你可以不去思考,一直反复进行练习。终有一日也可以在技术上达到一个层次。但是思考却可以帮助你快速的达到那个层次,不仅如此,思考可以提高你的技术能力的上限。

总有人说天赋决定上限,努力决定下限。对我这种超级反感宿命论的人来说,天赋其实不应该归类于对技术的掌握,而是对技术的兴趣爱好。古往今来,那些名垂青史的人,总是凭借着对那些所在领域的一腔热爱,才能持续不断的付出,只有你对这个领域的热爱,才能让你的奉献更为真实,才能在你的作品里注入灵魂。

所以我认为,思考提升上限,努力决定下限。

1.2 该文的结构

该文是一篇长文,分上下两章,第一章首先阐述像素画的基本原理,这些部分和《像素逻辑》①中所说的部分一样,这本书针对新手说了很多像素画的原理,我觉得用来作为入门书籍非常好,全文也比较通俗易懂,很适合当作一般的刊物来阅读。该文的前面一部分会引用其中的很多内容。第二章则是针对我个人的一些总结和以往的探索来概括像素画中能够让风格变化的极为明显的几个点,然后通过一些案例来突出这些点。

1.3 如何阅读

如果你是一个完完全全的新手,希望入门像素画,则从第一章开始读,如果你已经是一个像素画师或者具有一定的像素画基础。可以从第二章开始读。

1.4 概述小结

该文只是提出一些像素画的思路和学习的方法,一篇普通的博客,围绕的仍然是风格这个核心。既不是学术研究也不是什么教程。所以对于一些质疑和疑问,我保持中立的态度。毕竟对于艺术这个概念来说,没有对错,该文所探讨的“正向反馈”只是遵循主流的美观。


刚开始接触像素画的时候,如果0基础的话,肯定还是会比较迷惑的,甚至不知道从什么地方开始,首先画画本身就是一个很模糊的概念,从某程度来说,我在纸上写字也可以算是画画。所以我们首先要理解什么是像素画,什么可以被称为像素画。首先我们明确一下像素画的概念,像素画是数字美术的一种形式,利用软件绘制的,像素级别的美术格式②。

这句话对大部分已经接触像素画的画师来说可能是废话,但是很重要的一点,像素画是美术形式的一种。美术形式即art form 或者可以译为美术风格。有非常多不同的类型,比如油画,水粉,国画,涂鸦,素描等。知道这点,我们可以暂时将像素画的结构拆分为两部分,第一部分,像素画是一种美术形式,因而仍然遵循美术原理。第二部分,像素画是像素级别的作品绘制,有自己不同于其他美术风格的特色。所以练习像素画,我们可以拆为两部分,第一部分是美术原理,第二部分是像素原理。关于什么是美术原理,什么是像素原理,下文会详细解释。


3.1 了解美术原理

当然美术原理(并非美学原理)是一个非常庞大的概念,我们无法用三言两语说的清楚,因而这里只是大概的分为几个区域,让我们知道应该朝着什么方向专门的练习。我们可以套用素描的概念,因为素描是一种写实风的绘画风格,不同于综合立体主义③这样较为纯粹的艺术流派。在素描中,最重要的两部分,第一是形,第二是明暗。说的通俗一点,第一是外形设计,第二是光影变化。对于很大一部分美术形式来说,这两个都是非常重要的。

3.2 光影

练习像素画从什么地方开始,可以是光影,也可以是外形设计或者其他的什么点。但是这不妨碍你先了解它。人类判断一个事物是否真实不是根据色彩的数量来的,而是对于光影的表达来的。一个物体,即使是黑白的,只要正确的表达了光影,仍然不妨碍人的正确判断,同样表达物体的材质也可以通过光影来表达。在PBR材质④中,核心的部分仍然是物体对光照的反馈。足可见光影是大部分写实或者半写实⑤美术风格最重要的部分。

图片源自推特画师@pixeldoshi

在我们绘制大部分的物体时,光影都是我们把握笔墨的指导要素,也就是你得先知道物体的结构,知道光线从哪射过来,你才知道它最终表现出的是什么样。知道哪里用的色彩应该亮一些,哪里应该暗一些。物体表面的反光的程度如何,如果石头的表面反光,也许上面有雨水。如果物体本身就反光,那么它可能是宝石或者是金属等。

光影在影响风格主要是针对写实和半写实的不同,对于写实风的像素来说,光影刻画的会比较细节,对于半写实或者极简风来说,光影的处理则不再是最重要的甚至会被忽略。我们可以找一些图来对比一下。

图片源自逆塔防手游《ZombieWarfare DeadAhead》

以上的这辆损坏的公交车是僵尸战争中的一个场景装饰物,总得来说还是比较写实的,不过它的写实不仅仅来源于优秀的光影,更多的还有较低的饱和度。关于这点我会在后面继续探讨。从经验性的角度来说,在游戏开发中所使用的大部分美术素材,往往场景偏向于写实,而角色偏向于半写实。如下图所示。

图片源于推特画师@sakuemonq

这张角色的描绘,仔细观察,大部分的光影的部分都只采用两种颜色的对比来表达。该风格的作品就偏向于半写实了。这个画师的大部分作品都类似于这样的角色以及相对应的动画,使用很少的颜色,光影表达的不是非常强烈。通过外形设计来弥补光影的不足。

而对于极简风的像素来说,光影可能是会被忽略的部分,首先是没有太多的像素来表达光影,其次是极简风更加注重动作的表达。代表作品有《Crawl》和《BleakSword》等。

图片源自于iOS动作手游《BleakSword》截图

3.3 外形(线稿)

可以说是线稿,也可以说是外形。这个概念可以说比光影更为宽泛,不管是什么类型的美术风格都会有外形设计这个概念。对于石头,木头或者地面等这类常见的自然景物其实无所谓,因为它们对外形设计的容错很高,基本上都是简单且随机的外形。所以基本上外形设计的重心会集中在建筑,人物等对外形的要求较高的地方。

但是说是这么说,外形设计的风格是非常非常多变的,我们无法穷举所有的外形设计,所以围绕游戏开发这个主题,我们来看一些游戏中的比较有特色的人物设计。

图片源自于游戏《Eastward》

每个在风来之国中的角色都是栩栩如生的,在游戏里,它们有自己的故事和剧情。在画风上,非常迪士尼风格,就脸部来说,这个老船夫比较突出的就是自己的鼻子和胡子,比例比较夸张。这种扭曲身体结构比例的画法对我来说统一概括为了迪士尼风格或者我们也可以称之为早期的美漫风。

图片源自于推特画师@Neoriceisgood

这个画师的角色设计也十分具有特色,基本上,你可以“圆角矩形”来概括。因为很多他画的角色都是方方的。

其实总得来说,虽然我们偶尔会见到一些奇特的设计,不过大部分的像素画的外形设计受限于大小,写实性等其实大同小异。更多的不同体现应该是体现在色彩和光影上的。

3.4 色彩

这也是一个庞大到可以出一个系列课程的主题,而且针对版式设计,网页设计,美术设计,概念设计都有不同的衍生,不仅仅是针对美术。但是在我们开始接触色彩之前,我们先了解一下色彩在计算机中的概念。毕竟计算机是没有办法完全的还原现实世界中的所有色彩的,有一定的限制。

在计算机中,色彩往往由RGB三个通道构成,也许还会加上透明通道作为第四个通道。所谓RGB的意思就是说一个颜色是采用RGB三个分量混合而成的,这种表示方法很抽象,很难懂。甚至我们无法从RGB三个值去大概的猜测出这个颜色是什么样的,是很亮还是很暗。那为什么有这种表达方法呢?是因为这个方法对计算机来说非常的友好。

对于人类来说,我们习惯于使用HSV(同HSB)或者HSL来表达一个色彩。所谓HSV指的就是色相、饱和度、明度。HSL指的是色相、饱和度、亮度。区别就在于亮度和明度的区别。

简单的来说,明度指的是照亮的程度,而亮度则指的是白色的量。如果不理解的话我们看下面的图来观察一下。


色彩是这个坐标系中的一个点,如果我们沿着纵轴移动,会提高明度,如果沿着横轴移动会提高色彩的饱和度,饱和度越高,这个颜色就越纯,否则越灰。这就是HSV模式,还是相对通俗的。(如果你理解不了HSL的话,就直接使用HSV即可,可以直接跳到下一节)


但是HSL呢,我们观察下图就可以明白了。



可以看见,亮度处于0-50时,色彩点会垂直上升,而一旦超过50,色彩点会朝着白色移动。个人觉得HSV可能更加便于理解,所以我一直使用的是HSV。所以在了解了这个概念之后,我们就可以从一些作品的色彩来做一些简单的分析了,并且色彩是对风格影响比较大的一个要素,所以有比较多的案例可以对比。

图片源于推特画师@Jsf23Art

图片源于推特画师@cyangmou

上述两幅画面都是内容比较丰富,细节比较多的。虽然也有其他的地方,但是色彩的迥异是造成其差别的首先因素,为何会产生这种差异,我们在第二章的时候探讨。

3.5 小结

美术原理必然不止这些,但是大多数我们需要了解的就是三个名词。即光影、色彩、外形。它们时时刻刻影响着像素画的最终结果,你可以通过了解这三个概念来针对的训练自己某一方面的能力。

像素画最重要的就是像素原理了,这里的细节比美术原理要更多一些。其中大部分都可以在《PixelLogic》①这本书中找到。我也会重新按照自己的节奏叙述一遍。


4.1 像素线条

线条是如何影响像素画的风格差异的,我们会在第二章的时候探讨,这个主要是边框的问题。不过对于像素线条来说,我们只需要了解平滑的线条是如何绘制出来的就完事了。


诀窍就是,当一排较大的像素包围住一块较小的像素时,就会产生不平滑的感觉,那么我们可以调整位置,避免这种情况的出现,让其更加平滑。当然了,线条这个概念不仅仅是出现边框之中,只要出现了色阶,就会产生线条。


对于边框来说,最重要的是保证像素的锯齿感,也就是使用“细线描边”,而不是后线描边。


右侧的这种我们可以称之为厚线描边,这种描边方式比较特殊,我见得也比较少。并且效果较差,所以我并不推荐。

4.2 抗锯齿

抗锯齿是像素画的一个重要主题,它是一种消除锯齿感的技巧,或者让消除锯齿感的手段。首先我们要知道为什么需要抗锯齿。我们前面已经讲了线条,我们观察一下像素画的直线线条。


由于像素画的特点,像素画可以平滑绘制出来的直线线条是非常有限的,但是这几种线条肯定无法满足所有的需求。但是一旦我们使用下面的这种线条,就会让线条不平滑。


那么抗锯齿的第一个作用就是为了让这种像素线条的不平滑感去除掉。做法就是在看起来断裂的地方补充一种色彩比当前的色彩更加淡的色彩,来补充这里的断裂感。正常来说应该是一个半透明的色彩,不过在游戏开发中并不支持使用半透明的色彩来画画。于是我们会选择一个更淡的颜色来填充断裂的地方。


这样,这根线条拉远了看就像是一根完整的线条,这就是抗锯齿的原型。当然,抗锯齿还可以帮助我们进行色彩的过渡。如下图所示:

图片源自于推特画师@chonkypixel

通过一种更淡的色彩,填充在色阶的边缘,让过渡更加平滑,消除菱角感和锯齿感,就是抗锯齿的第二个主要用法。那么抗锯齿如何影响风格,这个我们在第二章会更加详细的探讨。

4.3 像素簇

一个簇,或者颜色簇,或者像素簇,就是一组连续的同色像素。对角线连接的像素算不算还有些争论。我认为也算,我把这种叫弱连接,会尽量避免,不过不会太担心这种。

画像素画的时候,我的重点是尽量少出现像素簇,而且一定避免单像素的簇。这些单像素的也可以叫孤立像素,通常会让画面看起来有很多噪点,很乱。⑥


高亮的部分可以理解为像素簇,其实通俗的来说就是色块,在像素画中,色块的形状是非常重要的,优秀的色块可以让画面更加的优秀。下面的一些图片都是像素簇比较统一的类型。

源自于推特画师@outofluck_1

源自于推特画师@kirishimaaa_

色块维持的好,可以让你的像素画看起来像具有油画般的质感,与像素簇比较对立的一种手法是网点过渡,网点过渡会破坏像素簇,使得画面凌乱。

不过画面整洁和凌乱无分对错,这主要取决于你希望作品呈现一个什么样的效果。下面就是一幅比较优秀的逆色块(逆像素簇)作品。

源自于推特画师@FinlalDithering

该画师的作品我们后续还会继续探讨的。

4.4 像素画的表达能力

这也是属于像素画的特殊性,如果我们画厚涂,平涂等作品,画布的大小不会过份的影响画面的风格,但是像素画就不一样了,假设我让你在一个16*16的大小内绘制一个角色,那么这个角色几乎大部分的装饰物都会被忽略,我们只能画出一些比较大的容易辨认出来的部分,比如头发、帽子、衣服等。如果角色真的在这个大小绘制,那么肯定偏向于表达动作。而非具体的外形装饰等,所有我们在绘制一些像素画的时候,可以避免绘制一些表达不出来的细小内容。

4.5 其他需要注意的地方

  • 像素画过渡的时候尽量避免条带的产生。

  • 网点过渡可以带来更加细腻的效果,但是这个仅适用比较大的画布,所以尽量不要在较小的画布中使用网点过渡。这不会提升太多的效果反而会让画面非常凌乱。


4.6 小结

像素画的原理就是这么些内容,但是说着简单,其实深入每个点都是需要花很长时间来练习的技术,我们拆解开之后,大家可以根据自己的弱项来逐步的练习。


第一篇文章其实有点多余,但是我个人是比较讲究前因后果的,有了第一篇章的铺垫,在第二章当中才可以更加好的推动那些概念,来帮助我们理解为什么像素画之间的风格可以如此的不同,从上述提到的所有点里来挖掘不同,是一种很好的方式。

引用:
① 《Pixel Logic》一本探讨像素画原理的书,Michael Azzi著
② 摘自维基百科
https://en.wikipedia.org/wiki/Pixel_art
③是西方现代艺术史上的一个运动和流派,起源于法国,代表画家为巴勃罗·毕加索,乔治·布拉克等
④基于物理的渲染材质
⑤此处特指大部分的厚涂,像素画,或者赛璐璐等二次元风格
⑥摘自《saint11像素宝典》
https://www.bilibili.com/read/cv1739864




您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存