2.

UE5 Blueprintで特定クラスのWidgetを閉じる|Remove from Parent

編集
この記事の要点
  • 単一のウィジェットを閉じるなら、保存しておいた変数に対して Remove from Parent を実行するのが最も簡単
  • 複数同居している中から特定クラスのみ閉じるなら Get All Widgets of Class でリスト取得 → For Each Loop で順次 Remove
  • 「Owner が自分のものだけ」など条件付きで閉じる場合は、ウィジェット側に識別変数を持たせて Branch で振り分ける
  • フェードアウトしてから閉じるとプレイヤー体験が向上。アニメ再生 → Delay or OnFinished → Remove の順
  • Remove from Parent はビューポートから外すだけで GC されないことがあるので、変数参照を nullify しておくとリーク防止になる

はじめに

Unreal Engine 5 では UI を構築するために UMG(Unreal Motion Graphics)Widget を使います。表示までは簡単ですが、「特定のクラスのウィジェットだけ閉じたい」「複数生成した中から条件付きで消したい」となると、いきなり戸惑う人が多い領域です。

本記事では、Blueprint だけで実装できる 3 つのパターン(直接閉じる / クラス指定で一括 / 条件付きで個別)を、ノードのつなぎ方とともに解説します。

前提:ウィジェットを閉じるとは

UMG のウィジェットは Add to Viewport でビューポートに追加された状態を「表示」と呼びます。閉じる(消す)処理の本質はビューポートから取り除くことで、これを担うノードが Remove from Parent です。

ノード役割
Create Widgetクラスを指定してウィジェットインスタンスを生成
Add to Viewport画面に追加(表示開始)
Remove from Parent親(ビューポート)から取り除く(非表示化)
Get All Widgets of Class現在ビューポートにある指定クラスのウィジェット一覧を取得

方法 1:変数経由で直接閉じる

もっとも簡単なパターンです。表示するときに変数として持っておき、閉じたいタイミングでその変数に対して Remove from Parent を呼びます。

セットアップ

  1. Blueprint で User Widget 変数(型: 該当 Widget クラス)を作成。例: CurrentMenuWidget
  2. Create Widget の戻り値を Set CurrentMenuWidget に接続
  3. そのまま Add to Viewport で表示

閉じる側

  1. キー入力や任意のイベントで Get CurrentMenuWidget
  2. Is Valid で null チェック
  3. 有効なら Remove from Parent を呼び、続けて Set CurrentMenuWidget = None で参照クリア

参照を None にしておかないと、ウィジェットがビューポートから外れた後も Blueprint がインスタンスを保持し続けるため、ガベージコレクションされません。変数のクリアは習慣化しておきましょう。

方法 2:Get All Widgets of Class で一括クローズ

複数の同種ウィジェットが画面上に存在していて、まとめて消したい場合に使うのが Get All Widgets of Class です。

ノードの流れ

  1. イベント(例: 入力アクション)から開始
  2. Get All Widgets of Class ノード(Top Level Only は通常 true)
  3. 出力 Array に対し For Each Loop
  4. 各要素(Array Element)に対して Remove from Parent

クラスの指定

Widget Class ピンに対象の User Widget クラスを指定します。子クラスを含めるかTop Level Only ではなく、指定したクラスとその派生クラスがマッチします。たとえば WBP_Menu を指定すれば WBP_PauseMenu(WBP_Menu を継承)もヒットします。

方法 3:条件付きで特定のものだけ閉じる

「同じクラスのウィジェットが 3 つあるが、Owner プレイヤーが自分のものだけ閉じたい」のような条件付きクローズです。

ウィジェット側の準備

  1. 該当 Widget Blueprint に OwnerPlayer(型: Player Controller)変数を追加
  2. Expose on Spawn / Instance Editable をオンにする(Create Widget のピンで渡せる)
  3. 生成時に Owning Player をセット

閉じる側のロジック

  1. Get All Widgets of Class でリスト取得
  2. For Each Loop
  3. 各要素に対して OwnerPlayer 変数を取得
  4. Equal (Object)Get Player Controller (0) と比較
  5. Branch → True なら Remove from Parent、False なら何もしない

条件のバリエーション

条件判定方法
特定プレイヤーのものOwnerPlayer 変数を持たせて比較
表示後 N 秒経過SpawnedTime(GetGameTimeInSeconds で記録)と現在時刻の差で判定
特定の状態フラグbIsModal や Category 等の自前 enum で判別
クラスがさらに特化Cast To 子クラス → 成功した場合のみ閉じる

応用:フェードアウトしてから閉じる

いきなり消えるとプレイヤーに違和感を与えます。ウィジェット側に Animation(FadeOut) を作っておき、再生完了後に Remove from Parent するのが定石です。

ウィジェット側

  1. Animations パネルで新規アニメ FadeOut を作成
  2. ルート(Canvas Panel など)の Render Opacity を 1 → 0 にキーフレーム
  3. Event Graph で OnAnimationFinished を実装し、Animation 引数が FadeOut のとき Remove from Parent

呼び出し側

閉じたいタイミングでは Play Animation (FadeOut) を呼ぶだけ。アニメ完了は イベントベースで拾うので Delay より正確です。

Hide と Remove の違い

方法挙動使いどころ
Visibility を Hidden / Collapsed描画停止するがインスタンスは生存すぐ再表示する UI(HUD のサブパネル等)
Remove from Parentビューポートから外れる。参照を切れば GC 対象使い終わりのウィンドウ、もう開かないダイアログ
Set Render Opacity = 0透明だが当たり判定(マウスクリック)は残るアニメ用、入力は通したい一時的な演出

「閉じる」のニュアンスに合わせて使い分けると、無駄なメモリ・GC を抑えつつ快適な UX を実現できます。

よくあるトラブル

症状原因と対処
Remove したのに次フレームも残って見える同じクラスを別所で再生成している。Get All Widgets of Class で残存を確認
Remove 後もメモリが減らない変数で参照を保持したまま。Set 〜 = None で開放
Get All Widgets of Class が空配列クラスを親側で指定し過ぎ / Add to Viewport していない / Sub Widget は対象外
子ウィジェットだけ閉じたいSub Widget は Remove from Parent でも閉じられる。親 Canvas Panel から外れる
マウス入力が他に行かない消し忘れの Modal Widget が残存。Get All Widgets of Class で全消去 → 必要なものだけ復活

FAQ

Q: Remove from Parent と Destroy の違いは?
A: ウィジェットには Actor のような Destroy は基本ありません。Remove from Parent + 参照クリアが「破棄」に相当します。

Q: Tick で毎フレーム Remove は安全?
A: 既に外れているウィジェットへの Remove は無害ですが、無駄なので Is Valid で守るか、参照クリアと併用するのが推奨。

Q: C++ から呼ぶ場合は?
A: UUserWidget::RemoveFromParent() がそのまま使えます。Blueprint と同じセマンティクスです。

関連

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. ブループリントでWidgetに引数を追加する方法
  2. Blueprintで特定のクラスのWidgetを閉じる方法
  3. Widgetの前後関係を設定する方法
  4. ウィジェットの画像を選択するとウィジェットを閉じる方法
  5. マウスを動かせるUIを作成する方法
  6. ウィジェットのボタンに文字を書く方法
  7. BPでウィジェットのボタンを選択できなくする方法
  8. ウィジェットの背景ブラーについて
  9. リストビュー (ListView)
  10. EntryWidgetClass
  11. ウィジェットで一部の領域を部品化して再利用する方法

最近更新/作成されたページ