ウィジェット リフレクタ

スレート ウィジェットの識別とデバッグを可能にするデベロッパー支援ツール「ウィジェット リフレクタ」の概要です。

Windows
MacOS
Linux
前提トピック

このページは以下のトピックへの知識があることを前提にしています。まず以下のトピックの内容についてご確認をお願いします。

Unreal Editor の UI は スレート UI フレームワーク を使ってビルドされており、デベロッパーは Widget Reflector (ウィジェット リフレクタ) ツールにより、ツールセットのさまざまなウィジェットのレンダリングに使用されている スレート API を特定することができます。

widgetreflector-topicimg.PNG

Unreal Editor で実行中のウィジェット リフレクタ

ウィジェット リフレクタはデフォルトでエディタにビルトインされています。プロジェクトの UI を最適化・デバッグしたいと考えてるデベロッパーの方は、本記事にてウィジェット リフレクタの活用方法をご確認ください。

使用を開始する

エディタの実行時にウィジェット リフレクタを開くには、[Window (ウィンドウ)] > [Developer Tools (デベロッパー ツール)] > [Widget Reflector (ウィジェット リフレクタ)] を選択します。また、Ctrl+Shift+W キーを押すか、コンソールに「WidgetReflector」と入力してウィジェット リフレクタを開くこともできます。

ウィジェット リフレクタはエディタ内からでも、スタンドアローンのアプリケーションとしても使用できます。

ユーザー インターフェース

ウィジェット リフレクタを初めて使用する際は、次のようなインターフェースが表示されます。

クリックしてフルサイズで表示。

領域

説明

1

デモ モード、アトラス、ウィンドウの各機能を提供するメイン メニューの領域です。

2

アプリケーションのスケールやスレート デバッグ オプションの領域です。

3

ウィジェットの階層を示す領域です。ここには、ウィジェットの階層、前面の可視性、フォーカス、クリッピング、ソース、およびアドレス情報が視覚的に表示されます。また、ここでは Unreal アプリケーションのスナップショットを撮り、ロードすることもできます。

4

タブ メニューの領域です。ここでは、スナップショット ウィジェット、ウィジェット イベント、ヒット テスト グリッドを視覚化してデバッグすることができます。

5

ウィジェットの詳細を示す領域です。

デモ モード

デモ モード オプション

使用方法

Mouse Click (マウス クリック)

このオプションを有効にすると、ユーザーはマウス クリック イベントを実演できるようになり、デモのためにカーソル イベントを視覚化したり、プレゼンテーションをレコーディングしたりする場合に便利です。

Key (キー)

このオプションを有効にすると、ユーザーはキープレス イベントを実演できるようになり、デモのためにキープレスを視覚化したり、プレゼンテーションをレコーディングしたりする場合に便利です。

アトラス

アトラス オプション

使用方法

Display Texture Atlases (テクスチャ アトラスの表示)

このオプションを選択すると、テクスチャの NxN アトラスが開きます。

Display Font Atlases (フォント アトラスの表示)

このオプションを選択すると、フォントの NxN アトラスが開きます。

テスクチャ アトラス

TextureAtlas.png

フォント アトラス

FontAtlasVisualizer.png

ウィンドウ

ウィンドウ オプション

使用方法

Slate Debug Options (スレート デバッグ オプション)

Console Slate Debugger Reference (コンソール スレート デバッガのリファレンス)

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 (ペイントのデバッグ)

Slate Debugger Console Reference (スレート デバッガ コンソールのリファレンス)

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

ペイントされたウィジェットを選択するには、以下の手順を行います。

  1. ウィジェット階層領域で [Pick Painted Widgets (ペイントされたウィジェットを選択)] を選択します。

    WidgetHierarchy_1.png

  2. マウス カーソルをアプリケーション UI に重ねて、目的のウィジェットを見つけます。

  3. Esc キーを押して、目的のウィジェットのフォーカスを維持します。

    WidgetReflectorInspect.png

ウィジェット階層領域で次のプロパティを確認できます。

プロパティ

プロパティ

説明

Widget Name

ウィジェットの名前です。ウィジェット名に誤りがあれば、ここで検出することができます。

FG Visibility

このプロパティは、ウィジェットが前面 (FG:Foreground) に表示されるかどうかを確認する際に役立ちます。

Focus?

このプロパティは、ウィジェットがフォーカスされるかどうかを確認する際に役立ちます。

Clipping

このプロパティは、ウィジェットがクリップされているかどうかを確認する際に役立ちます。

Source

ここにはソース コードへのリンクが表示されます。これはウィジェットが作成された場所です。アプリケーションが C++ デバッガなどの IDE に接続されている場合は、ここにあるハイパーリンクをクリックすると、正しい場所にあるファイルが開きます。

Address

ウィジェットのアドレスを把握しておくと、C++ デバッガで条件付きのブレークポイントを設定する際に役立ちます。

ヒット テスト グリッド

ヒット テスト グリッドは、ウィジェットのヒットボックスを視覚化して調べる際に役立ちます。これを使用するには、以下の手順を行います。

  1. [Pick Hit-Testable (ヒット テスト グリッドを選択)] を選択します。

    TestHitGrid.png

  2. ヒットするウィジェットにマウス カーソルを重ねて Esc キーを押し、そのウィジェットのフォーカスを維持します。

ヒット テスト グリッドで提供されている各オプションに加えて、以下のフラグをそれぞれ設定することもできます。

フラグ

説明

Visualize on Navigation (ナビゲーション時に視覚化)

この設定は、スナップショットを実行する場合にのみ使用可能です。これを使用するとヒット テスト グリッドの機能が有効になり、ウィジェット リフレクタ内でウィジェットを選択できるようになります。

Reject Widget Reflector navigation events (ウィジェット リフレクタのナビゲーション イベントを拒否)

この設定を有効にすると、ヒット テスト グリッドの機能でウィジェット リフレクタ由来のナビゲーション イベントを拒否します。

Show Focus

フォーカスのあるウィジェットを表示するには、次の手順を行います。

  1. [Show Focus (フォーカスを表示)] を選択します。

    WidgetPickerFocus.png

  2. マウス カーソルでウィジェットを選択して Esc キーを押し、そのウィジェットのフォーカスを維持します。

Snapshot Widget Picker

Snapshot Widget Picker (スナップショット ウィジェット ピッカー) では、アプリケーションに含まれるすべてのウィジェットの画像と現在の状態が保存されます。アプリケーション UI のスナップショットを撮るには、以下の手順を行います。

  1. ウィジェット階層領域で [Options (オプション)] をクリックします。

  2. [Navigation Event Simulation (ナビゲーション イベント シミュレーション)] チェックボックスをオンにして有効にします。

    NavigationEventSimulation.png

    このオプションにより、スナップショットでキャプチャされたウィジェットのナビゲーション イベントをシミュレートできるようになります。また、この設定はオプションであり、必要な場合にのみ有効にするようにしてください。

  3. スナップショットの対象となるアプリケーションを選択します。

    DesktopNavEvent.png

  4. [Take Snapshot (スナップショットを撮る)] をクリックします。

この時点で、ユーザーはこのスナップショットからのヒット テスト グリッドを使用できるようになり、結果がウィジェット階層パネルに表示されます。スナップショットではアプリケーション UI の状態が保存されるため、修正が必要なバグを特定しやすくなります。さらに、スナップショット領域から UI をデバッグし、アプリケーションのナビゲーション イベントをシミュレートすることも可能です。

スナップショットを撮れるのは、エディタの PIE モードとスタンドアローンのアプリケーションからのみです。

Widget Events

Widget Events システムでは、ユーザーが UI をナビゲートしている間に、メッセージをウィジェット リフレクタのアウトプット ログに書き込みます。

Select Skin
Light
Dark
Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信