アイテム・ステータス・オプションという3つの画面を切り替えられるUIを作成しました。
ボタンでSetActiveを切り替えるシンプルな構造です。
今回はステータス画面にLive2Dモデルを表示したいと思います。
UICanvas (canvas)
– WindowItem
– WindowStatus
— TextMeshPro
— Image
— Live2DPrefab ※正常に表示されない
– WindowOption
ステータスのGameObjectにLive2DのPrefabを配置するだけでは正常に表示されません。
下記の要素が必要になります。
1. Live2Dモデル Prefab (Live2Dファイルをインポートすると自動生成されます)
2. Live2D用の新規カ メラ (1だけを撮影する専用カメラです)
3. RenderTexture (2が撮影するLive2Dの映像をテクスチャ上に反映します)
4. RawImage (3のテクスチャをImage上に表示します)
つまりLive2DのPrefabを直接Canvasに配置するのではなく、RawImageをCanvasに配置して、そこにLive2Dを映し出すという手順になります。
今回のUI CanvasのRenderModeは「Screen Space – Overlay」で作成していますが、その他のModeでも問題ないと思います。
最終的なヒエラルキーは下記のような形になります。
UICanvas (canvas)
– WindowItem
– WindowStatus
— TextMeshPro
— Image
— RawImage ※ここにLive2Dモデルが表示されます
— Live2D Camera
— Live2D Prefab
– WindowOption
具体的な手順をステップバイステップで解説していきます。
CanvasにLive2Dモデルを表示する手順
1. Live2D撮影用のカメラを作成する
まずはLive2D用のカメラを準備します。配置するLive2Dだけを映し出すカメラです。
既存のMainCameraをコピーするのが無難です。ProjectionをOrthographicに設定します。
そもそも配置したLive2Dモデルが正常に表示されないときは、Live2D PrefabのCubismRenderControllerのSortingにあるModeを「Back to Front Order」に変更してください。
参考: モデルの描画順を正常にする (Live2D Manuals&Tutorials)
2. CullingMaskのためLive2D Prefabにレイヤーを設定する
次にLive2DのPrefabに「Live2D」というレイヤーを登録します。名前は何でも構いません。
3. カメラのCullingMaskを設定する
オリジナルのメインカメラのCullingMaskで「Live2D」レイヤーを除外します。
反対に、コピーして作成したLive2D用カメラのCullingMaskは「Live2D」レイヤーのみ選択します。
4. RenderTextureを作成する
次にRenderTextureを作成します。サイズは1024×1024くらいにしておきます。
のちのち表示されるLive2Dの解像度が粗い場合は、この数値を上げてください。
5. RenderTextureにLive2D撮影用カメラを対応させる
作成したRenderTextureをLive2D用カメラのOutputTextureに設定します。
これでLive2D用カメラに映るLive2Dモデルが、RenderTextureに焼き込ま れた状態になります。
あとはこれをRawImageで表示するだけです。
6. ステータスGameObjectにRawImageを作成してRenderTextureを適用する
ステータス画面にその他の要素と同じようにRawImageを追加し、Textureに上記のRenderTextureを適用してください。
これでLive2Dモデルが表示されるはずです。
作成したLive2DモデルとカメラとRawImageは、まとめてステータス画面の子要素にしてしまって良いと思います。
これでステータスがSetActive(true)になったとき、Live2Dモデルやカメラも有効化され、RawImageにLive2Dモデルが表示されます。