UE5 UMG Widget 前後関係 (Z-Order) 設定完全ガイド

1UMG Widget と Z-Order の基本

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

2方法1: AddToViewport(ZOrder) で指定

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

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

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

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

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

3方法2: Add To Player Screen

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

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

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

4方法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上の警告アイコンなど）

5動的に Z-Order を変える

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

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

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

6SetPositionInViewport で座標も制御

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

7Visibility と Z-Order の使い分け

8典型的な Z-Order 設計

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

9Blueprint での実装例

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

10FAQ

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。