[UE5] Editor Utility Widget でファイル選択ダイアログを利用する

執筆バージョン: Unreal Engine 5.0

みなさんこんにちは。エンジニアの小林です。

Unreal エディターのユーザーインターフェースに新しい要素を追加できる Editor Utility Widget 機能はとても便利です。今回はその Editor Utility Widget でファイル選択ダイアログを利用する手順をご紹介します。

おおまかな流れ

ブループリントビジュアルスクリプティングシステムを使用して実行フローを構築して行きます。

(1) Editor Utility Widget アセットで File Path 型の構造体変数を作成する。

(2) (1) を Details View ウィジェットで表示。新しい値が入って来たらイベント通知を受ける。

それでは順を追ってご説明します。

1. アセットの作成

Unreal Engine のレベルエディターを開きます。

コンテンツブラウザーの +Add ボタンをクリック、ポップアップメニューから Editor Utility Widget（Editor Utilities > Editor Utility Widget）を選択、アセットを作成します。

2. ウィジェットの作成

作成した Editor Utility Widget アセットを右クリック、コンテキストメニューから Edit … を選択して Editor Utility Widget エディターを開きます。

Editor Utility Widget アセットを Editor Utility Widget エディターで開きました。

エディター右上の Designer | Graph 切り替えボタンの状態で、現在 Designer モードであることを確認します。

Palette パネルから Details View（EDITOR > Details View）を選択、ビジュアルデザイナーへドラッグ＆ドロップして Details View ウィジェットを作成します。

作成した Details View ウィジェットの表示サイズを広げておきます。（例：500.0 x 100.0）

Details View ウィジェットを選択した状態で、Details パネルの Categories to Show（View > Categories to Show）のプラス記号（＋）をクリックします。

Categories to Show に配列と値（Index [ ] と None）が追加されるので、Index [ 0 ] の値を FileAccess へ変更します。

3. 変数の作成

Editor Utility Widget エディターを Graph モードへ切り替えます。

エディター右上の Designer | Graph 切り替えボタンの Graph ボタンをクリックします。

My Blueprint パネルで + Add ボタンをクリック、ポップアップメニューから Variable を選択して新しい変数を作成します。

My Blueprint パネルもしくは Details パネルを使って、新しい変数の名前を TargetFile へ、変数の型を File Path 構造体型へ変更します。

最後に Details パネルの Category（Variable > Category）でカテゴリー名を FileAccess とします。一覧から選ぶのではなく新規カテゴリー名として文字を入力します。

4. ウィジェットの表示

My Blueprint パネルの Details View ウィジェット変数を Event Graph パネルへドラッグ＆ドロップして Get ノードを作成します。

作成した Get ノードのピンを伸ばしてコンテキストメニューから Set Object（View > Set Object）を選択、ノードを作成します。

作成した Set Object ノードの New Object 入力データピンを伸ばしてコンテキストメニューから Get a reference to self（Variables > Get a reference to self）を選択、ノードを作成します。

Event Pre Construct ノードの実行ピンと Set Object ノードの実行ピンをワイヤーで接続します。

5. イベントの設定

My Blueprint パネルで Details View ウィジェット変数を選択した状態で、Details パネルの On Property Change（Event > On Property Change）のプラス記号［＋］をクリック、イベントノードを追加します。

Event Graph パネルに On Property Changed イベントノードが追加されました。

My Blueprint パネルで TargetFile 変数を選択、Event Graph パネルにドラッグ＆ドロップして Get ノードを作成します。

作成した Get ノードの出力データピンを伸ばしてコンテキストメニューから Break FilePath を選択、ノードを作成します。

同じ要領で、Break FilePath ノードから出力データピンを伸ばして Convert to Absolute Path ノード（Utilities > Paths > Convert to Absolute Path）、そこから File Exists ノード（Utilities > Paths > File Exists）、そして Branch ノード（Utilities > Flow Control > Branch）と連なるようにノードを作成して行きます。

最後に On Property Changed ノードの実行ピンと Branch ノードの実行ピンをワイヤーで接続します。

6. 変数の値を差し替える処理

Branch ノードの右側に新たなノードを追加します。

My Blueprint パネルの TargetFile 変数を Event Graph パネルにドラッグ＆ドロップして Get ノードを作成します。

作成した Get ノードのピンを伸ばして、コンテキストメニューから Set members in FilePath を選択、ノードを作成します。

作成した Set members in FilePath ノードを選択した状態で Details パネルの FilePath > File Path チェックボックス［　］（As pin）をチェックオンして、Set members in FilePath ノードに File Path 入力データピンを設けます。