ゲーム「DRESS」の開発記録②　Sprite Libraryを用いて表情に変化をつける

Unityのバージョン : 2021.3.27f1

前回は主人公「ミライ」のpsbファイルをインポートし、ボーンを加えるところまで行いました。実際の開発では細かいタスクが多いので全てを紹介することはできませんが、重要そうなところのみブログにしていきたいと思います。

今回の記事ではアニメーションを作成する前に、Sprite Libraryを用いた画像差分の実装を行いたいと思います。

Sprite Libraryはスプライトアニメーション（スプライトの切り替えのみで行うアニメーション）や差分を実装するのによく使う機能です。

今回は大まかに分けて、

③Sprite Library Asset

の3つを使います。

まずは前回インポートしたpsbファイルをHierarchyウィンドウにドラッグ&ドロップします。

差分を同じpsbファイルに重ねていると、下図のように全てのレイヤーが含まれていると思います。メインとなるオブジェクト以外は非表示にしておきましょう。（というか削除してしまって構わないと思います）

次に親オブジェクト（ここでいえば「ミライ試作_0624」）にSprite Libraryコンポーネントをアタッチします。Inspectorウィンドウが画像のようになっていればOKです。

次にProjectウィンドウの任意の場所にSprite Library Assetを作成します。

右クリックしてCreate>2D>Sprite Library Assetから作成可能です。

その後、Inspectorウィンドウに差分となる画像セットにラベル名を付けてカテゴリを作成します。ここでいえば、

カテゴリ：Eyes　ラベルと画像：OpenとCloseの２種類

になります。

Sprite Library Assetを作成したら、先ほど親オブジェクトにアタッチしたSprite Libraryコンポーネントにセットします。すると図のようにAssetで設定したカテゴリとラベルが表示されるはずです。

先ほど作成した差分に切り替えたい子オブジェクト（ここでいえば「00_Eye_Open」）にSprite Resolverコンポーネントをアタッチします。親オブジェクトに先ほどのSprite Libraryコンポーネントがアタッチされていれば、図のようにカテゴリを選択できるはずです。

ラベルを切り替えると、（差分画像をクリックするだけでOK）実際にSceneウィンドウのキャラクターの目が開閉すると思います。アニメーションの際にはこれを用いて瞬きを表現します。

同様の手順で、別のカテゴリを設定することができます。ここでは口の開閉差分についての実装をまとめておきます。

①Sprite Library Assetに新しいカテゴリ/ラベルを追加する

②口の子オブジェクトにSprite Resolverコンポーネントをアタッチしてカテゴリーを「Mouse」にセットする

これだけで口についても差分を切り替えることができるようになりました！

ミライは試作版ではありますが他にも差分画像がたくさんあるので、アニメーションを作るために全て実装しておきます。

今回はSprite Libraryを用いて差分を切り替えられるようにしました。

次回はアニメーションの作成手順について記事にしたいと思います。それでは✨

今回参考にさせていただいた記事や動画はこちらです↓

綴季の開発日誌