ADX+UEでサウンドの配置UIをシンプルに整える

# はじめに
アンリアルエンジン4とサウンドミドルウェア「ADX for UE4」を連携させ、サウンドの編集機能をシンプルなUIに抑えてみます。以前の記事「**ADX+UEでサウンドの配置作業を効率化する（基本編）**」に処理を加えて作っていきますが、当該部分を要約しているためこの記事だけでも試すことが可能です。

UEのアウトライナやDetailsパネルでの編集は詳細な設定が可能ですが、レベル上のサウンドのみをデザインする用途では情報量が多すぎることがあります。UEに慣れないデザイナーにサウンドデザイン作業を任せる場合、混乱を招くことがあるかもしれません。
![A00a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7b6b6e40-582a-0797-72af-d9c602c38c59.png)


そこでこの記事では、UEのEditor Utility Widget（以下EUW）機能を使い、サウンドのプロパティについて表示・編集可能な情報を制限し、またスライダーなどの視覚的なデザインへと置換します。
![A00b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a3015e4a-efdb-7b9e-851a-d087a097b763.png)



# 前提

当記事では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


# 実装

## サウンド再生用アクターの作成

サウンド再生を行うためのアクターを作成します。
これは以前の記事「ADX+UEでサウンドの配置作業を効率化する（基本編）」で作成したものと同一なので、そのアクターがある方は飛ばして構いません。
https://qiita.com/SigRem/items/efd9a7b9aef44f463d73

Atomコンポーネントを持つシンプルな構造です。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ec77cc4a-c986-8f1f-d54f-b0cb5f0cae8d.png)

4つの変数を用意します。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cf15f30b-3eae-afc5-d26f-c01ba04fdf29.png)
- **Sound** （Sound Atom Cue型）：再生するサウンドを指定する変数です。
- **Volume** （float型）：ボリュームを編集するための変数です。
- **Pitch** （float型）：ピッチを指定する変数です。
- **AutoActivate** （bool型）：レベル開始時に自動的に再生開始するかを選択する変数です。
すべて目玉のマークを押し、外部からアクセス可能にしておきます。

Construction Scriptを次のように書きます。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cdaeb8be-949b-5028-c22d-b0c5e080a400.png)
いずれも変数の内容をAtomComponentに反映するものです。


## EUWのUIを作る

![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b2e5eb32-80ef-1478-cb68-597a344ef5c0.png)
EUWを新規に作成し、ダブルクリックして開きます。


### EUWの配置

テキストと「Details View」を配置します。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3baf1c19-2960-9221-8fc0-6c6ef8611994.png)
「ActorName」のテキストはDetailsパネルにて「Is Variable」にチェックをつけておきます。
![A05b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f47d44cc-9979-997a-be80-fbda4a92e494.png)


### Details Viewの設定

「Detais View」はDetailsパネルにて「Parameters to Show」の項目を追加し、「Sound」と入力しておきます。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b9f62cc5-03d2-31bd-bab9-6bc6df57b352.png)
これでEUW上で編集できる設定を「再生するサウンド」だけに制限できます。
![A09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/56622939-8729-f021-3e3a-ef27816424aa.png)


### スライダーの追加

さらにテキストとスライダーを追加します。
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8bd2a2d9-8d44-2b53-989a-a82bfccbcc38.png)
スライダーは名前を分かりやすいものにしておき、「Is Variable」のチェックがついていることを確認します。
![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/459c6e9d-9590-f2cd-1454-06538299c50a.png)
ボリュームとピッチに対してスライダーを作っておきます。


### チェックボックスの追加

さらにテキストとチェックボックスを追加します。
![A10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2647c9c6-090d-5ed6-e666-ab66c6d6872d.png)


### スライダーの設定

スライダーの初期値、最小値、最大値を指定します。
![A12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0c630e71-64aa-10e3-8ee8-0d284845a328.png)
![A13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b527f8ab-decd-0e6d-8a81-8d3f0edd7c5f.png)

ボリュームやピッチを操作するスライダーの詳細な数値を表示したい場合は、テキストブロックを横に置いておくといいでしょう。数値の反映は次の項で行います。
![A14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6f524ee8-c96d-4986-c7a4-65b6515c20e0.png)


## EUWの処理を実装する

タブを切り替えてイベントグラフに移ります。
![B01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a8504935-13be-2e67-3936-8ecb473f0192.png)


### 基本処理

選択中のアクターの情報を表示する処理を書きます。
次の画像と同じように組めばOKです。処理の詳細な解説は基本編にあります。
![B02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bed94a9d-ca07-87d9-24db-47ef3a17f8ee.png)
![B03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7251c4de-c5d4-be97-e3e6-4eea582784c4.png)


### 編集中のアクターを変数化

選択中のアクターが「BP_CommonSound」だった場合、ボリュームやピッチなどにアクセスしたいのでキャストして変数化しておきます。
**Cast To BP_CommonSound**ノードの青いアウトプットピンを右クリックし、「Promote to Variable」で変数化します。
![B04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/52961504-2a5c-c61f-8ee6-df0bd86fb3e7.png)
「CastedActor」と名前をつけ、変数として格納しました。
![B05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e9b6232d-725f-57b9-17dd-7b1076be48c2.png)
選択中のアクターが「BP_CommonSound」クラスではなかった場合、「CastedActor」変数をクリアしておきます。


### スライダーの数値をアクターに反映する

デザイン画面に戻り、スライダーを選択してDetaisパネルから「On Value Changed」の「+」ボタンを押します。
![B06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0cd45a39-4d33-614f-ca18-5259e4c60d7a.png)
自動的にイベントグラフに移り、新たなイベントが追加されます。これはスライダーの数値が変更された際に発火するイベントになります。
![B07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/58391bbd-bf58-c26b-f6d1-63810f946716.png)
スライダーの現在値をアクターの変数に反映します。
**この数値はアクターのConstruction Scriptを経由し、Atomコンポーネントのパラメータに反映されることになります。**
![B08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0f694a48-828d-1414-a158-8d02910b371a.png)
ピッチも同じようにイベントを作成します。
![B09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2d96f07e-e566-17ab-9da6-628d94e785bc.png)
スライダーの横にテキストを配置した場合、「Text」の横にある「Bind」ボタンを押し、「Create Binding」を選択します。
![B10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c5bc1302-fe1e-457e-43fa-305681fb4b6f.png)
次のように処理を書きます。数値が変更された際、この処理がテキストに対して走りテキスト内容も反映されることになります。選択中のアクターが「BP_CommonSound」クラスではなかった場合、テキスト内容は「-」が返されます。
![B11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ccb4f82e-ac8d-96b5-16c1-adf910d64605.png)
ピッチの数値に対しても同様です。
![B12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/38ab5cb8-50a1-366c-e6c7-0c8144523ede.png)

さて、スライダー機能ができたように思えるのですが、実際に使用してみると問題があることに気づくかもしれません。
スライダーの初期値と異なるパラメータを持つアクターを選択した際、アクターの数値とスライダーの位置にずれが発生してしまうのです。
![B13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f54cb08e-80ba-ac2a-6d22-1a00610fdcba.png)
（数値ではボリュームは「0.6」となっていますが、スライダーの位置は「1.0」にあります）

これを解決するには、アクター選択時にスライダー位置を操作してあげる必要があります。
**Set Value**ノードでアクターのパラメータ値をスライダーの数値に代入します。
![B14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d826d80e-47cf-b0c7-3600-247f24df2265.png)
これでスライダーと数値のずれが解消されました。
![B15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/75832bb9-56c1-2fcb-42d7-2f774af061b0.png)


### レベル開始時の挙動を選択する

チェックボックスを入れた場合のみ、レベル開始時からサウンドを再生する挙動にしてみましょう。
スライダーと同じ感覚の処理で大丈夫です。
![B16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/797cf667-28dd-643f-bdf7-9fd8ed5218d1.png)
![B17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/675dda38-538a-f942-0bdf-40f481687000.png)
また、例によってアクター選択時にチェックボックスの値も代入してあげると表示のずれがなくなります。
![B18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e17c53b8-3861-de9e-9e00-8a264d8b431d.png)


## 非対応アクター選択時にUIを非表示にする

現状では「BP_CommonSound」クラス以外を選択した場合も一応スライダーが操作できてしまいます。
実際にパラメータ操作は行われないため問題はなさそうですが、少し混乱が起きそうです。
操作不能なことを明示するため、「BP_CommonSound」クラス以外を選択している場合、そもそものUIを非表示にしてしまいましょう。
非表示にさせたいパーツを選択し、「Behavior」にある「Visiblity」の「Bind」をクリックします。
「Create Binding」を選択して表示/非表示の挙動を作成します。
![C01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f4960a5e-4515-3673-1813-47bc0e59f6e6.png)
キャストが成功していれば表示、そうでなければ非表示に分岐させます。
![C02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d8a976d4-39cf-6991-47b5-aec8d2d453ba.png)
一度挙動を作ってしまえば、他のパーツに対しても同じものを使い回すことができます。
この表示/非表示設定を反映したいパーツすべてのDetailsパネルで「GetVisiblity_0」を選択します。
![C03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/868ed129-d13d-9f3c-ce4c-01ea81264c9b.png)

選択しているアクターのクラスによってUIの表示/非表示が変わるようになりました。
![C04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/521221fb-976c-9d0e-338b-4b988026157a.png)
![C05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/953e4aba-ef76-4ec1-16c7-ee4c82e09c6f.png)