像素画缩放：整数倍、滤镜与常见坑

今日教程｜像素画缩放：整数倍、滤镜与常见坑

打开网易新闻 查看精彩图片

怎么在保证「还是像素画」的前提下正确缩放。做角色和攻击动画时经常要导出不同分辨率，用对缩放方式能少很多糊图、碎像素的坑。

什么是像素画

一种常见定义：低分辨率、且每个像素的放置都是有意为之。和普通图片不同，缩放时不能随便用「平滑」算法，否则会糊掉。像素画是画在网格上的，类似于马赛克或十字绣——每个格子对应一个像素，意图清晰。

打开网易新闻 查看精彩图片

为什么要缩放

你的屏幕（手机、平板、显示器）本身也是由物理像素组成的。画布上的像素需要「翻译」到屏幕像素上。以前 32×32 的图在 640×480 的屏幕上刚好；现在 4K 屏 3840×2160，32×32 会小得看不清，所以必须放大。

打开网易新闻 查看精彩图片

放大（Scaling Up）

• 可以无限放大而不丢质量，但只能按整数倍（2x、3x…）来放。若用 2.5x 等非整数倍，像素会错位、看起来碎。
• 不要用平滑滤镜。应使用Nearest Neighbor / Point / None；避免 Bilinear、Bicubic 等，否则边缘会糊。

不同软件里滤镜名字不一样：认准Nearest Neighbor、Point或None；不要选 Bilinear、Linear、Bicubic 这类会插值的选项。

打开网易新闻 查看精彩图片

缩小（Scaling Down）

• 原则上不建议把像素画缩小——会破坏清晰度。若必须缩小，可用 Bilinear 等平滑滤镜，但结果就不再是「硬边像素」了。
• 例外：若拿到的是已经放大过的图（例如别人发你的 3x 图），你想做成 2x，可以先缩回原始尺寸再按整数倍放大，这样不会丢质量。做法：先放大查看，数一下「一个大像素」由几个屏幕像素组成（例如 3 像素高就是 300%）；把图像尺寸除以这个倍数得到「真实像素尺寸」，再按 2x 放大即可。

打开网易新闻 查看精彩图片

常见问题 非整数倍缩放

想要 2.5x 或 150% 这种尺寸时：

• ：先用 Nearest Neighbor 放大到最近的整数倍（如 2x 或 3x），再用 Bilinear 缩放到目标尺寸。会略糊，但多数情况可接受。
• 高分辨率时：目标分辨率足够大时，直接 Nearest Neighbor 拉到目标尺寸，有时碎像素不明显。
• 进阶：会用 shader 的话，可以参考 Cole Cecil 的非整数倍缩放文章[1] 做高质量缩放。

尽量不要在同一画面里混用多种像素比例，否则会让人觉得「网格是随便定的」。若必须混用：

• 整数倍关系（如 1x 和 2x），不要用 1.5x、150% 等。
• 不要超过两种比例。
• 不同分辨率放在不同「画布」上、分开区域（例如 UI 一层、游戏世界一层）。

原文链接：Scaling Pixel Art - Saint11[2]。

参考资料

Cole Cecil 的非整数倍缩放文章: https://colececil.io/blog/2017/scaling-pixel-art-without-destroying-it/

Scaling Pixel Art - Saint11: https://saint11.art/blog/scaling/