ADX+UEでサウンドの配置作業を効率化する（基本編1）

# はじめに
アンリアルエンジン4とサウンドミドルウェア「ADX for UE4」を連携させ、サウンドの配置作業などを効率化してみます。
UEのエディタユーティリティ機能を使用し、自分でエディタを拡張していくイメージです。
![A_00A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/94621596-1e66-b2c9-93fa-aecfef5aa3f6.png)
処理は通常のブループリントと同じ感覚で書くことが可能です。
これを使うことで、自分以外のデザイナーがコードやBPをいじらずとも、レベル上のサウンドをデザインすることができます。


# 前提

当記事ではUE4.26.1を使用します。ADX LEがUE5に対応した際は同じ実装法が使えると思われます。
基本的にブループリントのみでの実装を想定しています。
ADXはインディー向けの「LE版」であれば、無料で使用できます。
https://game.criware.jp/products/adx-le/

なお、最近ADX2からADXへ名称が変更になりましたが、ツール構成は変更ありません（2がないから古いほう、というわけではありません）。

記事執筆時点のADX for UE4のSDKバージョンはv1_29です。

ADX2 for UE4の導入や基本的な使い方は以下の記事にあります。必要に応じて参照してください。
ADX2 for UE4の導入で、一歩上のサウンド表現を（導入編）
https://qiita.com/SigRem/items/4250925f6d66a4fd287a
ADX2 for UE4の導入で、一歩上のサウンド表現を（実践編）
https://qiita.com/SigRem/items/c089b71c42e898980a46


# 実装

## エディタユーティリティ機能

エディタユーティリティは、ブループリントを使ってユーザーがエディタ挙動を設定できる機能です。
また、専用のUIを作ることもできます。こちらは**エディタユーティリティウィジェット**（以下EUW）と呼ばれます。
![A_00B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d6042a66-0c5e-719e-a36b-87603bac7375.png)
（画像はUE5プロジェクトでの使用例です）
ボタンやテキストなどを自由に配置でき、挙動もプロジェクトに合わせてカスタム可能なため、一度作ってしまえば開発の大きな助けになるでしょう。

## エディタユーティリティウィジェットを実装する

### エディタユーティリティウィジェットを作成する

まずはEUWを新規に作成します。
コンテンツブラウザの空欄で右クリックし「Editor Utilities」→「Edit Utility Widget」を選択します。
![A_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/04421dd7-8c45-1187-668e-826ad18c7ec8.png)
適当に名前をつけます。
![A_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cb45cbe1-5157-2929-9a6e-96532ef71392.png)

UEWから呼び出すアクターを新規に作成します。
コンテンツブラウザで右クリックし、「Blueprint Class」を選択します。
![B_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6b9a742a-a548-23de-b2ac-ab8d9fc2b5ca.png)
親クラスは「Actor」とします。
![B_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2a49e33b-81cc-e4e1-0e40-b4320d5174a9.png)
分かりやすい名前をつけます。
![B_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0f298848-48ed-d9de-2f04-c3916bbc5506.png)
アクターをダブルクリックして開き、「+Add Component」から「Atom Component」を追加します。
![B_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/06ca31e6-ddf6-c900-9a89-f70b40b52d00.png)
Detailsパネルにて、再生するサウンドを指定します。テストの際に分かりやすくするため、ループする環境音などがいいでしょう。
![B_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4767d45a-aba3-4b4a-0add-c56793bc7831.png)

「BP_CommonSound」を閉じます。
先ほど作成したEUWをダブルクリックして開くと、UMGと同じようなエディタ画面が起動しました。
![A_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/05382802-0db5-cd9e-2859-3718b84d5d20.png)


### UIを配置する

通常のUIと同じように、テキストやボタンを配置していきます。
左のPaletteパネルからドラッグアンドドロップすると各要素を配置することができます。
![A_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5872b816-90ea-f290-6a6d-1fd743effc38.png)
TextとButtonを組み合わせて簡単なものを作ってみました。
Buttonの中にTextをドラッグすると、Buttonの子にでき（中にテキストを配置でき）ます。

ボタンを選択し、Detailsパネルで分かりやすい名前をつけておきます。
また、名前の横の「Is Variable」にチェックがついていることを確認します。
ここにチェックがついていると変数として認識され、BPからアクセスすることが可能になります。
![A_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d1ec6e35-0687-6403-a2d2-d318156da6e2.png)
パネルを下にスクロールし、Eventsの「**On Released**」をクリックして、**ボタンが押して離された**際のイベントを追加します。
![A_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2a30506a-cdc0-8e8b-71cd-30dd2528bff4.png)
自動的にグラフへと遷移しました。
![A_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/db56d9a1-68cf-7fe5-910e-409a9beeb6bb.png)
UIのデザインとBPグラフは右上のボタンで切り替えることができます。
![A_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/07dc6c9c-4c94-0d29-76fa-3f55f28d0a6b.png)


### EUWの処理を作成する

「ボタンを押すと指定した場所にサウンドが配置される」処理を作ります。
さて、エディタ上でユーザーが指定している場所を取得したいのですが……
**Get Selected Actors**は現在レベル上で選択中のアクターを取得します。
この位置にサウンドを配置してみることとしましょう。
![A_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/17f803b8-650b-18f5-54af-29839d7052cc.png)
エディタ上では複数のアクターを選択できるため、値は配列として返されます。
0番目の（最初に選択した）アクターを選び、**GetActorLocation**で座標を取得します。
![A_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/49e1dcc0-b173-f296-9e75-e25e69ecfc7c.png)
**SpawnActor from Class**ノードで先ほど作成したアクター「BP_CommonAtom」を配置します。
![A_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a1d99d62-4539-b165-5859-d8692166494b.png)


### EUWを使用してサウンドを配置する

作った実際にEUWを実際に使ってみましょう。
コンテンツブラウザ上でEUWを選択して、右クリックし「Run Editor Utility Widget」を選択します。
![A_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a400dc8e-d436-5dd3-c3b3-b646553d066a.png)
エディタ上にEUWで作成したUIが現れます。
![A_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9f590a55-82fc-943f-37b5-6d61c7507294.png)
適当なアクターを選択した状態で、「Atomサウンドを配置」ボタンを押します。
![A_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3d9f16b8-fde6-581f-e770-2d13d1e9729a.png)
ボタンを離した瞬間に新しい「BP_CommonSound」が現れました！ワールドアウトライナからもアクターが確認・操作できます。
![A_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ca372271-176d-19ef-6ea7-94be57f239e9.png)
レベルを再生すると、その位置から環境音が聞こえるようになります。
![A_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8e04ecff-095d-2fc4-651b-1332d6e1e581.png)


### 処理結果をテキストで通知する

現状アクターが配置されたかどうかは実際にワールドアウトライナを見に行くしかないため、少し不便です。
連続してボタンを押すことで、意図せず同じ位置にたくさんのアクターが置かれてしまう恐れもあります。
そこで、簡単なメッセージをEUWに表示して処理がされたかどうかを判別できるようにしてみましょう。

ボタンの下にテキストを配置します。
![A_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9fd72bc5-951c-fcad-4f4a-8c5261ceff35.png)
名前を分かりやすくつけ、「Is Variable」にチェックを入れます。
テキストが長くなり、テキストブロックから見切れてしまう可能性があるため「Size To Content」にチェックを入れます。
![A_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/305f3af0-6ca0-4c24-8186-4048e596945a.png)
グラフに移動します。配置処理後に**SetText**でテキストの内容を変更します。
テキストは**Get Display Name**と**Append**を組み合わせ、「（アクター名）を配置」と出るようにします。
![A_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7a75d711-d301-1958-19d6-857b5c16e25b.png)
これで、配置されたアクター名が表示されるようになりました。処理が正常に行われたか一目で分かりますね。
![A_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dfdcf5e3-8959-19ba-d6c8-6ce326ae2143.png)

ついでに処理が失敗した場合のメッセージも出してみましょう。
この処理はアクターが選択されていることが前提になるので、もし何のアクターも選択されていなかった場合は処理が失敗することになります。
選択されているアクターが有効かは**Is Valid**ノードで取得できます。
**Branch**の条件にして処理を分岐させます。
アクターが有効ならそのままサウンドを配置させます。
![A_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/111c59b1-aea1-b51a-0d17-dda3fbdee9b0.png)
有効でない（アクターが選択されていない）場合、テキストにアクターが選択されていない旨を表示します。
![A_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a73d63ca-7085-9ccf-b063-d36151b7d55a.png)
アクターではないものを選択した状態では失敗したメッセージが表示されるようになりました。
![A_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/41760279-6058-f3bd-3b67-ca1ed504d33c.png)
今回の全体の処理はこんな感じです。
![A_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/48b7683d-2005-e9be-2233-966bf5ade045.png)


簡単にEUWを使用してサウンドを配置してみました。
この機能を使えば、UEになれていないデザイナーも必要な機能だけを触ることができるため、ミスの軽減や効率化に繋がります。
一人での開発を行っている場合でも、いちいち乱雑な作業を繰り返さなくていいため非常に便利になります。