もくじ
Unityでドット絵を使う前に知っておきたいこと
本記事では、ドット絵のSprite設定、Pixel Perfect Cameraの追加、ピクセルフォントへの変更等の手順やヒントを記載します。これらはUnityでドット絵を使って2Dゲームを制作する際に必要となるテクニックでしょう。
今回、ドット絵を使った2DゲームをUnityで制作するノウハウとして下記のウェブページを参考にしました。
ドット絵をUnityにインポートする
前のページでエクスポートした4つのPNGファイルをProjectのSpriteフォルダにドラッグ&ドロップしUnityにインポートします。インポート手順はこれだけです。( 3.1)
3.1 Assets - Project
ドット絵を鮮明に表示するためのスプライト設定
インポートしたSpriteアセットをSceneビューにドラッグ&ドロップしてゲームオブジェクト化します。もしくは、サンプルのゲームオブジェクトを利用する場合は、既に配置されているゲームオブジェクトを選択し、Sprite RendererコンポーネントのSpriteパラメータのボックスから直接変更したいSpriteを選択します。
Sceneビューに配置したゲームオブジェクトのドットの形がぼやけて表示されます。ドットが鮮明に表示されるように各SpriteのInpectorウィンドウで設定を変更します。( 3.2)
各SpriteのInspectorを表示させ、Pixels Per Unitはすべて16pxにします。Enemy用のドット絵を16x16で作成したので1ユニットのサイズを16pxにしています。
Filter Mode
デフォルトの場合、Filter Modeは「Bilinear」に設定されていますので、「Point(no filter)」に変更します。変更するとSpriteのドットのぼけが消えてきれいに表示されます。( 3.3)
3.2 Default Settings
3.3 Filter Mode - Inspector
Compression
圧縮がかかっていると色がにじむ感じになります。( 3.4)
InspectorのCompressionパラメータを「Normal Quality」から「None」に変更するとこの色のにじみが解消されます。( 3.5)
3.4 Compression: Normal Quality
3.5 Compression: None
Pivot Unit Mode
Inspector内のボタンをクリックしてSprite Editorを起動し、Pivot Unit Modeを「Nomalized」から「Pixels」に変更します。( 3.6)
Increment Snapping
Increment Snappingの設定をPixel Per Unitに合わせます。スプライトのピクセル化された動きを相互に揃えるために、プロジェクトに適切なスナップを設定する必要があるとのことです。いまいち効果が不明ですが、とりあえずマニュアルに沿って設定します。( 3.7)
3.6 Pivot Unit Mode - Sprite Editor
3.7 Move - Increment Snapping
Pixel Perfect Cameraを追加する
Main CameraオブジェクトにPixel Perfect Cameraコンポーネントを追加します。旧バージョンのコンポーネントとURP用のコンポーネントがあり、ここではURP用のものを選びます。コンポーネントの名前が同じなので分かりづらいですが、一旦どちらかを追加してみて警告が出る場合は旧バージョンとなりますので、以下の警告が表示されているコンポーネントを削除して別の方を追加しなおすとよいでしょう。( 3.8)
Pixel Perfect Camera in the 2D Pixel Perfect package isn't compatible with Scriptable Render Pipeline. If you are using the Universal Render Pipeline, you can swap this for the Pixel Perfect Camera component that ships with URP.
Pixel Perfect CameraコンポーネントのAssets Pixel Per UnitはSpriteに設定している値を入力します。全てのSpriteはこれと同じ値にする必要があります。また、Reference Resolutionに想定するゲームのピクセルサイズを入力します。今回はX: 256, Y: 160を設定しました。( 3.9)
3.8 Pixel Perfect Camera for old package
3.9 Pixel Perfect Camera for URP
ここでGameビューを見ると下記のようなエラーが表示されていました。詳細はわかりませんが、このままだと正しく動作しないようです。( 3.10)
Rendering at an odd-numbered resolution (888 * 555). Pixel Perfect Camera may not work properly in this situation.
確認したところ、Gameビューの画面をアスペクト比で設定していたことが原因で意図しない動作になっていたようです。これを適当な固定解像度(Fixed Resolution)にするとエラー表示が消えました。Aspect RatioではなくFixed Resolutionで設定する必要があるということがわかりました。そこで実サイズと同じ解像度の256x160を設定したところ、エラー表示が消えてGameビューの見た目も意図したサイズで表示できました。( 3.11)
3.10 Game View Error - Pixel Perfect Camera
3.11 Fixed Resolution - Game View
上記の設定後、ゲームを実行してみましたが、スプライトの回転角度によってドットが潰れてしまい、一部おかしな表示が見られました。( 3.12)
Gameビュー上の表示の問題かもしれないと思い、Gameビューの画面サイズを256x160から2560x1600のサイズに変更しました。拡大されて粗が見えなくなっただけかもしれませんが、見た目上は問題なく表示されるようになりました。( 3.13)
3.12 256x160 - Game View
3.13 2560x1600 - Game View
ゲーム実行結果をビデオに録画しました。Pixel Perfect Cameraの効果が反映されているのか分かりませんが、スムーズに動いてはいるようです。スプライトの回転時に少し形が崩れているように見えます。Pixel Perfect Cameraの動作にはクセがありそうなので試行錯誤が必要かもしれません。( 3.14)
3.14 Game Play Preview
ピクセルフォントに変えてみる
UIのテキストをピクセルベースのフォントに変えてみます。今回、itch.ioで入手できるM4TTBITさんのフォントを使用しました。
TTFのフォントファイルをダウンロードしてUnityプロジェクトにインポートします。メニューからWindow > TextMeshPro > Font Asset Creatorを起動し、Text Mesh Proで使用できるようにフォントを変換します。SDFファイルが出力されますので、Text Mesh Proのテキストコンポーネントで出力したフォントを設定します。( 3.15)
3.15 Font Asset Creator - Text Mesh Pro
サンプルプロジェクトのフォントは通常のアンチエイリアスがかかった状態です。これでも悪くはないでしょう。( 3.16)
ピクセルフォントに変更後のGameビューの表示です。ちょっとフォントサイズ等は微調整しています。やはりドット絵のゲームにはピクセルフォントの方がドット絵の雰囲気がよく表現されるのではないでしょうか。( 3.17)
3.16 Default Font - Game View
3.17 Pixel Font - Game View