【UE5】RetainerBoxを用いたUIを作成してみよう

こんにちは！
情熱開発部プログラム1課の今井です。

残暑がやっと去ったと思ったら、今年ももうあと僅かですね…
新しい年を気持ちよく迎えられるよう、有意義な年末を過ごしていきたいです。

さて今回はUMG(Unreal Motion Graphics)の機能の1つであるRetainerBoxについて紹介していきます。
複数の画像パーツから構築されたUI等に対してまとめてマテリアルを適用できるので、使い方を知っておくと表現の幅が広がるはず…！

※使用バージョン : UE5.4.4

RetainerBoxについて

RetainerBoxは自身の子Widgetが内包している画像等の要素群を1枚の画像データとしてオフスクリーンレンダリングし、マテリアルを適用できる機能になっています。例としては複数の画像を組み合わせて2D表示をする際に透明度を均一にすることができます(画像右側)

また、レンダリングの間隔を設定することで描画負荷を軽減できますが、レンダリングの実行頻度を減らさずに使用した場合は逆に描画負荷がかかってしまうので注意が必要です。

それでは実際にWBP(WidgetBluePrint)でRetainerBoxを用いてUIを作成する手順を紹介していきます。

まずは大本となるWBPを作成します。
ContentBrowserのAddからUserInterface→WidgetBlueprintで作成できます。

作成したWBPにRetainerBoxを配置します。
この配置したRetainerBoxのSizeがオフスクリーンレンダリングを行う範囲になっています。

必要となる画像やテキスト等のウィジェットをRetainerBoxの子として配置します。
今回は複数の平行四辺形を配置して一つのテキストフレームUIを作成していきます。

RetainerBoxを使わず個々のパーツを透過させると重なり部分が加算されてしまうので、均一な透過度になるようにします。

RetainerBoxでレンダリングされたテクスチャ情報はTextureParameterに格納されます(初期状態だとTexture)
また、EffectMaterialから適用させるマテリアルを設定できます。

ではRetainerBoxで使用するためのマテリアルを作成していきましょう。
マテリアル設定のMaterialDomainはUserInterface、BlendModeはTranslucentにして、以下の画像のように透明度を変更する処理を組んできます。

次に上で作成したマテリアルからRetainerBoxに設定する用のマテリアルインスタンスを新たに作成していきます。
マテリアルインスタンスを使用することで処理を使いまわしつつ、マテリアル内の値を変更した複数のパターンを用意できます(今回だとAlpha)

では最後にアニメーションをつけてそれっぽく動かしてみましょう。
LevelBlueprintを開き、作成したWBPを画面に映るようにして、「0」キーでアニメーションが再生されるようにしています。

RetainerBoxは凝ったUI等を作成する際に痒い所に手が届く便利な機能です。
今回はアニメーションさせていたのでレンダリングの実行頻度を減らしていませんでしたが、動かす必要のない固定の表示を行う場合は描画負荷を減らすこともできるので、ぜひ使ってみてください…!

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。