万圣节特惠:−40% Pixor 现价 $19.99 $11.99,截至 11 月 4 日,在 itch.io →

像素画中的抗锯齿

抗锯齿在线条出现台阶的地方放几个过渡色,让曲线看起来比像素网格允许的更平滑。少量使用能让精灵更精致;处处都用则会让它变软。

用 Pixor 渲染的旋转戒指
线条没有抗锯齿的精灵
关
剪影做了抗锯齿的精灵
剪影
所有线条拐角都做了抗锯齿的精灵
所有线条拐角

什么是抖动

像素是方的,所以任何不完全笔直、也不是规整角度的线条都会变成台阶。在平缓的曲线上,比如盾牌的边缘或头顶,这些台阶在 1× 缩放下会显得参差不齐。

手动抗锯齿(常写作 AA)的做法是在线条跳变的拐角处放一两个过渡色像素来柔化台阶。眼睛会把它们混合起来,曲线看起来就比实际的像素更平滑。这个颜色通常从现有色阶中挑选,介于线条和它旁边的颜色之间。

这是一种手工效果:几个精心挑选的像素,而不是对整个精灵加的滤镜。

什么时候有用

  • 长而平缓的曲线。一次走两三个像素台阶的圆或斜坡获益最大。
  • 大精灵。在 64 px 及以上,有空间放过渡像素而不丢失细节。
  • 内部线条。精灵各部分之间的线条落在已知的颜色上,因此过渡色很好选,而且总是正确的。

什么时候不要用

  • 小精灵。在 16 或 24 px 时,每个像素都承载着形状。过渡像素在这里往往看起来像污点或多余的细节。
  • 未知背景上的外边缘。抗锯齿的剪影是针对某一种背景颜色混合的。把精灵放到别的背景上,柔和的像素就会显出一圈淡淡的光晕。
  • 非常有限的调色板。只有四种或八种颜色时,可能没有介于两种颜色之间的色调。这时阶梯就保持硬边,这也是风格的一部分。
  • 粗犷、块状的风格。有些游戏就想让每个台阶都清晰可见。这是一种选择,不是错误。

常见错误

  • 过度。给每个台阶都做抗锯齿,整个精灵就会显得模糊,像是开着过滤放大了一样。
  • 长度不对。过渡像素的长度应与它所柔化的台阶相匹配。长台阶末端的单个像素作用不大;短台阶旁的一长串过渡像素则会鼓出来。
  • 条带感。把过渡像素排成第二条平行的线,会让边缘看起来像重影。
  • 引擎平滑。手工抗锯齿会被双线性过滤抵消。把纹理过滤设为最近邻(nearest)。

Pixor 的做法

Pixor 绘制一像素宽且没有 L 形拐角的线条,并有一项分三级的抗锯齿设置。0 让所有线条保持硬边。1 只柔化剪影。2 柔化每条线的拐角,不只是外边缘。小精灵和繁杂的背景可以试试 0,曲线有空间的较大精灵则用 1 或 2。这项设置属于风格节点图中的外观,设置手册把它和其他线条选项列在一起。

问题

精灵的外边缘要做抗锯齿吗?

只有在知道背景时才这样做。外边缘上的过渡色是针对某一种背景混合的;放到更暗或更亮的背景上,就会显出一圈光晕。因此很多画师会让外边缘保持硬边。

抗锯齿和游戏引擎做的平滑是一回事吗?

不是。手动抗锯齿是画师亲手挑选的几个像素。引擎平滑则在缩放时过滤整幅图像,会让像素画变模糊。请把纹理过滤保持为最近邻(nearest)。

延伸阅读

在浏览器中免费用你自己的模型试试,或者获取完整版。

在浏览器中试用 获取 Pixor