UE5.5 で Widget 作ろうと思ったら、 Widget Preview なるものが...！？
— K.Y. (@KumasanDebug) 2024年10月10日
名前の通り任意の Widget をプレビューできるアセットみたい
いよいよ PIE せずに動作確認できる時が来たか...#UE5Study pic.twitter.com/FTTcnn3HN2
...ということで UE5.5.0 Preview から追加された UMG Widget Preview をさわってみたので、その機能を紹介します。
UMG Widget Preview の機能について
名前の通り、 Widget をプレビューできる機能です。
ゲーム画面での UI の動作を、実際にボタンを押すなどのインタラクションも含めて確認できます。
PIE せずに動作確認できるのでかなり便利です。
ただし、 UE5.5.0 Preview では実験段階の機能なので使用時にはご注意ください。
Widget をプレビューする手順
早くプレビューを試してみたい！
ということで Widget をプレビューする手順を記載します。
- コンテンツブラウザで右クリックし、ユーザーインターフェイス > ウィジェットプレビュー を選択して新しいアセットを作成
- 作成したアセットを開き、詳細タブ > Widget Type にプレビューしたい Widget を指定
- 警告が表示された場合は「修正を適用」をクリック（警告の詳細は後述）
- ビューポートに指定した Widget が表示される
警告について
ウィジェットプレビューで対象の Widget を設定した際に、次のような警告が表示されることがあります。
参照先ウィジェットの 1 つまたは複数がサポートされていません（[プレイヤーコンテキストなしで呼び出しの初期化可能] が無効になっている可能性がある）
【警告対象の Widget 】
これは警告対象の Widget に原因があります。
Widget のクラス設定 > Can Call Initialized Without Player Context がオフの場合に発生します。この設定をオンにすることで警告を回避できます。（警告内の「修正を適用」をクリックすると自動でオンにしてくれます。）
ちなみに、 Can Call Initialized Without Player Context の用途は以下のように説明されています。
つまり、 Widget を初期化するとき（ OnInitialized イベント）に PlayerController を参照していないのであれば、設定をオンにして問題ありません。
UE から言わせると、「プレビューしている間は（ Widget の所有者にあたる） PlayerController を生成しないから PlayerController を参照できませんよ～」ということだと思います。
画面構成
ウィジェットプレビューは以下のパネルで構成されています。
① ツールバー：保存ボタンやプレビューの状態をリセットするボタンがあります。
② ビューポート：プレビュー対象の Widget が表示されます。
③ 詳細タブ：プレビュー対象の Widget を設定したり、プロパティを変更できます。
④ メッセージログ：何かメッセージがあれば表示されます。
⑤ プレビューシーン設定：ビューポートで表示されている空間の環境を設定します。
詳細タブについてもっと詳しく
詳細タブの各項目について解説します。
Widget Type
プレビューしたい Widget を指定します。
ウィジェットプロパティ
プレビューしている Widget のプロパティを直接変更できます。
変更した内容はプレビュー中のみ適用されるので、 Widget 本体には影響がありません。
変更内容をすべてリセットしたい場合はツールバーの戻り矢印のアイコンを押せば一括でリセットできます。
Slot Widgets
Widget Type で指定した Widget に NamedSlot （もしくは似た機能を持つ Widget ）が配置されていた場合、 NamedSlot の子にする Widget を指定できます。
NamedSlot を配置した Widget があったとして...
↓ Slot Widgets で子にしたい Widget を指定できる。
気になることを実験！ Q&A
以下の内容はすべてプレビュー中の Widget の挙動になります。
Q1: Widget のイベントは反応する？
A1: 反応します。ボタンをクリックすれば OnClicked イベントが発生しますし、スライダーの値を変更すれば OnValueChanged イベントが発生します。
Q2: Widget が持つ変数の値を変更できる？
A2: 変更できます。
ウィジェットプレビューの詳細タブ > ウィジェットプロパティからプレビュー中の変数の値を変更できます。ここにはプライベートの変数も表示されます。
Q3: Tick は走る？
A3: 走ります。
Q4: タイマーは使える？
A4: 使用できます。 SetTimerByEvent などを使えます。
Q5: UMG アニメーションは再生できる？
A5: 再生できます。
Q6: PreConstruct イベントの IsDesignTime の値はどうなる？
A6: False になります。つまり、実際のゲーム実行中と同じ扱いです。
Q7: Widget を作成・表示できる？
A7: CreateWidget や ConstructObjectFromClass で作成可能です。
ただし、作成した Widget はビューポートに直接追加 (AddToViewport, AddToPlayerScreen) できません。
Widget に配置しているパネルなどの子に追加する形で表示できます。
Q8: Widget を削除できる？
A8: プレビュー中の Widget 自体は削除できませんが、内部の Widget は RemoveFromParent で削除できます。
Q9: ログを出力できる？
A9: PrintString や PrintText でログを出力できます。出力ログウィンドウをドッキングさせておくと便利です。
Q10: BP のブレークポイントは使える？
A10: ブレークポイントはおそらく反応しないようです。
あとがき
いよいよ PIE せずに Widget の動作確認ができる時がきました。
正式版がリリースされたら開発で使いこなして効率的に UI を作っていきたいですね。
記事の内容について、誤字脱字、内容の誤り、感想などありましたら気軽にコメントしていただけると嬉しいです。（このブログでも SNS でも歓迎です。）
