【Unity6】2Dドット絵ゲームの作成時に必要な設定

この記事では、Unity6で2Dドット絵(ピクセルアート)ゲームを作成するために必要になる、Pixel Perfect CameraやTexture2Dの各種設定やスプライトシート画像データの取り込み方法についてまとめています。

プロジェクト作成
ドット絵画像のインポートと設定
Pixcel Perfect Cameraの設定
動作確認用：プレイヤーキャラ作成
動作確認用：タイルマップの作成

プロジェクト作成

まずはUnityHub：プロジェクト＞New project　から、プロジェクトを作成します。
例ではコアテンプレートには「Universal 2D」を選択していますが、ビルトインの「2D」でも問題ありません。

プロジェクトの作成が完了し、以下のような画面が表示されていればOKです。

ドット絵画像のインポートと設定

ドット絵画像のインポートと、表示のために必要な設定を行っていきます。

今回はAssetsフォルダ直下に「Sprites」というフォルダを作成し、その中に読み込みたい画像をインポートします。
(解説用にシンプルにしているため、フォルダ名や配置などの構成は任意です)

ドット絵画像(Texture2D)のインポート

Unityでは、インポートしたい画像をフォルダへドラッグアンドドロップすればインポートが可能です。

UnityではPascalCaseを使うことが多いようですので、アセット名も「RedBall」へ変更しておきます。
アセットを選択してF2 (または右クリック→名前を変更)で、名前変更ができます

スプライトシートの読み込みとスライス

同様に、複数の画像が含まれるスプライトシートの例もインポートします。
Unityでは背景が投下されている場合、以下のようにある程度自動でスプライトを切り抜いて認識してくれますが、手動での設定方法についても確認しておきます。

スプライトシート画像を選択し、インスペクターから「スプライトエディターを開く」をクリックします。

以下のようなウィンドウが開いたら、上部にある「スライス」をクリックします
※この時点ではUnityが自動で切り抜いているため、画像ごとにサイズが違い、キャラクターのスプライトには不向きです
　(アイテムのアイコンなどをまとめたスプライトシートでは、自動切り抜きが便利な場合もあります)

タイプを「自動」から「Grid By Cell Size」へ変更し、ピクセルサイズ等をスプライトシートのサイズに合うように調整後、「スライス」ボタンをクリックします。

警告メッセージが出ますが、これはすでに画像を何らかの形で使用している場合の注意のため、継続で問題ありません。

スライスが完了すると、以下のように均等な画像サイズで区切られていることが確認できます。
また、区切りを選択することで、その画像ごとに名称などのパラメータを設定することも可能です。
（今回は使用しませんが、同スプライトシートで別のアイテムやキャラを扱うときに名称設定は便利です）

最後に、スプライトエディタ上部の「適用する」をクリックし、エディタを閉じればスライスの設定は完了です。

ドット絵用のTexture2D設定

インポートしたスプライト画像(Texture2D)をシーンにドラッグアンドドロップすると、そのテクスチャが設定された2Dスプライトオブジェクトが作成・配置されます。

この時点では、配置されたドット絵の画像がかなり小さく、Unity側がデフォルトの描画を滑らかにする(Bilinear:バイリニア)フィルター処理を行ってしまい、左の画像のようにドット絵がぼやけた表示になっている状況かと思います。
以下の設定で、この状況を解決します。

インポートした画像を選択し、インスペクターからドット絵の表示のために必要な設定を行っていきます。
ポイントとなるのは以下3項目です。

単位毎のピクセル数(Pixel Per Unit)：
設定値は任意。
Unity空間における1m に何ピクセル配置されるかの設定で、使用するタイルセットの1タイル当たりのピクセル数を基準にしておくと便利そうです。
(デフォルト値は100で、例では32に設定)

フィルターモード(Filter Mode)：
ドット絵ではポイント(フィルター無し)に設定。
他のフィルタが有効だと、ドット絵のような低解像度の画像ではぼやけた表示になってしまいます。

圧縮(Compression)：
この設定は任意ですが、確実にドット絵を表示するため、ここでは「なし」に設定しています。
(圧縮が有効な方が処理速度の面では有利です)

設定変更後、適用を行うと、以下のように、単位毎のピクセル数(Pixel Per Unit)に対応したサイズで、ドット絵がぼやけることなく表示されます。

Pixcel Perfect Cameraの設定

次に、カメラの設定を行います。
ヒエラルキーから使用しているカメラオブジェクト（Main Cameraなど）を選択し、インスペクター下部のコンポーネントを追加から、「Pixel Perfect Camera」を追加します

Pixel Perfect Cameraコンポーネントが見つからない場合

Pixel Perfect Cameraは、最新版ではデフォルトで導入されているようですが、もし見つからない場合は、PackageManagerから2D Pixel Perfect をインストールすることで使用可能になります。

追加したPixel Perfect Cameraのプロパティを以下のように設定していきます。
　・AssetsPixelsPerUnit ：アセットのユニットごとのピクセル数。画像インポート時に設定したものと同値に設定
　・ReferenceResolution ：アセット側で意図されている解像度。ゲーム画面として使用したい解像度を設定。
　・CropFrame　　　　　：設定したReference Resolutionに合わせた切り抜き設定。ここでは「なし」に設定。
　・GridSnapping　　　　：ピクセルの表示スナップ設定。「PixelSnapping」に設定。(サブピクセル単位の移動を防止)

※上記の設定は一例です。作成するゲームの解像度や実現したい描画によってより適切なカメラ設定があるため、詳細は下記マニュアルにて一読ください

2D Pixel Perfect | Universal RP | 14.0.2

以降「動作確認：」は動作確認のためのオブジェクト実装手順のまとめで、ドット絵の取り扱い設定とは無関係です。
すでにプロジェクトデータをお持ちの方や情報として不要な方は読み飛ばしていただけますと幸いです。

動作確認用：プレイヤーキャラ作成

表示挙動を見るため、簡単な移動ができるキャラクターとタイルマップを作成します。

任意のスプライトを割り当てたオブジェクトに、Rigidbody2D、CapsuleCollider2Dを追加します。
Rigidbody2Dの回転を固定：Z　を有効にし、CapsuleCollider2Dのコライダーの編集ボタンから、形状をスプライト画像に合わせて調整します。

続けて、同オブジェクトにコンポーネントを追加＞New scriptから、「PlayerMovement」という名前で新規スクリプトを追加します。

インスペクターから作成したスクリプトはAssets直下に配置されるので、「Scripts」フォルダを作成して移動しておきます

スクリプトは以下のように記述します。(左右移動とスペースキーでのジャンプのみが可能な最小限の構成です)

using JetBrains.Annotations;
using UnityEngine;

public class PlayerMovement : MonoBehaviour
{
    public float moveSpeed = 5f;
    public float jumpForce = 10f;

    private Rigidbody2D rb;

    void Start()
    {
        rb = GetComponent<Rigidbody2D>();
    }

    void Update()
    {
        // 移動
        float moveInput = Input.GetAxisRaw("Horizontal");
        rb.linearVelocity = new Vector2(moveInput * moveSpeed, rb.linearVelocity.y);


        // スペースキーを押したときにジャンプ
        if (Input.GetKeyDown(KeyCode.Space))
        {
            rb.linearVelocity = new Vector2(rb.linearVelocity.x, jumpForce);
        }
    }
}