◀ 3.

UE5でWidgetの前後関係を設定する方法

▶
編集

Unreal Engine 5（UE5）では、ウィジェットをViewportに複数追加することで、UIのレイヤー管理が重要になります。本記事では、どのウィジェットを前面に表示させるかを設定する方法について詳しく解説します。

ウィジェットのZOrderとは？

UE5では、ZOrderという値を使用してウィジェットの前後関係を制御します。ZOrderの値が大きいほど前面に表示され、小さいほど背面に表示されます。ZOrderの設定は、Add to Viewport や Add to Player Screen を使用する際に指定できます。

ウィジェットのZOrderを設定する方法

UE5のブループリントやC++コードでZOrderを設定するには、以下の方法を使用します。

ブループリントで設定する方法

ブループリントでは、ウィジェットをViewportに追加する際にZOrderを指定できます。

1. ウィジェットを作成（Create Widget ノードを使用）

2. ウィジェットをViewportに追加（Add to Viewport ノードを使用）

3. ZOrderを設定（Add to Viewport ノードの引数にZOrder値を指定）

例えば、ZOrderを100に設定すると、他のウィジェットより前面に表示されやすくなります。

C++で設定する方法

C++を使用してウィジェットのZOrderを設定する場合、以下のように記述します。

UUserWidget* MyWidget = CreateWidget(GetWorld(), MyWidgetClass); if (MyWidget) { MyWidget->AddToViewport(100); // ZOrderを100に設定 }

このコードでは、ウィジェットを作成し、ZOrder 100でViewportに追加しています。

ウィジェットのZOrderの競合を防ぐ

複数のウィジェットを追加する際、ZOrderの競合を防ぐためには、以下のポイントを意識しましょう。

1. 優先度の高いウィジェットほどZOrderを大きく設定する

2. 特定のウィジェットを最前面に固定したい場合は、ZOrderを大きくする

3. 意図しない表示の問題が発生した場合は、ZOrderの値を調整してみる

まとめ

UE5のViewportでウィジェットの前後関係を制御するには、ZOrderを適切に設定することが重要です。ZOrderの値が大きいほど前面に、小さいほど背面に配置されるため、用途に応じて適切に設定しましょう。

ブループリントでもC++でもZOrderを指定できるので、プロジェクトに応じた方法で設定してください。

編集
Post Share
子ページ

子ページはありません

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

人気ページ

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