ピクセルアートがぼやける原因と直し方

ピクセルアートは制作時より、表示時にぼやけることが多いものです。ファイルは鮮明でも、ブラウザやゲームエンジンが小数倍率で表示し、隣のピクセルを混ぜてしまいます。

修正では、どの工程で補間が入ったかを探します。

ファイルを100%で確認

PNGを元の寸法で開きます。各ブロックの縁が硬ければ書き出しは正常です。すでに柔らかい場合は、再サンプリングせず元データから書き出し直します。

128×128の画像をビューアが700pxに自動フィットした状態で判断しないでください。100%、200%など整数ズームを使います。

整数倍率で拡大

64pxは128、192、256pxへきれいに拡大できます。150pxでは各ピクセルが同じ画面幅を持てず、混合や不均一な配置が発生します。

可能なら2倍、3倍、4倍を使います。固定の特殊サイズが必要なら、そのサイズ向けのグリッドを作る方が安全です。

ブラウザの平滑化を止める

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

CSSで硬い拡大を指定できますが、幅と高さも適切に設定します。親要素の scale(0.9) などは、整数幅の画像をサブピクセルへ動かすことがあります。

ツールとゲームエンジンを確認

画像編集ソフトでは、写真向けのバイリニアではなくニアレストネイバーを選びます。ゲームでは小数カメラ倍率、半端な座標、テクスチャ圧縮、mipmap、UIの小数スケールを確認します。

プレビューのスクリーンショットは使わず、PixelTool からPNGかSVGを直接書き出してください。

透明画像の縁に明暗の輪がある場合は、半透明ピクセルも疑います。白と黒の両背景で確認します。

確認する順番

1. 100%で書き出しを確認。
2. 表示サイズが整数倍率か確認。
3. ニアレストネイバーまたは pixelated を有効化。
4. 小数変形とカメラ位置を除去。
5. フィルタ、圧縮、mipmapを見直す。
6. スクリーンショットではなく再書き出し。

一度に一項目だけ変えます。ぼけが消えた工程が、恒久的に直すべき場所です。