简单聊聊最近遇到的 Pixel Art 的缩放及抗锯齿问题. 本文转自我的Blog--浅谈Pixel Art缩放及抗锯齿问题.

# 序

さて, 为什么会谈及这个问题? 我在处理像素艺术(Pixel Art)相关渲染的过程中, 遇到了这个问题. 具体可以描述为, 当**像素风格纹理的精灵图(Sprite)在缩放或移动时, 会出现像素抖动与闪烁的现象**, 看上去像是像素的波浪, 非常影响观感. 如图1左上角的例子.

图1.gif, 因为图太大了传不了(哭)...

顺带一提, 精灵图上的角色是GBA游戏《公主联盟》中的大天使マリエッタ.

这个问题其实非常常见, 稍作检索就能找到原因与解决方法. 一个简单的规则是, **像素图的放大需要是原尺寸的整数倍, 否则会出现畸变(Distorted)**. 这种畸变是规律性的, 在放大或移动过程中就会出现有规律抖动和闪烁. 这里, 通常我们默认像素原图是比较小的, 所以在屏幕显示时主要是进行图像放大操作, 即Upscaling.

以上, 虽然是简单的理解, 但从某种角度说确实是最优解, 即不做任何的妥协, 让像素艺术分毫不损地显示到屏幕上吧! 在大部分时候, 上述方法并不会增加什么负担, 不过是限制游戏分辨率而已. 也可以参考 unity 官方的 2d-pixel-perfect: Pixel Perfect Camera 项目的方案.

但还是让人不禁想问, 是否有什么办法能让 Pixel Art 突破分辨率的桎梏, 同时不丢失太多表现力呢? 说到这里, 我回忆起之前3DS模拟器上玩到的结合3D场景与像素角色的游戏, 也有类似的观感.

相比之下, 尝试解决突破这个限制的分享和讨论则不是很多. 不过, 好在以我的检索能力依然能找到一些, 同时看到方法演进的思路. 我觉得更重要的是, 这些分享的内容都丰富且详尽, 是相当好的参考. 只是这样, 我也会认为这些技术值得分享.

这里自然不必把别人发明的东西再发明一遍, 我会在下面列出这些参考. 如果你也在解决类似问题, 可以参考看看(保佑你不是先看过了下面的内容后才看到这里).

- Manual texture filtering for pixelated games in WebGL – Algorithmic Pensieve

- Superior texture filter for dynamic pixel art upscaling

- Scaling Pixel Art Without Destroying It

- Crafting a Better Shader for Pixel Art Upscaling - YouTube

- Pixel Art AA Video Notes | Patreon

上面的顺序正好是这几个作者相互引用的顺序, 其中第五个参考是 t3ssel8r 对于第四个参考(其所制作视频)的进一步解释. 关于 t3ssel8r 大佬还想多说几句, 很早之前看到过 t3ssel8r 关于3D像素艺术渲染的 Demo, 效果非常惊艳, 竟然能把像素画面调教地这么舒服. 至今还能在油管上看到其他人对 t3ssel8r demo 的 recreation. 不仅如此, t3ssel8r 其他游戏开发相关的分享, 质量也是高的可怕. 只是最近一年里频道貌似不怎么活动了, 不知进展是否顺利.

那么, 这篇文章到这里就结束了... 即使不理解原理, 只拿参考中简短的 shader 代码就能够得到图1下边一行的结果, 肉眼可见, 效果是相当明显的. 对了, 可能唯一容易漏掉的是, 如果使用Unity, **记得把对应纹理的滤波模式(Filter Mode)从最近邻插值(Point)调整为双线性插值(Biliner)**.

.

.

.

.

.

虽然就想这样结束, 但出于笔记的完备, 我依然想稍微深入地谈谈对于这个问题的理解, 这些理解大体也不会超出参考的内容, 只算作是一个注解罢了.

困るなぁ~, 看起来 IndieNova 并不支持编辑 Markdown 与 Latex 公式, 注解的部分我就不搬运编辑了, 如果对这个原理感兴趣可以移步...