Free Game Tool

ドット絵がぼやける原因は1つではない

Unityでドット絵を表示したら、全体がふんわりにじんだり、ドットの幅が不揃いになったり、動かすとチラついたりすることがあります。原因は1つとは限らず、大きく次の4つに分けられます。

• 画像の取り込み設定:スプライトのインポート設定が、ドット絵に合っていない。
• 拡大のしかた:カメラや画面の拡大率が整数倍になっていない。確認用の表示倍率が原因のこともある。
• 動かしたとき:動きや回転によって、ドットの位置や形が崩れる。
• 素材そのもの:取り込む前の画像の時点で、すでに劣化している。

この記事では、症状から原因を探し、確認する順番がわかるようにまとめます。Pixel Perfect Cameraの仕組みやPPU、Reference Resolutionの意味は、UnityのPixel Perfect Cameraとは?PPUとReference Resolutionをやさしく解説で詳しく説明しているので、あわせてご覧ください。

まず症状を見分ける

原因1:Filter Modeが「Point」になっていない

Filter Modeは、テクスチャが引き伸ばされるときに、Unityがどのようにフィルターをかけるかを決める設定です。公式ドキュメントでは、次のように説明されています。

• Point (no filter):近くで見るとブロック状に見える。
• Bilinear:近くで見るとぼやけて見える。
• Trilinear:Bilinearと同様だが、ミップマップの段階の間でもぼやける。

ドット絵は拡大して表示するのが前提なので、Bilinearのままだと、拡大した分だけ輪郭がにじみます。

直し方

1. ProjectウィンドウでスプライトのPNGを選びます。複数のスプライトをまとめて選んで、一度に変更することもできます。
2. インスペクターで、Filter Mode を「Point (no filter)」にします。
3. Apply を押して反映します。

原因2:Compressionがかかっている

Compression(圧縮)がかかっていると、色が変わったり、輪郭の周りにノイズが出たりすることがあります。1ドットの色が重要なドット絵では、この変化が目立ちます。

直し方

• スプライトのインスペクターで、Compression を「None」にします。
• プラットフォームごとの設定(Platform-specific overrides)で別の値を上書きしている場合は、各プラットフォームのタブも確認します。

原因3:そのほかのインポート設定

Non-Power of 2

Non-Power of 2は、画像の縦横の大きさが2のべき乗(16、32、64、128、256…)でないときの扱いを決める設定です。「None」以外の値にすると、取り込み時に画像が2のべき乗の大きさに拡大・縮小されます。公式ドキュメントでは、たとえば257×511pxの画像が、選んだ方式に応じて256×512pxなどに変わる例が示されています。拡大・縮小された画像は、ドットの大きさが揃わなくなります。

ドット絵では、取り込み時にサイズを変えないよう、通常は「None」にします。

Generate Mipmap

ミップマップは、テクスチャを縮小して表示するときのために、あらかじめ小さな版を作っておく機能です。縮小して表示される場面では、ぼやけて見える原因になることがあります。ドット絵は縮小せず整数倍で拡大して使うのが基本なので、通常は必要ありません。ぼやけが気になるときは、Generate Mipmap がオフになっているかを確認します。

原因4:拡大のしかた

スプライトの設定が正しくても、画面に出すときの拡大率が整数倍でないと、ドットの幅が不揃いになります。

拡大率が整数倍になっていない

たとえば、1ドットが4ピクセルで描かれる部分と5ピクセルで描かれる部分が混ざると、ドットの幅が不揃いに見えます。これは、Pixel Perfect Cameraを使っていない、またはReference Resolutionがモニターの解像度に合っていないときに起こります。仕組みはPixel Perfect Cameraの記事で説明しています。モニター解像度ごとの拡大倍率は、当サイトの「Pixel Perfect Camera 確認」ツールで確かめられます。

スプライトのPPUが揃っていない

カメラ側のAssets Pixels Per Unitと、各スプライトのPixels Per Unitが違うと、画面上の大きさが変わります。結果の拡大率が整数にならないと、ドットの幅が不揃いになります。一部の画像だけが崩れているときは、そのスプライトのPixels Per Unitを確認してください。

Game viewのScaleが1xでない

エディターのGame viewには、表示を拡大して細部を確認するためのScaleスライダーがあります。右に動かすと、画面が拡大して表示されます。マウスのホイールで意図せず動いていることもあり、実際のゲームはぼやけていないのに、エディター上でだけぼやけて見えることがあります。まずは、Scaleが1xになっているかを確認しましょう。

Low Resolution Aspect Ratiosが有効になっている

Game viewのアスペクト比のメニューにあるLow Resolution Aspect Ratiosは、古いディスプレイのピクセル密度を再現するために、アスペクト比を選んだときのGame viewの解像度を下げる設定です。有効だと、実際より粗い表示になることがあります。見え方に違和感があるときは、オフにして確認します。なお、Windowsの非Retinaのディスプレイでは、常に有効になる仕様です。

エディター上の見え方がどうしても怪しいときは、実際にビルドして確認するのが確実です。

Pixel Perfect CameraのFilter Mode(新しいバージョン)

新しいバージョンのドキュメントでは、Pixel Perfect CameraでStretch Fillを選んでいるときに限り、最終的な画像を拡大する方法(Filter Mode)を選べると説明されています。選択肢にはRetro AAとPointがあります。公式ドキュメントでは、Pointを使うと、ピクセルの配置が悪くなり、ピクセルパーフェクトでなくなることがあると説明されています。お使いのバージョンにこの項目がある場合は、設定を見直してみてください。

原因5:動かしたとき・回転したとき

動かすとチラつく、揺れる

スプライトがピクセルの途中の位置(サブピクセル)まで滑らかに動くと、フレームごとにドットの幅が変わって見えます。Pixel Perfect CameraのGrid SnappingをPixel Snappingにすると、レンダリング時にスプライトがグリッドに合わせられ、スプライトがピクセル単位で動いているように見えます。グリッドの大きさは、Assets Pixels Per Unitの値に基づきます。この設定は、ゲームオブジェクトのTransformの位置自体は変えません。

あわせて、Edit > Snap SettingsのMove X/Y/Zを、「1 ÷ PPU」の値にしておきます。くわしくはPixel Perfect Cameraの記事をご覧ください。

回転させるとドットが細かい斜めの線になる

ドット絵のスプライトを回転させると、斜めの線が元のドットより細かい解像度で描かれ、ドット絵らしさが失われることがあります。公式ドキュメントでは、Grid SnappingをUpscale Render Textureにすると、斜めの線が元の解像度のまま描かれ、ドットが四角く、まっすぐなまま保たれると説明されています。

原因6:素材そのものが原因

Unity側の設定をすべて直しても、取り込む前の画像がすでに劣化していると、きれいには見えません。

• JPEGで保存した:JPEGは非可逆圧縮で、輪郭の周りにノイズが出ます。ドット絵は、PNGで保存します。
• 拡大した画像を元データにした:描画ソフトで補間をかけて拡大した画像は、すでにドットがにじんでいます。拡大はUnity側で行うので、素材は等倍のままで取り込みます。
• 何度も形式を変換した:非可逆形式を経由すると、変換のたびに劣化します。

画像形式ごとの違いは、画像形式の違いと使い分けで解説しています。

上から順に確認するチェックリスト

原因がわからないときは、次の順番で確認します。

1. Game viewのScaleが1xになっているか。ビルドしても同じ見え方になるか。
2. スプライトのFilter Modeが「Point (no filter)」になっているか。
3. Compressionが「None」になっているか。
4. Non-Power of 2が「None」になっているか。Generate Mipmapはオフか。
5. カメラのAssets Pixels Per Unitと、各スプライトのPixels Per Unitが揃っているか。
6. Reference Resolutionが、遊ばせたいモニターの解像度に対して整数倍で収まるか。
7. 動かしたときだけ崩れるなら、Grid SnappingとSnap Settingsを確認する。
8. 取り込む前の素材が、PNGなどの劣化のない形式で、等倍のままか。

当サイトのツールで確認する

当サイトの「Pixel Perfect Camera 確認」では、PPUとReference Resolutionを入力しながら、モニター解像度ごとの拡大倍率や、スプライトのサイズがピクセルグリッドに合っているかを確認できます。スプライトごとのPPUを変えた場合の崩れ方も試せるので、原因4の確認にお使いください。画像のファイル形式を変換したいときは、「画像形式変換」もあわせてご利用いただけます。