こんにちは、Unityエンジニアのオオバです。

あまり2Dゲームを作ったことが無い、というか全く無かったため、勉強がてら2Dキャラクタを動かしたりしています。

2Dキャラを作る際にまずは画像が必要になってきますが、コチラをSpriteシートとして扱うことで1枚の画像でキャラクタのパーツやモーションフレームを生成することが出来ます。
パーツ分、別テクスチャを使ってしまうとその分ドローコールが発生してしまいますが、同じテクスチャとして扱えるSpriteだと1度の描画で表示できるためとても負荷的にエコです。

👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう!

Sprite設定のおさらい

Spriteを作る方法は簡単です。今回は1枚の画像に複数のSpriteを内包する方法をとります。

1枚の画像に複数のSpriteを保持するMultipleモードを使う_0

Spriteとして扱うパーツを1枚絵にした画像を用意します。

1枚の画像に複数のSpriteを保持するMultipleモードを使う_1

Texture TypeSpriteに設定。Sprite ModeMultipleに設定し、Sprite Editorを開いてSpriteの設定をします。

1枚の画像に複数のSpriteを保持するMultipleモードを使う_2

各パーツの範囲やピボット位置を決めて名前を設定していきます。

1枚の画像に複数のSpriteを保持するMultipleモードを使う_3

するとこのようにSpriteアセットとして参照を取得し、使用できるようになります。そのままヒエラルキーにドラッグアンドドロップすると画面に表示されます。

👉 今さら聞けないUnityのヒエラルキー(Hierarchy)とは?

本記事はSpriteを作る元画像をどのように管理すればよいのかを考察しています。

ゲーム制作には様々な素材が必要です。

オオバの想定だとplayer.psd、stage.psd、enemy.psd...各Spriteの元画像毎にそれぞれアトラスが作られるのかと思ったのですが、そうではありませんでした。

1枚の画像に複数のSpriteを保持するMultipleモードを使う_4

今回制作した複数のPSDファイルからアトラス画像を生成した例です。

a.psdb.psdc.psdd.psd
1枚の画像に複数のSpriteを保持するMultipleモードを使う_5
1枚の画像に複数のSpriteを保持するMultipleモードを使う_5
1枚の画像に複数のSpriteを保持するMultipleモードを使う_5
1枚の画像に複数のSpriteを保持するMultipleモードを使う_5

これらのPSDのPacking Tagを同じ文字列にします。
すると以下のように1枚にまとめられます。

アトラスにパック後の画像

1枚の画像に複数のSpriteを保持するMultipleモードを使う_6

パック後のアトラス画像はWindow > Sprite Packerから確認できます。

Packing Tagさえ同じであれば良いので、Spriteの元画像は自由に構成して問題なさそうです。しかし、元画像Spriteパーツの配置が変わっても追随してくれるわけで無いところは注意が必要ではあります。

Sprite元画像のファイル形式について

Unity は次のファイル形式を読み込みできます。 PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, PICT, EXR, HDR です。Unity により複数レイヤーの PSD や TIFF ファイルも問題なくインポートできます。これらはインポート時に自動的に統合化されますが、レイヤーはアセット自体に保持されるため、これらのファイル形式をネイティブで使用するときにデータを失うことはありません。

公式より

以上のことからPhotoshopを持っているならPSDで良いと思います。

1枚の画像に複数のSpriteを保持するMultipleモードを使う_7

こんな感じでパーツを小分けにして配置しました。

完成

1枚の画像に複数のSpriteを保持するMultipleモードを使う_8

オススメ記事
検証環境