Unreal Editor の UI は スレート UI フレームワーク を使ってビルドされており、デベロッパーは Widget Reflector (ウィジェット リフレクタ) ツールにより、ツールセットのさまざまなウィジェットのレンダリングに使用されている スレート API を特定することができます。
Widget Reflector running in Unreal Editor.
ウィジェット リフレクタはデフォルトでエディタにビルトインされています。プロジェクトの UI を最適化・デバッグしたいと考えてるデベロッパーの方は、本記事にてウィジェット リフレクタの活用方法をご確認ください。
使用を開始する
エディタの実行時にウィジェット リフレクタを開くには、[Tools] > [Debug] > [Widget Reflector] を選択します。また、Ctrl+Shift+W キーを押すか、コンソールに「WidgetReflector」と入力してウィジェット リフレクタを開くこともできます。
ユーザー インターフェース
ウィジェット リフレクタを初めて使用する際は、次のようなインターフェースが表示されます。
クリックしてフルサイズで表示。
| 領域 | 説明 |
|---|---|
| 1 | デモ モード、アトラス、ウィンドウの各機能を提供するメイン メニューの領域です。 |
| 2 | アプリケーションのスケールやスレート デバッグ オプションの領域です。 |
| 3 | ウィジェットの階層を示す領域です。ここには、ウィジェットの階層、前面の可視性、フォーカス、クリッピング、ソース、およびアドレス情報が視覚的に表示されます。また、ここでは Unreal アプリケーションのスナップショットを撮り、ロードすることもできます。 |
| 4 | タブ メニューの領域です。ここでは、スナップショット ウィジェット、ウィジェット イベント、ヒット テスト グリッドを視覚化してデバッグすることができます。 |
| 5 | ウィジェットの詳細を示す領域です。 |
デモ モード
| デモ モード オプション | 使用方法 |
|---|---|
| Mouse Click (マウス クリック) | このオプションを有効にすると、ユーザーはマウス クリック イベントを実演できるようになり、デモのためにカーソル イベントを視覚化したり、プレゼンテーションをレコーディングしたりする場合に便利です。 |
| Key (キー) | このオプションを有効にすると、ユーザーはキープレス イベントを実演できるようになり、デモのためにキープレスを視覚化したり、プレゼンテーションをレコーディングしたりする場合に便利です。 |
アトラス
| アトラス オプション | 使用方法 |
|---|---|
| Display Texture Atlases (テクスチャ アトラスの表示) | このオプションを選択すると、テクスチャの NxN アトラスが開きます。 |
| Display Font Atlases (フォント アトラスの表示) | このオプションを選択すると、フォントの NxN アトラスが開きます。 |
テスクチャ アトラス
フォント アトラス
ウィンドウ
| ウィンドウ オプション | 使用方法 |
|---|---|
| Slate Debug Options (スレート デバッグ オプション) | このオプションを使用すると、ユーザーはアプリケーション スケールを調整し、[Widget Caching (ウィジェット キャッシュ)]、[Invalidation Debugging (無効化のデバッグ)]、[Invalidation Root Debugging (無効化ルートのデバッグ)]、[Update Debugging (更新のデバッグ)]、[Paint Debugging (ペイントのデバッグ)]、[Show Clipping (クリッピングを表示)]、[Debug Culling (カリングをデバッグ)] の各フラグを切り替えることができます。 |
| Widget Hierarchy (ウィジェット階層) | このオプションではウィジェットの親と子を表示します。また、これらのウィジェットが表示されているか、フォーカスがあるかなどの情報も表示されます。ユーザーは、[Pick Hit-Testable Widgets (ヒットテストできるウィジェットを選択)] を使ってテスト可能なウィジェットを選択したり、階層フィルタとして UMG ルートを有効にしたり、アプリケーション UI のスナップショットの撮影・ロードを行ったり、さらに可能な場合は、ウィジェットのスレート ソース コードをポイントしたりすることができます。 |
| Sanpshot Widget Picker (スナップショット ウィジェット ピッカー) | ウィジェット階層領域で撮ったアプリケーション UI のスナップショットは、この [Snapshot Widget Picker] タブに表示されます。 |
| Widget Details (ウィジェット詳細) | ウィジェットに関する追加の詳細情報がある場合は、この領域に表示されます。この領域には、必要に応じて他のメニューをドッキングすることもできます。 |
| Widget Events (ウィジェット イベント) | フォーカス、入力、ナビゲーション、バブ、警告などのフィルタリングされたイベント、またはマウス キャプチャ イベントがこの領域に表示されます。 |
| Hit Test Grid (ヒット テスト グリッド) | ヒット テストをデバッグする場合に、ナビゲーションとイベントの情報がこのタブに表示されます。 |
アプリケーションのスケール
プレゼンテーションやスクリーンショット、デバッグなどの目的でアプリケーションのスケールを変更するには、ウィジェット リフレクタの [Application Scale] に新しい値を入力するか、スライダーを使って値を調整します。
アプリケーションのスケールを調節します。
フラグ
アプリケーションのスケールを調節します。
アプリケーション UI をデバッグする際は、[Flags] の次の項目を設定できます。
- Invalidation Debugging (無効化のデバッグ)
- Invalidation Root Debugging (無効化ルートのデバッグ)
- Update Debugging (更新のデバッグ)
- Paint Debugging (ペイントのデバッグ)
Show Clipping
Show Clipping (クリッピングを表示) フラグでは、ウィジェットがどのようにクリップされたかを表示します。このフラグは、例えば、大きなウィジェットがより小さなパネルでクリップされた場合を特定するのに便利です。
Debug Culling
Debug Culling (カリングをデバッグ) では、ウィジェットがパネルなどの別のウィジェットでカリングされた場合にデバッグを行うことができます。
Widget Caching
InvalidationBox キャッシング システムにより Widget Caching (ウィジェット キャッシュ) が有効になります。GlobalInvalidation モードの場合、このオプションは常に無効になっています。
Widget Hierarchy
ウィジェットの階層情報を確認する際は、[Pick Painted Widgets (ペイントされたウィジェットを選択)]、[Pick Hit-Testable Widgets (ヒットテストできるウィジェットを選択)]、または [Show Focus (フォーカスを表示)] のいずれかを選択できます。
Pick Painted Widgets
ペイントされたウィジェットを選択するには、以下の手順を行います。
-
ウィジェット階層領域で [Pick Painted Widgets (ペイントされたウィジェットを選択)] を選択します。
-
マウス カーソルをアプリケーション UI に重ねて、目的のウィジェットを見つけます。
-
Esc キーを押して、目的のウィジェットのフォーカスを維持します。
ウィジェット階層領域で次のプロパティを確認できます。
| プロパティ | 説明 |
|---|---|
| Widget Name | ウィジェットの名前です。ウィジェット名に誤りがあれば、ここで検出することができます。 |
| FG Visibility | このプロパティは、ウィジェットが前面 (FG：Foreground) に表示されるかどうかを確認する際に役立ちます。 |
| Focus? | このプロパティは、ウィジェットがフォーカスされるかどうかを確認する際に役立ちます。 |
| Clipping | このプロパティは、ウィジェットがクリップされているかどうかを確認する際に役立ちます。 |
| Source | ここにはソース コードへのリンクが表示されます。これはウィジェットが作成された場所です。アプリケーションが C++ デバッガなどの IDE に接続されている場合は、ここにあるハイパーリンクをクリックすると、正しい場所にあるファイルが開きます。 |
| Address | ウィジェットのアドレスを把握しておくと、C++ デバッガで条件付きのブレークポイントを設定する際に役立ちます。 |
ヒット テスト グリッド
ヒット テスト グリッドは、ウィジェットのヒットボックスを視覚化して調べる際に役立ちます。これを使用するには、以下の手順を行います。
-
[Pick Hit-Testable (ヒット テスト グリッドを選択)] を選択します。
-
ヒットするウィジェットにマウス カーソルを重ねて Esc キーを押し、そのウィジェットのフォーカスを維持します。
ヒット テスト グリッドで提供されている各オプションに加えて、以下のフラグをそれぞれ設定することもできます。
| フラグ | 説明 |
|---|---|
| Visualize on Navigation (ナビゲーション時に視覚化) | この設定は、スナップショットを実行する場合にのみ使用可能です。これを使用するとヒット テスト グリッドの機能が有効になり、ウィジェット リフレクタ内でウィジェットを選択できるようになります。 |
| Reject Widget Reflector navigation events (ウィジェット リフレクタのナビゲーション イベントを拒否) | この設定を有効にすると、ヒット テスト グリッドの機能でウィジェット リフレクタ由来のナビゲーション イベントを拒否します。 |
Show Focus
フォーカスのあるウィジェットを表示するには、次の手順を行います。
-
[Show Focus (フォーカスを表示)] を選択します。
-
マウス カーソルでウィジェットを選択して Esc キーを押し、そのウィジェットのフォーカスを維持します。
Snapshot Widget Picker
Snapshot Widget Picker (スナップショット ウィジェット ピッカー) では、アプリケーションに含まれるすべてのウィジェットの画像と現在の状態が保存されます。アプリケーション UI のスナップショットを撮るには、以下の手順を行います。
-
ウィジェット階層領域で [Options (オプション)] をクリックします。
-
[Navigation Event Simulation (ナビゲーション イベント シミュレーション)] チェックボックスをオンにして有効にします。
このオプションにより、スナップショットでキャプチャされたウィジェットのナビゲーション イベントをシミュレートできるようになります。また、この設定はオプションであり、必要な場合にのみ有効にするようにしてください。 -
スナップショットの対象となるアプリケーションを選択します。
-
[Take Snapshot (スナップショットを撮る)] をクリックします。
この時点で、ユーザーはこのスナップショットからのヒット テスト グリッドを使用できるようになり、結果がウィジェット階層パネルに表示されます。スナップショットではアプリケーション UI の状態が保存されるため、修正が必要なバグを特定しやすくなります。さらに、スナップショット領域から UI をデバッグし、アプリケーションのナビゲーション イベントをシミュレートすることも可能です。
Widget Events
Widget Events システムでは、ユーザーが UI をナビゲートしている間に、メッセージをウィジェット リフレクタのアウトプット ログに書き込みます。
