Unity GameCanvasで画像の一部を切り取って描画する手順（スプライトシート）

GameCanvas for Unity は、慶應義塾大学『スマートデバイスプログラミング』にて教材として使われている 2Dゲームフレームワーク です。
引用元：https://github.com/sfc-sdp/GameCanvas-Unity

概要

この記事では、Unity GameCanvas を使って、画像（スプライトシート）の一部を切り取り、gc.DrawImage() で描画するまでの手順をまとめてます。

手順

1. スプライトシートを用意する

まず、使用するスプライトシート画像を用意します。今回は、スマートデバイスプログラミング第4回「Unityで開発してみよう（その3、表示編）」の k04_res2.zip に含まれているスプライトシートCharacter_L.pmgを使用します。

スマートデバイスプログラミング第4回「Unityで開発してみよう（その3、表示編）」の授業資料はこちら

2. Assets/Res に画像を入れる

Unity プロジェクトを作成し、Assets/Res フォルダにスプライトシートを入れます。GameCanvas では、Assets/Res に入れた画像がリソースとして扱われます。

3. Sprite Mode を Multiple に変更する

Assets/Res に入れたスプライトシートを選択し、Inspector (インスペクター) を確認します。
Sprite Mode (スプライトモード) を Multiple (複数) に変更します。
変更したら、Inspector (インスペクター) の下にある Apply (適用) を押します。

4. 2D Sprite Package をインストールする

Sprite Editor (スプライトエディター) を使うために、2D Sprite Package をインストールします。
スプライトシートを選択した状態で、Inspector (インスペクター) に表示される Install 2D Sprite Package (2D Spriteパッケージをインストール) をクリックします。

または、以下の手順でもインストールできます。

Window → Package Manager → Unity Registry → 2D Sprite

Inspector (インスペクター)が以下の画像のようになっていれば成功です。

5. Sprite Editor を開く

インストールが完了すると、Inspector (インスペクター) に Open Sprite Editor (スプライトエディターを開く) が表示されます。
それをクリックして、Sprite Editor (スプライトエディター) を開きます。

6. スプライトを切り取る

Sprite Editor (スプライトエディター) の左上にある Slice (スライス) を押します。
スライス方法は、画像に合わせて選びます。

Automatic
Grid by Cell Size
Grid by Cell Count
Isometric Grid

画像がきれいに分かれている場合は、Grid by Cell Size や Grid by Cell Count が使いやすいです。

手動で切り取りたい場合は、Sprite Editor (スプライトエディター) 上で直接範囲を指定することもできます。

7. 名前や Pivot を確認する

切り取りが終わったら、スライスした画像を選択し、Sprite ビューを確認します。
必要であれば、各スプライトの名前や Pivot (ピボット) を変更します。
今回は特に変更しません。
自動生成された名前をそのまま使う場合、画像名は 元のファイル名_n の形式になります。n は0から順番に付けられる番号です。

8. Apply を押して保存する

設定が完了したら、右上の Apply (適用) を押します。
その後、Sprite Editor (スプライトエディター) を閉じます。

9. GameCanvas のリソース定義を更新する

Unity のメニューバーから GameCanvas を選択し、リソース定義の強制更新 を押します。
これで、切り取った画像が GcImage に登録されます。

10. gc.DrawImage() で描画する

GcImage に登録された画像は、以下のように描画できます。

public override void DrawGame()
{
    gc.DrawImage(GcImage.Character_L_0, 100, 100);
}

基本形は以下です。

gc.DrawImage(GcImage.画像名, x座標, y座標);

リソースが登録されているか確認する方法

画像が正しく登録されているか確認したい場合は、以下のファイルを確認します。

Assets/GameCanvas/AutoGeneratedScripts/GcImage.cs

GcImage.cs に画像名が追加されていれば、以下のように呼び出せます。

GcImage.画像名

⚠️注意点⚠️

GameCanvas では、ファイル名の先頭が小文字の場合、自動生成される名前の先頭が大文字になります。

例えば、Res フォルダに以下のような画像を入れた場合、

player.img

以下のようには呼び出せません。

gc.DrawImage(GcImage.player, 0, 0);

その場合は、先頭を大文字に変えて呼び出しませます。

gc.DrawImage(GcImage.Player, 0, 0);

画像名が GameCanvas 上でどのように登録されているかは、GcImage.cs を確認すると確実です。

まとめ

Unity GameCanvas でスプライトシートの一部を描画する流れは、以下の通りです。

1. スプライトシートを Assets/Res に入れる
2. Sprite Mode (スプライトモード) を Multiple (複数) にする
3. Sprite Editor (スプライトエディター) で画像を切り取る
4. GameCanvas → リソース定義の強制更新 を押す
5. gc.DrawImage(GcImage.画像名, x座標, y座標) で描画する

うまく表示されない場合は、まず GcImage.cs を確認して、画像名がどのように登録されているかを見ると原因を見つけやすいです。