こんにちは。トイロジックでUI実装を担当しているS.Eです。本記事ではUMGにおける最適化用のウィジェット、Invalidation Box と Retainer Box についてそれぞれ使いどころやパラメータ設定方法をご紹介したいと思います。

子ウィジェットをキャッシュする Invalidation Box

このウィジェット以下の子ウィジェットはキャッシュされます。キャッシュされたウィジェットでは Prepassed、Ticked、Painted が走らないためスレートのレンダリングを高速化できます。ウィジェットアニメーションなどによる移動/変形が発生したときキャッシュは無効になりますが、例外としてマテリアルパラメータの変更による見た目の変化ではキャッシュされたままとなります。

図1は実際に Invalidation Box を適用した例になります。左のウィジェットはマテリアルパラメータによる動作、右のウィジェットはウィジェットアニメーションによる動作になります。どちらのウィジェットにも Tick で DeltaTime を表示する処理が入っており、この結果からマテリアルパラメータの更新ではキャッシュされたままであることがわかります。

図2は Invalidation Box の詳細設定です。「Performance > Is Volatile」のフラグにチェックを入れるとこのウィジェットはキャッシュされなくなります。毎フレーム変化するようなウィジェットを構造上どうしても Invalidation Box 以下に入れる必要がある場合、毎フレームキャッシュを無効化する方が重いためチェックを入れることがあります。

参考ページ
https://docs.unrealengine.com/ja/Engine/UMG/UserGuide/WidgetTypeReference/Invalidation/index.html
https://www.slideshare.net/EpicGamesJapan/umg-80334310

子ウィジェットの描画頻度を下げる Retainer Box

Retainer Box は子ウィジェットの描画頻度を調整することができます。何フレームごとに更新するか、という形でパラメータ設定が可能であり更新頻度を下げてもいいようば箇所に適用します。
また、オフスクリーンレンダリングをしているため Retainer Box 以下の子ウィジェットに対して一括でマテリアルによるエフェクトを反映できます。

図3に示すように Phase Count パラメータを10として10フレームに1回更新するように設定した様子が図4になります。実際の秒数設定ではなくフレーム基準の設定のため描画頻度は何FPSで動作しているかに依存します。

図5に示すように Effect Material にマテリアルをセットし動作させた様子が図6になります。Retainer Box 以下の複数のウィジェットに対してマテリアルの効果が一括で反映されていることがわかります。
WBPエディタ上ではマテリアルが適用された状態がプレビューされないため、実際にゲームを起動して動作確認を行う必要があります。

参考ページ
https://docs.unrealengine.com/en-US/API/Runtime/UMG/Components/URetainerBox/index.html
https://www.slideshare.net/EpicGamesJapan/umg-80334310

最後に

以上がUMGの最適化用ウィジェット、Invalidation Box と Retainer Box のご紹介になります。Invalidation Box には専用のデバッグコマンドがあり、ウィジェットごとに現在のキャッシュ状況を可視化することができます。また、Retainer Box は描画頻度を調整する機能よりも子ウィジェットに一括でマテリアルの効果を適用する機能の方がメインで使われているような印象です。

最後まで読んでいただき、ありがとうございました。