過去バージョン

この記事の要点

UE5 UMG の Widget は Z-Order が大きいほど手前に描画される AddToViewport(ZOrder) の第 2 引数で重ね順を指定（既定 0） Canvas Panel 上の子 Widget は 階層順 + Z-Order スロットで前後が決まる RemoveFromParent で Widget を非表示。SetVisibility(Hidden) でも一時的に隠せる Dialog / Toast / HUD のような常に手前に出したい UI は ZOrder を 100 / 1000 と大きな値に

UMG Widget と Z-Order の基本

Unreal Engine 5 の UI システムUMG（Unreal Motion Graphics）では、画面上に複数の Widget を重ねて表示できます。HUD / メニュー / ダイアログ / トーストなどが同時に表示されると、どれを手前に描画するかをZ-Orderで制御します。

Z-Order の値	描画位置
小さい（マイナス OK）	奥（背面）に描画
0（既定）	標準レイヤー
大きい	手前（前面）に描画

方法1: AddToViewport(ZOrder) で指定

もっとも一般的な方法。Widget をビューポートに追加する際の第 2 引数に Z-Order を指定します:

// C++ から
void AMyPlayerController::ShowHUD()
{
    if (HUDWidgetClass)
    {
        HUDWidget = CreateWidget(this, HUDWidgetClass);
        HUDWidget->AddToViewport(0);  // Z-Order 0（標準レイヤー）
    }

    if (DialogWidgetClass)
    {
        DialogWidget = CreateWidget(this, DialogWidgetClass);
        DialogWidget->AddToViewport(100);  // Z-Order 100（HUD より手前）
    }

    if (ToastWidgetClass)
    {
        ToastWidget = CreateWidget(this, ToastWidgetClass);
        ToastWidget->AddToViewport(1000);  // 最前面に通知バナー
    }
}

Blueprint からは Create Widget → Add To Viewport ノードの Z Order ピンに値を入力します。

方法2: Add To Player Screen

マルチプレイ環境で特定のプレイヤー画面だけに表示したい場合は AddToPlayerScreen(ZOrder)。スプリットスクリーンや LAN プレイで重要。

// LocalPlayer ごとに Widget を追加
HUDWidget->AddToPlayerScreen(0);

// 削除も Player 単位
HUDWidget->RemoveFromParent();  // ビューポート / プレイヤースクリーンどちらでも

方法3: Canvas Panel の Z-Order Slot

1 つの Widget Blueprint 内で複数の子要素を重ねる場合、Canvas Panel の子スロットに ZOrder プロパティがあります:

1. Widget Blueprint Editor で Hierarchy パネルを開く
2. Canvas Panel の下に複数の子（Image / Button / Text）を配置
3. 各子を選択 → Details パネル → Slot (Canvas Panel Slot) セクション → Z Order
4. 大きい値ほど前面（HUD上の警告アイコンなど）

方式	用途
AddToViewport の Z-Order	Widget 全体（HUD と Dialog 等）の重ね順
Canvas Panel Slot の Z-Order	1 つの Widget 内での子要素の重ね順
Hierarchy の順序	Z-Order が同じ場合に下の方が前面

動的に Z-Order を変える

Widget をビューポートに追加した後でも Z-Order を変えたいケース（例: モーダルがアクティブになったら最前面に）:

// 一度 RemoveFromParent → 再度 AddToViewport で更新
DialogWidget->RemoveFromParent();
DialogWidget->AddToViewport(2000);  // 新しい Z-Order

// または Canvas Slot の場合
UCanvasPanelSlot* Slot = Cast(ChildWidget->Slot);
if (Slot)
{
    Slot->SetZOrder(50);  // ★ 動的変更
    Slot->SetPosition(FVector2D(100, 200));
    Slot->SetSize(FVector2D(400, 100));
}

SetPositionInViewport で座標も制御

// Widget の絶対座標を指定（スクリーン座標）
HUDWidget->SetPositionInViewport(FVector2D(100, 50), false);
// 第 2 引数 bRemoveDPIScale: false で生のピクセル座標
//                          true  で DPI スケールを適用

Visibility と Z-Order の使い分け

目的	推奨手段
一時的に隠す（再表示が早い）	SetVisibility(Hidden)
完全に消す（メモリも解放したい）	RemoveFromParent() + null 代入
クリック不可だが表示	SetVisibility(HitTestInvisible)
クリック可だが子を透過	SetVisibility(SelfHitTestInvisible)
常に手前	Z-Order を 1000+ に
常に背面	Z-Order を -100 等のマイナスに

典型的な Z-Order 設計

1 タイトルで複数の Widget が混在する場合の推奨レイヤー設計:

レイヤー	Z-Order	用途
背景レイヤー	-10	カットイン背景
HUD	0	ヘルスバー、ミニマップ
サブメニュー	10	インベントリ / マップ
メインメニュー	100	ポーズ画面
ダイアログ	500	確認ダイアログ
システム通知	1000	セーブ完了トースト
デバッグ	10000	FPS / ログ表示

Blueprint での実装例

Blueprint ノードで以下の流れ:

1. Event BeginPlay（Player Controller などで）
2. Create Widget → Class: HUD Widget
3. Add to Viewport → Z Order: 0
4. 変数 HUDRef として保持
5. 必要時に Create Widget → Dialog → Add to Viewport → Z Order: 100
6. 閉じる時は変数経由で Remove from Parent

FAQ

Q: AddToViewport を 2 回呼んだら 2 回表示される？
A: はい、同じインスタンスが二重に登録されるか、Engine バージョンによっては警告。すでに表示されているかチェックするか、IsInViewport() を使ってください。

Q: Z-Order を同じにしたら描画順は？
A: 追加順（後から追加されたほうが前面）。Canvas Panel 内では Hierarchy の順序。

Q: Widget が他の Widget に隠れて操作できない
A: 上に乗っている Widget が透明で Visibility = Visible だとマウスイベントを吸収します。透明領域には Hit Test Invisible を設定。

Q: フォーカスが取られない
A: SetUserFocus(PlayerController) を呼ぶ、または Widget の Is Focusable を ON。