K.Y.さん、しんちょくどーですか?

仕事や趣味で知ったこと、つまずいたことを書いています

【UE5】CommonUI の Widget の使い方 - CommonLoadGuard

Common UI Plugin を有効にすると追加される Widget の使い方を紹介します。

こちらの記事では CommonLoadGuard について紹介しています。
ほかの Widget については下記の記事をご覧ください。

kumasan-debug.hatenablog.com

確認環境

  • UE5.4
  • Common UI Plugin Beta Version 1.0

機能

機能は CommonLazyImageCommonLazyWidget に似ています。

アセットを非同期ロードする関数を持っており、非同期ロードで読み込んでいる間だけ何か画像やスロバー(進捗を表すインジケータ)付きのテキストを表示できます。

スロバーについて、実際は UE 標準で用意されている Throbber が使われるのではなく、内部で Image にマテリアルを設定して表示しているだけです。

設定項目

ShowLoading

オンにすると Widget 編集中に後述の LoadingBackgroundBrush, LoadingText, スロバーマテリアルを表示します。

LoadingBackgroundBrush

非同期ロードで読み込んでいる間、代わりに表示する画像を設定します。

ThrobberAlignment

後述のスロバーマテリアルと LoadingText の水平方向の位置を設定します。

ThrobberPadding

設定しても何も起こりません。(ソースコードで使用されている箇所が見当たらなかった...)

LoadingText

非同期ロードで読み込んでいる間、代わりに表示するテキストを設定します。

TextStyle

LoadingText のスタイルを設定します。

プロジェクト設定

デフォルトのスロバーマテリアル

設定は下記の場所にあります。
プロジェクト設定 > プラグイン > 共通 UI フレームワーク > スロバー > デフォルトのスロバーマテリアル

非同期ロードで読み込んでいる間、代わりに表示するスロバー用のマテリアルを設定します。

イベント

OnLoadingStateChanged

イベントが呼ばれるタイミングは不明です...

イベントの名前から推測すると、画像のロード状態が変化したときに呼び出されるイベントだと思います。
が、実際にロードを試してみてもイベントが呼び出されずどのタイミングで呼び出されるのかわからないままでした。

入力ピン 内容
IsLoading 画像をロード中かどうか...多分...

関数

SetLoadingText

LoadingText を設定します。

入力ピン 内容
InLoadingText 設定するテキスト

SetIsLoading

強制的に「ロード中」の設定を変更します。
もし、ロード状態を手動で変更したい場合はこの関数を使うことになります。

入力ピン 内容
InIsLoading 「ロード中」の設定にするかどうか

IsLoading

非同期ロード中かどうかを判定します。

出力ピン 内容
ReturnValue 非同期ロード中かどうか

GuardAndLoadAsset

指定のアセットを非同期ロードします。

ロードが完了すると OnAssetLoaded に設定したイベントが呼び出されます。
Object ピンは Object 型になっているので、必要に応じてキャストして使ってください。

入力ピン 内容
InLazyAsset 非同期ロードするアセット
OnAssetLoaded

ロード完了時に呼び出されるイベント

Object ピン:ロードが完了したアセット

注意点

スロバーとテキストの配置は固定

スロバーとテキストは横並びで表示されるのですが、配置が固定です。
スロバーとテキストの位置を逆にしたり、大きさを変えたりできません。

スロバーは自作して設定する

スロバーはプロジェクト設定の「デフォルトのスロバーマテリアル」から設定できるのですが、標準でスロバーっぽいマテリアルが用意されているわけではありません。

マテリアルを自作して設定する必要があります。

使用感

非同期ロード中にスロバー(実際はマテリアル) + テキストを表示したい場面で CommonLoadGuard が使えそう。
画像だけなら CommonLazyImage を使うことになりそうだし、状況に応じて使い分ける感じ。

ただ、 CommonLoadGuard はスロバーやテキストの配置を自由に変更できないところが惜しい。


記事の内容について、誤字脱字、内容の誤り、感想などありましたら気軽にコメントしていただけると嬉しいです。(このブログでも SNS でも歓迎です。)