pixel-logic像素画教程:手工抗锯齿技术

pixel32 编译  | 教你画像素画 出品一图胜千言,接下来的教程看图吧!

图1

通过添加过渡颜色,手工抗锯齿技术(以下简称为AA)可以最大限度消除像素画的锯齿感。

仔细观察下面图片中过渡颜色放置的位置,通常放在两个颜色交界的地方。

图2

To be or not to be?

AA对像素画来说至关重要。要在项目中使用AA吗?

是否值得为AA投入时间?来一起观察以下案例。

图3

这是任天堂的游戏角色,左边是有AA的版本,右边则没有,两个版本的清晰度相当,甚至普通玩家很难看出其中的区别。AA在这里就像蛋糕上的奶油,锦上添花。

图5

这3个精灵来自NDS游戏Scribblenauts。原始版本是有AA的,去掉AA后仍然相差不多。

这个游戏的风格本身非常简单清晰,因此AA在这里是不必要的。

图6

这个角色来自NDS游戏Kirby Super Star Ultra,在这个案例中AA变的非常强大。

如果没有AA,很多关键的细节都会丢失。

图7

来自GBC游戏Pokémon Crystal。

没有AA的版本看起来锯齿感更明显。在游戏中这个图形是放在白色背景上的,GBC单个精灵支持4个颜色,这个案例中AA被用到极致。

没有AA的版本看起来很糟。

图8

角色来自GB游戏Fatal Fury 2。

去掉AA后角色变的更加清晰,但是失去了一些细节。考虑到GameBoy的调色板,最好还是添加AA。

图9

来自NDS游戏Rhythm Heaven/Paradise。这个游戏的大多数图形都是没有AA的。

这是游戏开发商mimic Ko Takeuchi的风格。添加了AA以后,图形会看起来更柔和。

图10

来自GBC游戏Metal Gear: Ghost Babel。只有放大以后才能看到区别。

添加AA以后,图形变得更清晰。

图11

来自PS3游戏Disgaea 4。

这些像素画是由游戏美术们经过CG转换而来,去掉AA后区别不大。但是在高清的PS3上,AA是必须的。

图12

GBA游戏Advance Wars。无疑AA版本更加出色。

图13

SNES游戏Yoshi’s island。游戏的风格非常干净清晰,在这里添加AA反而效果不好。

结论AA的好处圆滑曲线,尤其是小尺寸精灵;
对于大型的角色来说是必须的;
次级像素画动画不可或缺。AA的坏处有可能过犹不及;
会使清晰的像素画变模糊。

不加AA的好处使小尺寸的精灵更加清晰易识别;
减少颜色数;
速度更快。不加AA的坏处线条有明显锯齿感;
形状生硬,块状感明显。

什么情况下AA是必须的?

图14

Temmie的作品关注圆滑的线条和可读性。

AA仅仅被用在某些不可调和有锯齿的地方。

图15

表现清晰角色,脸和眼睛通常会引起人们更多的关注。

AA可以提高清晰度,可读性。表现细节这个区域包含很多卷曲的头发细节,较小的曲线比大曲线需要更多的AA。

高对比度如果有两种高度对比的颜色,请尝试使用一些中间过渡色像素进行混合。线的重量AA可以增加或减少一些线的重量。

通过添加AA,可以使形状看起来更厚或更薄。如何添加AA?

AA是将像素放在角落使线条或形状更圆滑。有点像把靠垫放在沙发上。

图16

以下的案例可以帮助你理解什么是好的AA。

图17

需要添加多少过渡像素?

大约是线条长度的一半,少比多好。需要添加多少颜色?

可以从1个颜色开始练习,2个颜色获得更圆滑的效果,如果你颜色不受限制或者特别有必要,可以增加到3个颜色。什么样的角落需要添加AA?

下面我会教你一些技巧,帮助你理解哪里需要添加AA。1、平滑曲线下面是一些平滑曲线的例子,多出现在一些大尺寸的角色中。

像素的阶梯越长,需要的AA也越长。

图18

图19

虽然位图不是像素画,但是它们在技术上也是由屏幕上的像素组成。

其技术术语是光栅图形或简单的英文:“像素网格上的图像”。让我们放大一个非常水平的曲线。

然后将其与对角线进行比较。

图20

注意曲线越陡峭,颜色越少。

像素线条的阶梯越长,需要的颜色就越多。概要

图21

待续。

相关文章:
基础技术AAAA抗锯齿基础逆向AA

Author: PixelBear