今日教程｜像素畫縮放：整數(shù)倍、濾鏡與常見坑

怎么在保證「還是像素畫」的前提下正確縮放。做角色和攻擊動(dòng)畫時(shí)經(jīng)常要導(dǎo)出不同分辨率，用對(duì)縮放方式能少很多糊圖、碎像素的坑。

什么是像素畫

一種常見定義：低分辨率、且每個(gè)像素的放置都是有意為之。和普通圖片不同，縮放時(shí)不能隨便用「平滑」算法，否則會(huì)糊掉。像素畫是畫在網(wǎng)格上的，類似于馬賽克或十字繡——每個(gè)格子對(duì)應(yīng)一個(gè)像素，意圖清晰。

為什么要縮放

你的屏幕（手機(jī)、平板、顯示器）本身也是由物理像素組成的。畫布上的像素需要「翻譯」到屏幕像素上。以前 32×32 的圖在 640×480 的屏幕上剛好；現(xiàn)在 4K 屏 3840×2160，32×32 會(huì)小得看不清，所以必須放大。

放大（Scaling Up）

• 可以無限放大而不丟質(zhì)量，但只能按整數(shù)倍（2x、3x…）來放。若用 2.5x 等非整數(shù)倍，像素會(huì)錯(cuò)位、看起來碎。
• 不要用平滑濾鏡。應(yīng)使用Nearest Neighbor / Point / None；避免 Bilinear、Bicubic 等，否則邊緣會(huì)糊。

不同軟件里濾鏡名字不一樣：認(rèn)準(zhǔn)Nearest Neighbor、Point或None；不要選 Bilinear、Linear、Bicubic 這類會(huì)插值的選項(xiàng)。

縮?。⊿caling Down）

• 原則上不建議把像素畫縮小——會(huì)破壞清晰度。若必須縮小，可用 Bilinear 等平滑濾鏡，但結(jié)果就不再是「硬邊像素」了。
• 例外：若拿到的是已經(jīng)放大過的圖（例如別人發(fā)你的 3x 圖），你想做成 2x，可以先縮回原始尺寸再按整數(shù)倍放大，這樣不會(huì)丟質(zhì)量。做法：先放大查看，數(shù)一下「一個(gè)大像素」由幾個(gè)屏幕像素組成（例如 3 像素高就是 300%）；把圖像尺寸除以這個(gè)倍數(shù)得到「真實(shí)像素尺寸」，再按 2x 放大即可。

常見問題 非整數(shù)倍縮放

想要 2.5x 或 150% 這種尺寸時(shí)：

• ：先用 Nearest Neighbor 放大到最近的整數(shù)倍（如 2x 或 3x），再用 Bilinear 縮放到目標(biāo)尺寸。會(huì)略糊，但多數(shù)情況可接受。
• 高分辨率時(shí)：目標(biāo)分辨率足夠大時(shí)，直接 Nearest Neighbor 拉到目標(biāo)尺寸，有時(shí)碎像素不明顯。
• 進(jìn)階：會(huì)用 shader 的話，可以參考 Cole Cecil 的非整數(shù)倍縮放文章[1] 做高質(zhì)量縮放。

盡量不要在同一畫面里混用多種像素比例，否則會(huì)讓人覺得「網(wǎng)格是隨便定的」。若必須混用：

• 整數(shù)倍關(guān)系（如 1x 和 2x），不要用 1.5x、150% 等。
• 不要超過兩種比例。
• 不同分辨率放在不同「畫布」上、分開區(qū)域（例如 UI 一層、游戲世界一層）。

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

參考資料

Cole Cecil 的非整數(shù)倍縮放文章: https://colececil.io/blog/2017/scaling-pixel-art-without-destroying-it/

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