Unityでのドット絵活用:ピクセルパーフェクト編のアイキャッチ

Unityでのドット絵活用:ピクセルパーフェクト編

前回から引き続きドット絵活用のお話。
今回はピクセルパーフェクト編!

去年末にリリースした『わんもあトラップ』でもドット絵を活用していたけど、ピクセルパーフェクトがよくわからなくて適当な実装をしていた。

1週間のゲームジャムだからね! 時間ないからね!!
で、その結果。

拡大してよく見てみると…
拡大してよく見てみると…
ドットが均一になってなくてガッタガタ!になっている もあちゃん
ドットが均一になってなくてガッタガタ!になっている もあちゃん

全然ピクセルパーフェクトでないゲームを世に解き放ってしまった。
このままでは全世界のドット絵好きさんに怒られる!

そんな訳でスピンオフ作である『わんもあファクト』ではちゃんとピクセルパーフェクトになるように見直した。

ピクセルパーフェクトになった もあちゃん! かわいい
ピクセルパーフェクトになった もあちゃん! かわいい

同じ失敗は繰り返したくない。
そこでピクセルパーフェクトのための簡単なチェックシートを作ってみた。

目次

1. 画像の拡大フォーマットがドット絵用になっているか?

画像の Filter Mode の設定が「Point (no filter)」になっているかを確認する。
ここが間違っているとドットがぼやけてしまう。

ここが「Point (no filter)」になっていないとドットがぼやけてしまう
ここが「Point (no filter)」になっていないとドットがぼやけてしまう

ちなみに前回紹介したAsepriteだとデフォルトで「Point (no filter)」になる。
できる男過ぎて惚れてしまう。

2. 表示している画像は整数倍になっているか?

UnityだとScale値に小数点を入れて画面のサイズ調整をしがち。
でもこれをドット絵画像でやってしまうと途端にガビガビになる。

Scale値はつねに整数になるように心がけよう!

3. ゲームの解像度とCanvasの設定が一致しているか?

unityroomでの解像度は「960×540」が推奨されている。
しかし『わんもあトラップ』では何故かその倍の値が入っていた……。
これによって最終的には1/2のサイズで縮小されてしまって、Scaleが奇数だとドットが崩れる状態になってしまっていた。

Canvasの解像度は、想定される最小の解像度に合わせるのが良い
Canvasの解像度は、想定される最小の解像度に合わせるのが良い

あとCanvasにはPixel Perfectの設定もあるのでこれも確認しておく。
これを有効にすることでドット絵の敵になりがちなアンチエイリアスを切ってくれる。

ドット絵を含むCanvasのPixel Perfectにはチェックを入れておくと良い
ドット絵を含むCanvasのPixel Perfectにはチェックを入れておくと良い

4. カメラがピクセルパーフェクト向けになっているか?

「2D Pixel Perfect」パッケージに含まれる「Pixel Perfect Camera」を使うと画面をいい感じにピクセルパーフェクトにしてくれる。
いろいろ便利なので、もし入っていなければ入れておきたい。

Pixel Perfect Cameraがすべてをいい感じにやってくれる
Pixel Perfect Cameraがすべてをいい感じにやってくれる

細かい使い方はマニュアルが詳しい。

おわりに

書き出してみると意外とトラップが多い!

しかしピクセルパーフェクトになったところでゲームは面白くならない。
それでも美しいドットなだけで、ドット絵を愛でる人の気持ちは癒される。

そんな細やかなところにも気を使っていきたい。

← 開発ログ