はじめに

本記事で紹介および検証を行なっているツール、ライブラリのバージョンは次の通りです。

バージョンによっては挙動に差異がある場合もありますので、ご了承ください。

作成するもの

SubViewportを活用することで、2Dとして作成したUIを3D空間上に描画することが可能です。

これを利用して3D空間上のプレイヤーの頭上にそれっぽいゲージを表示してみます。

まずSubViewportを作成し、表示するパーツを配置します。今回はProgressBarを使います。

SubViewportのサイズを設定します。今回はProgressBarだけ配置したのでそのサイズに合わせました。

これを3D空間上に出すため、Sprite3Dを配置して、ViewportTextureを設定します。

ViewportTextureのPathとして対象のSubViewportを指定します。

これでSubViewportの描画情報が3D空間上にSpriteとして表示されます。サイズについては別途調整していく必要があります。

今回はプレイヤーのゲージということで、Sprite3DがUIとして正面を常に向くようFlagsのBillboardも有効にしました。

後は実行してプレイヤーを動かしてみることで、ゲージがちゃんと意図したように表示されていることが確認できます。

SubViewportを活用してViewportTextureとして描画情報を取り回すことで、2DのUIを3D空間上に描画したり、3D空間の描画情報を2DのUI上で表示することが可能になります。今回はシンプルな例でしたが、ゲームによって様々な使い道が考えられます。

今回のケースだけでいえば、愚直にやるならばUIの座標を3D空間座標から変換した座標に移動する方が負荷的にも手軽かと思いますが、アプローチのひとつとして覚えておくと良さそうです。