ぼやける Sprite Sheet の直し方
sprite sheet の PNG はくっきりしているのにゲーム内でぼやける場合、原因は多くの場合エクスポートではありません。texture filtering、mipmap、compression、端数スケール、フレームの sampling が原因です。このガイドでは Unity、Godot、Phaser、CSS で最初に確認すべき設定を順番に整理します。
30 秒で切り分ける
まず、書き出した PNG をブラウザや画像ビューアで 100% 表示してください。そこでくっきりしているなら、sprite sheet 自体は問題なく、import 後の設定でぼやけています。ファイル時点ですでにぼやけているなら、元フレームが拡大縮小やアンチエイリアス付きで書き出されています。runtime のぼけはエンジン設定で直し、source のぼけはフレームを書き出し直します。
PNG はくっきり、エンジンでぼやける
filter mode、mipmap、compression、camera scale、pixel snapping を確認します。これらを見る前に再パックしないでください。
PNG 自体がぼやけている
元の pixel art をネイティブ解像度で再書き出しします。sprite sheet 化の前に bilinear resize しないようにします。
ぼけは多くの場合エクスポート後に起きる
よくある 5 つの原因
sprite がぼやける原因は、だいたい次の 5 つです。最初の 2 つで多くの pixel art 問題は解決するため、この順番で確認してください。
linear / bilinear filtering
拡大縮小や移動時に隣のピクセルを混ぜます。pixel art では nearest、point、pixel-art filtering に切り替えます。
小さい 2D アートへの mipmap
mipmap は縮小版 texture を作るため、pixel sprite や UI atlas を柔らかく見せることがあります。
texture compression
lossy compression は硬いピクセル境界をにじませ、色の artifact を作ります。pixel art や UI では compression を無効化します。
端数 scale や camera movement
16x16 sprite を 23.5px で描画したり camera が subpixel 移動したりすると、texel 間を sampling します。
frame padding と bleeding
フレームが近すぎると隣の frame のピクセルを拾います。filtering を使う atlas では padding や extrusion が役立ちます。
最初に見るエンジン設定
Unity: Point Filtering と Compression None
Unity では import した sprite sheet texture を選び、Inspector を確認します。pixel art なら Filter Mode を Point、Compression を None にし、通常の 2D sprite では Generate Mip Maps を無効にします。それでも柔らかい場合は camera や canvas scaling を確認し、Pixel Perfect Camera や整数スケールを使います。
Texture import
Filter Mode: Point。Compression: None。Max Size は元 sheet を落とさない値。Mip Maps は通常の 2D pixel art では off。
Scene rendering
import 設定が正しくても移動中にぼやける場合、整数 scale や Pixel Perfect Camera を確認します。
Godot: Texture Filtering を Nearest にする
Godot 4 では、default の canvas texture filter や project-level import setting が原因になりがちです。sprite、canvas item、project default の texture filter を Nearest にします。まだ不安定なら scale 値と pixel snapping を確認します。
Texture filter
AnimatedSprite2D や Sprite2D の pixel art では、CanvasItem の texture filtering を Nearest にします。
Import and scale
pixel sprite には non-integer scale を避けます。grid sprite sheet では hframes と vframes が実際の行列に合っているかも確認します。
Phaser と CSS: Pixel Rendering を有効化
Phaser 3 では pixelArt: true を game config に設定します。それでも柔らかい場合は camera zoom、roundPixels、canvas が CSS で拡大縮小されていないか確認します。CSS sprites では image-rendering: pixelated を使い、background-size を実際の sheet サイズに合わせます。
Phaser 3
pixelArt: true を使い、端数 camera zoom を避けます。移動中に揺れる場合は roundPixels も検討します。
CSS sprites
要素や画像に image-rendering: pixelated を指定し、width、height、background-position を整数値にします。
再パックが本当に効く場面
filtering と scaling が正しいのに edge artifact が出る場合、再パックが役立ちます。frame 間に padding を追加し、engine が trimming metadata を読めない場合は uniform frame を使います。grid slicing ではすべての cell サイズを完全に揃える必要があります。
atlas に padding を追加
2-4px の padding は filtering や camera movement 時に隣の frame がにじむのを防ぎます。
grid math を正確に
frameWidth と frameHeight で切る場合、全 cell が完全に同じサイズである必要があります。
ぼやける Sprite Sheet FAQ
runtime 設定を直してから再パックする
Sprite Sheet Maker で clean な PNG と metadata を書き出し、エンジン側で filtering、scale、padding を正しく設定してくっきり再生します。