![](https://kinnaji.com/wp-content/uploads/2019/12/image-22-1.png)
目次
※この記事で使用しているUnrealのVersionは4.22.0Preview1です
※エディターの言語は英語バージョンで紹介させていただいています。
※今回はプロジェクトのテンプレート「Third Person」を使用しています。
※この記事のサンプルプロジェクトは以下URLにアップされています
サンプルプロジェクト
Editor Utility Widgetsお手軽拡張 レベル【★☆】
UE4.22が公開されたので、個人的にうれしいアップデート機能「Editor Utility Widgets」を超簡単にですがご紹介したいと思います。
「Editor Utility Blueprints(Blutility)」というエディター拡張機能は、以前から存在しましたがこの「Editor Utility Widgets」は自作のウィンドウを生成できる素晴らしい機能です。
Blutilityはエディター左上の「Edit」→「Editor Preferences」から「General – Exponental」→「Tools」→「Editor Utility Blueprints(Blutility)」のチェックを入れないと作成できませんでしたが、 Editor Utility Widgets は初期設定なしで作成できるようになっております。
作成方法は、コンテンツブラウザ左上の「AddNew」から「Editor Utilities」→「Editor Widget」を選択します。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_01.png)
作成したアセットをダブルクリックすると、まっさらなウィンドウが開きます。
アセットを右クリックして「Edit Blueprint」を押すことでWidget/BlueprintEditorが開きます(このあたりはBlutilityと似ています。)
![](https://kinnaji.files.wordpress.com/2019/02/monitor_03.png)
![](https://kinnaji.files.wordpress.com/2019/02/monitor_02.png)
まずはEdit Blueprintを押してみましょう。
開いてみると、一見普通のWidgetBlueprintとなんだ変わりません。(デフォルトでCanvasPanelのみあるようです)
![](https://kinnaji.files.wordpress.com/2019/02/image-1.png)
試しに「Button」Widgetのみ入れ、アセットをダブルクリックすると、ちゃんとウィンドウ内にボタンが現れました。すごい。
![](https://kinnaji.files.wordpress.com/2019/02/image-2.png)
![](https://kinnaji.files.wordpress.com/2019/02/monitor_04.png)
つまり、このWidgetに配置したものは、エディター上で1つのウィンドウとして配置でき、その機能を使うことができるようです。
また、一度ウィンドウを開いたWidget Utilityは、エディター左上の「Window」→「Editor Utility Widgets」内にリスト化され、そこから直接ウィンドウを開けるようになっているようです。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_05.png)
さて、簡単な紹介をしたところで、記事のタイトルにある「監視カメラ」を作ってみたいと思います。
Editor Utility Widgetsで監視カメラを作る 【★★☆】
まずは「User Widget」から継承したWidgetBlueprintを作成します。
中にはImageのみ入れてあります。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_06.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-4.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-3.png)
つぎに「Place Editor Utility Base」クラスを継承したBlueprintClassを作成します。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_06-1.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-6.png)
中に処理などは特に書きません。
さらに追加で「Scene Capture 2D」クラスを継承したBluePrintを作成します。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_06-2.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-23.png)
こちらは、中を開いて、「CaptureComponent2D」コンポーネントのDetailの「Capture Source」を「FinalColor(LDR) in RGB」にします。
![](https://kinnaji.files.wordpress.com/2019/02/image-7.png)
さらにもう一つ、「Render Target」アセットも作成します。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_07.png)
作成したRender Targetアセットを開き、Detail内の「Texture Render Target 2D」の「SizeX」を480、「SizeY」を270に設定してあげます。
![](https://kinnaji.files.wordpress.com/2019/02/image-8.png)
さて、一通りの必要なアセットを作成したので、Editor Utility Widgetアセットを作成して編集モードにしましょう。
まずはDesignerモードで必要なWidgetを追加します。
CanvasPanel以下に「Button」と「ScrollBox」を追加しましょう。
ボタンの子には、「Text」も追加します。
ボタン、スクロールボックスは画面中央当たりに配置します。
スクロールボックスのSizeXは480にしておきましょう(SizeYは適度なサイズで)
![](https://kinnaji.files.wordpress.com/2019/02/image-10.png)
今度はGraphモードに切り替えてBlueprintを書いていきます。
![](https://kinnaji.files.wordpress.com/2019/02/image-19.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-12.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-13.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-20.png)
Does Exist Render Targetの中身
![](https://kinnaji.files.wordpress.com/2019/02/image-15.png)
Create Render Targetの中身
![](https://kinnaji.files.wordpress.com/2019/02/image-16.png)
Spawn Scene Capture And Initの中身
![](https://kinnaji.files.wordpress.com/2019/02/image-17.png)
Clear And Destroy Scene Capture Arrayの中身
![](https://kinnaji.files.wordpress.com/2019/02/image-18.png)
・変数初期値
「MaxMonitor」→4
「SceneCaptureActor」→空っぽ
「Path」→/Game/RenderTarget
「BaseName」→RT_Monitor_
※Create Render Targetの「Original Object」引数には、先ほど作成したRender Targetがあらかじめ設定されています。
これらの処理を書いたら、一旦編集ウィンドウを閉じ、Editor Widgetをダブルクリックして開いてみます。
![](https://kinnaji.files.wordpress.com/2019/02/image-21.png)
そして、Viewportのカメラを任意の場所に配置して、ボタンを押すと、Viewportのビューと同じ見た目が生成したウィンドウ内に現れれば成功です。
![](https://kinnaji.files.wordpress.com/2019/02/monitor_08.png)
![](https://kinnaji.files.wordpress.com/2019/02/image-22.png)
このように4.22からはBlueprintのみで拡張ウィンドウが生成でき、Widgetを作成するのと同じ用量でエディター拡張を行うことができます。
まだPreview版で不安定な挙動もありますので、正規アップデートが待ち遠しく思います。みなさんもこの機能を覚えて、使いやすいエディター環境の構築をしていきましょう!
※この記事のサンプルプロジェクトは以下URLにアップされています
サンプルプロジェクト