像素畫為什麼會模糊？常見原因與修正方法

像素畫通常在建立後而不是建立時變得模糊。該銼刀可能非常鋒利。然後瀏覽器、設計應用程式或遊戲引擎以分數大小顯示它並混合相鄰像素。

解決方法是找到插值進入管道的位置。

以 100% 檢查文件

以原始尺寸打開匯出的 PNG。如果每個區塊都有硬邊，則匯出沒問題。如果已經變軟，則傳回來源並匯出，無需重新取樣。

當圖片檢視器自動將其適合 700 像素視窗時，請勿判斷 128×128 圖片。將視圖設定為 100%、200% 或其他整數縮放。

以整數縮放

64 像素圖片可輕鬆縮放至 128、192 或 256 像素。在 150 像素時，每個來源像素無法佔據相同數量的顯示像素。渲染器必須混合或不均勻地分佈它們。

只要佈局允許，就使用 2×、3×、4× 和其他整數倍。

如果目的地具有固定的尷尬大小，請考慮為該目的地建立像素網格，而不是將現有資源強行放入其中。

禁用瀏覽器平滑

對於網站上的像素畫，CSS 可以要求硬邊縮放：

.pixel-art {
  image-rendering: pixelated;
}

仍然給出圖片合理的寬度和高度值。 image-rendering有助於取樣方法；它不能使分數幾何變得理想。

也要檢查父元素是否使用 CSS 轉換，例如「scale(0.9)」。即使其聲明的寬度看起來正確，變換也可以將圖片移至子像素上。

檢查設計工具和遊戲引擎

許多編輯器預設使用雙線性或雙三次調整大小，因為這些方法對於照片來說看起來不錯。調整像素圖大小時選擇最近的鄰居。

在遊戲引擎中，停用紋理過濾並注意：

• 非整數相機變焦；
• 放置在螢幕像素之間的精靈；
• 紋理壓縮；
• 自動 mipmap；
• 依分數因子縮放的 UI 畫布。

如果相機在像素之間進行取樣，那麼清晰的來源就無法保持清晰。

避免螢幕截圖工作流程

不要透過預覽螢幕截圖來製作像素畫檔案。瀏覽器可能已經縮放了預覽，並且作業系統可能會新增顯示縮放。

直接從 PixelTool 匯出為 PNG 或 SVG。如果您需要更大的 PNG，請選擇適當的輸出尺寸，而不是放大螢幕截圖。

尋找光暈，而不僅僅是模糊

透明藝術品周圍的淺色或深色邊緣是一個相關問題。它通常來自背景去除或調整大小期間建立的半透明邊緣像素。

檢查黑白背景上的圖片。對於經典的硬邊精靈，邊緣像素通常應該是完全不透明或完全透明。

簡短的偵錯指令

1. 以 100% 檢查匯出的文件。
2. 確認顯示的尺寸為整數倍。
3. 啟用最近鄰渲染或像素化渲染。
4. 刪除分數變換和相機位置。
5. 在適當的情況下停用過濾、壓縮或 mipmap。
6. 重新匯出而不是截圖。

一次改變一個階段。一旦柔軟度消失，您就找到了管道中需要永久設定的部分。