1. サイトトップ
  2. ブログ
  3. Unreal Engine
  4. UE4
  5. 【UE4】EditorUtilityWidgetについて

【UE4】EditorUtilityWidgetについて

こんにちは、制作部の今野です!

皆さんいかがお過ごしでしょうか?

最近急に寒くなったりして気温の変化が激しい時がありましたが、体調管理をしっかり行って今を乗り越えましょう!!

今回はUE4のEditorUtitlityWidgetについて書いていこうと思います!

※今回バージョンはUE4.24.2を使用しています。

1.EditorUtilityWidgetとは

UE4.22から追加された機能になります。

エディタ上で動作するもの(ツールやEditor拡張)をBlueprintやUMGを使って作成しますので、非プログラマの方でも比較的簡単にツールやEditor拡張を作れてとても便利です。

では、その実装方法について書いていこうと思います。

2.実装準備

その前に、専用のプラグインが必要が無いと実装することが出来ない為
プラグインを取得します。

編集の中にあるプラグインを選択します。
image.png (46.3 kB)

右上の検索欄から「EditorScripting Utilities」と検索して
Enabledのチェックボックスにチェックを入れると
プラグインを取得することが出来ます。
image.png (38.2 kB)

これでEditorUtitlityWidgetを作る準備が整いました!

3.実装方法

では、プラグインを取得したので実装に移りたいと思います。

①EditorUtitlityWidgetアセットを作成

EditorUtitlitiesからEditorUtitlityWidgetを選択しアセットを作成します。
image.png (263.0 kB)

②Textの配置

ダブルクリックして①のアセットを開き
パレットの一般にあるTextをデザイナーウィンドウ内にドラックアンドドロップします。
Textに入力する文字は何でもよいので入力完了したらコンパイルを行います。
image.png (72.7 kB)

③RunEditorUtilityWidget実行

一旦ウィンドウを閉じ、①で作ったアセットを右クリックし
RunEditorUtilityWidgetをクリックします。

image.png (99.9 kB)

④完成!!

実行するとWindowが出てくるので、先ほどTextで設定した文字が出てくればOKです!
image.png (39.9 kB)

4.DetailsViewとSinglePropertyView

EditorUtilityWidgetで使える特殊なViewになります。

よくアウトライナ上でActorなどを選択したとき以下の画像みたいなパラメータが出ますが
DetailesView・SinglePropertyViewを使えば似たようなパラメータが作れちゃいます!
image.png (58.1 kB)

DetailsViewとSinglePropertyViewの違い

DetailesViewは複数のプロパティ、SinglePropertyViewは一つのプロパティしか表示することが出来ません。そういった違いを実際に実装してみていきましょう。

5.DetailViewの実装

今回はLevel上に配置したActorのScaleを変更してみたいと思います。

①EditorUtitlityWidgetアセットを用意

②Blueprintを作成

Actorを継承させたBlueprintを新規で作成し、Level上に配置します。

③DetailsViewを配置

①で作成したEditorUtitlityWidgetアセットをダブルクリックで開き
パレットのEditorにあるDetailsViewをデザイナーウィンドウにドラックアンドドロップします
image.png (22.0 kB)

④②のBlueprint内の変数を用意

一旦ウィンドウを閉じて、ContentBrowser内にてDetailsViewで使用するBPを作成します。
継承元はUObjectにし
作ったBP内の変数にfloat型の「Scale_X」「Scale_Y」「Scale_Z」を追加してください。
image.png (19.2 kB)

⑤DetailsViewで表示するものを作成

④で作ったBlueprintの変数を表示させたいのでクラスの実体を作成し
SetObjectに繋げていきます。
image.png (86.4 kB)

⑥DetailsViewが変更されたときの処理を記述

ActorのScaleを変更する処理を記述していきます。
image.png (327.7 kB)

⑦RunEditorUtilityWidgetを実行

実行すると、このような画面が出てきます。
Z軸を10.0に設定してみます。
image.png (13.7 kB)

⑧確認

②で配置したActorのScaleを確認してZ軸が10.0になっていれば成功です。image.png (12.8 kB)

6. SinglePropertyViewの実装

続いてSinglePropertyの実装方法について行っていきます。
今回はLevel上に配置したActorVisiblityを変更できるようにします。

①Blueprintを用意

Actorを継承させたBlueprintを新規で作成し、Level上に配置します。

②SinglePropertyViewの用意

SinglePropertyViewを選択し、デザイナーウィンドウにドラックアンドドロップします。
image.png (9.7 kB)

③EditorUtitlityWidgetのBlueprint内に変数を用意

グラフウィンドウに切り替え、Boolean型のIsVisibilityという変数を用意してください。
image.png (11.2 kB)

④SinglePropertyViewの表示処理を作成

NewPropertyNameには④で設定した変数名を設定してください。
※SinglePropertyViewを使う際はSetPropertyNameでプロパティ名を設定する必要があります。何も設定しなければSinglePropertyに何も表示されませんので注意してください。
image.png (111.4 kB)

⑤ActorのVisibilityの設定を行えるように作成

Propertyが変更されたときに呼ばれるイベントを使ってVisiblityの変更を行えるように実装を行います。
image.png (144.8 kB)

⑥RunEditorUtilityWidget実行

一通り実装できたのでRunEditorUtilityWidgetを実行して表示を確認してください。
IsVisibilityが表示されていればOKです。
image.png (3.5 kB)

⑦確認

IsVisibilityのチェックボックスを入れたり外したりしてパラメータが変更されているか確認してください。
①で配置したActorをアウトライナ上で選択後、DefaultSceneRoot内のレンダリングにVisibleという項目がちゃんと変わっていれば成功です。
image.png (52.2 kB)

7.まとめ

UMGでボタンやTextを配置せずともDetailesViewやSinglePropertyViewを使って値など渡してあげれば、配置に悩まずともツールを作ることができそうです。
上手く使ってツール作成を行ってみたいと思います。
皆さんも、是非使ってみてください!

最後まで見て頂き有難う御座いました。


【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。