UE4 エディタ拡張・ウィジェットリフレクタ（WidgetReflector）

エディタ拡張でUIを作る場合に、どれにどのウィジェットを使っているかわからなかったり、
どういうウィジェット使えばこういう配置になるのかわからないとか結構あったりすると思います。
スレートに関するものがあまりWEBになかったりするので…。

というわけで、資料がないならUE4のエンジンから学んでしましまおう！と。
ここで役に立つのが「ウィジェットリフレクタ（WidgetReflector）」です。

ウィジェットリフレクタについての詳しい説明はこちらのサイトがすごくためになります！

・【UE4】エディタ拡張（レイアウト編）
http://logicalbeat.jp/blog/840/

・[UE4] プラグインによるエディタ拡張(3)　SlateUIを使用してウィンドウを作成する
http://historia.co.jp/archives/373

こういうことをやるためのものですね。

WidgetReflectorというツールを使用すると、画面に表示されているUIがどのようなウィジェットを使用して構成されているのかを確認することが出来ます。

メインメニューから [Window -> Developer Tools -> Widget Reflector] でツールを起動し「Pick Widget」ボタンを押すと、↓のように、マウスカーソルが乗っているUIの構成をリアルタイムに表示してくれます。

このツールを利用すれば、どのウィジェットを使えばそのUIが実現できるのかを簡単に調べることが出来ます。

ウィジェットリフレクタは「ウィンドウ」の「デベロッパーツール」の


「ウィジェットリフレクタ」を選択すると開くことができます。


ウィジェットリフレクタウィンドウの「Pick Live Widget」ボタンを押すと


こんな感じでUE4エディタ上のウィジェットにカーソルを合わせて中身を見ることができます。


カーソルを合わせたウィジェットがどういうウィジェットの構成でできているのかが
こんな感じで確認することができます。

「Esc」キーを押すと、今の状態で止めてくれるので中身を確認したい場合は使いましょう。

このツールのすぐれているところは

コードを確認する際は、「Widget Info」項目のソースファイル名をクリックすると、VisualStudioが立ち上がって、自動でファイルを開いてくれます。

ここにつきるのかなと思います！
最終的にエンジンのソースをのぞかないといけないというのは何とも言えないところで
ドキュメントがほしいところですが、
やっぱり一番エンジンのソースを見るのが勉強になるのかなーとぼんやり思ったりします。