もくじ
ドット絵の種類
サンプルゲームで使用している2Dスプライトを自作のドット絵で差し替えます。2Dゲーム内でスプライトとして使用されているグラフィックアートは以下の3つです。
- Player (中心に配置されているプレイヤーキャラクター)
- Enemy (自動生成でプレイヤーにアタックする敵キャラクター)
- Background (背景イメージ)
ドット絵の作成にはピクセルアート向けの制作ツールであるAsepriteを使用します。PhotoshopやClip Studio Paintなど他のペイントツールを使用してもドット絵の作成は可能です。ここではツールの細かい使い方は説明しません。機会があれば、Asepriteの使い方は別途まとめたいと思っています。
ドット絵のサイズ
ドット絵の場合、最初に各スプライトの基準となるピクセルサイズをあらかじめ決めておくか頭に入れておく必要があります。解像度の高い2Dグラフィックを使用する場合は、最初から厳密にサイズを意識する必要はないと思いますが、ドット絵の場合、後で各スプライト間の大きさが異なるからといって単純に拡大縮小で調整することが難しくなります。作成後に修正する場合、ピクセル単位での調整が必要になったり、異なるサイズに変更して作り直すことになるでしょう。そのため、各スプライトのピクセルサイズを最初に規定しておく方が後々のゲーム制作のなかで困らないと思います。
ピクセルサイズの決め方は色々あると思いますが、ここではスクリーンサイズを基準にして決めていきます。サンプルゲームで使用されている背景イメージの大きさは1920 x 1080で、各SpriteのPixel Per Unitはデフォルトの100ピクセルで設定されています。( 2.1)
Pixel Per Unitとはシーン上での1ユニット当たりのピクセルサイズのことです。これはUnity上で使われる大きさの単位となります。実はこの単位がUnityの処理やゲーム表現上で独特なクセを発生させていると思っています。とりあえず、今のところはUnityの単位として頭に入れておくだけで良いでしょう。
サンプルゲームの背景イメージのアスペクト比に合わせ、まずは16:9を基準にスプライトのサイズを決めていきます。ドット絵の場合、Pxiel Per Unitは16、32、64あたりを設定するのが一般的です。今回は1ユニット16x16を基準にしたいので各SpriteのPixel Per Unitは16に設定します。ちなみに1つのゲームプロジェクト内の各SpriteでPxiel Per Unitの設定を異なる値にしてしまうと見え方が異なる縮尺で表示されるので、通常は同じ値に揃えた方が良いです。ドットサイズの大きさの違いによる世界観を表現したい時はわざと異なる値を設定するというのも面白いかもしれません。
Pixel Per Unitを16pxにして、アスペクト比を16:9にすると、シーン上のヨコ：タテのユニット数が約18:10になります。Pixel Per Unitが16pxですので、背景イメージのタテを160pxとした場合、ヨコは284.444444...という割り切れない中途半端なサイズになります。
そのまま中途半端なサイズ感でも良いのですが、アスペクト比を分かりやすく16:10に変更しようと思います。その場合、背景イメージのサイズはヨコ：256px、タテ：160pxとします。( 2.2)
2.1 Inspector - Sprite
2.2 Scene Window
今回、Pixel Per Unitの16pxに合わせる形でアスペクト比を16:10で背景イメージのタテのサイズを160pxにしましたが、現在の一般的なモニタのアスクペクト比である16:9をそのまま使用し、ヨコ：256px、タテ：144pxを基準にする方がわかりやすいもしれないと後々思いました。
Unityで処理する際のドットサイズに関しては便利な計算ルールがあるのかもしれませんが、Unity上でピクセルサイズを気にし始めるとあまり精神衛生上良くありませんので、最後、適度に合わせるぐらいの気持ちを持っていた方が良いと思います。僕もまだUnityでのドット絵を使ったゲーム作りは始めたばかりなので、色々と試行錯誤しながらドット絵のサイズ感について学ぶつもりです。
ドット絵の完成図
最終的に各ドット絵のピクセルサイズは以下の通りにしました。また、それぞれAsepriteでの仕上がりを掲載しておきます。
Player
ピクセルサイズ：48 px x 48 px
プレイヤーの形状を様々な形にすればゲーム難易度を変えることが可能でしょう。( 2.3)
Enemy
ピクセルサイズ：48 px x 48 px
こちらも同様に様々な形状を作成すれば難易度の変化が可能だと思います。( 2.4)
2.3 Player - Aseprite
2.4 Enemy - Aseprite
Background and Foreground
ピクセルサイズ：256 px x 160 px
前景（ブルー）と後景（グレー）で別々のレイヤーとして描画します。( 2.5)
2.5 Background and Foreground - Aseprite
各ドット絵は完成したらPNGフォーマットでExportしておきます。