UE5 + ADXで作る、軒下での雨音表現（基本編/新バージョン対応版）


# はじめに
ADXアンバサダーとして記事を書いておりますSigと申します。
この記事ではアンリアルエンジン5とサウンドミドルウェア「ADX for UE」を連携させ、ゲーム内の**雨の環境音**の挙動を実装します。
UE5.3+「ADX LE UE SDK(2.01.00)」を使用します。

## 今回の実装例
雨天の屋外から屋内へ進入するシチュエーションを考えてみましょう。
軒下に入ったタイミングですぐに雨音が小さくなるのではなく、**段々と雨の音をくぐもらせながらフェードアウト**させることで自然な雨音の変化を実装してみます。
（サンプルはUE4で作られた動画ですが、UE5でも同じように処理を作ることが可能です。本記事では新バージョンのリリースに伴い、UE5での実装を扱うよう編集しています）
[![サンプル](http://img.youtube.com/vi/Hb-gFNz_Q0A/0.jpg)](https://youtu.be/Hb-gFNz_Q0A)
▲クリックすると動画に飛びます

# 前提
「ADX for UE LE」を使用します。導入や簡単な使い方は以下の記事にあります。
ADX for UEの導入で、一歩上のサウンド表現を（導入編）
https://qiita.com/SigRem/items/4250925f6d66a4fd287a
ADX for UEの導入で、一歩上のサウンド表現を（実践編）
https://qiita.com/SigRem/items/c089b71c42e898980a46

今回は雨音のコントロールに**AISACコントロール**を使用します。
AISACコントロールの詳細な説明はこちらの記事で書いていますが、今回の記事だけでも画像の通り作れば大丈夫です。

**ADX + UE5でインタラクティブミュージック（AtomCraft編)**

https://qiita.com/SigRem/items/8af9b7d8445477906741

**ADX + UE5でインタラクティブミュージック（ブループリント編）**

https://qiita.com/SigRem/items/b53dc03d01c5f8fe1465


# やること
- AtomCraftでキューを作成
- Aisacコントロールを使用し、動的なエフェクトを作成
- UE5にインポート
- ブループリントでプレイヤーの挙動を監視、必要に応じて雨の音にエフェクトをかける


# 実装

## AtomCraft側

### キューの作成
キューシート内で新規キューを作成します。キューのタイプは「ポリフォニック」にしておきます。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/847679a4-f74d-468a-8ee0-c02752094384.png)
適当な名前にリネームします。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/061ff5df-ae93-d58d-a897-9fe8d1066f41.png)
マテリアルから雨音のサウンドをひとつ、キュー内にドラッグアンドドロップしてトラックを作成します。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/568d2897-d257-a7dc-63f8-49769a32f8ad.png)
**マテリアルツリー**の雨音のサウンド素材はループ設定にしておきましょう。ツリー内で該当のサウンドを選択します。
![A17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b87c9392-a816-ebf8-3ad9-72150acf8039.png)
エディタ右側のインスペクター内で「ループ情報の上書き」を**True**にします。
![A18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f761f952-88de-8e29-689b-10bf0ed94bf9.png)


### AISACコントロールの作成（雨音の大きさと曇り具合を設定）
UE5から雨音をリアルタイムにコントロールする手段として、雨音のトラックにAISACコントロールを設定します。
雨音のトラックを右クリックし、「新規オブジェクト」→「AISACの作成」を選択します。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a541cc8a-b0b7-f51f-2283-a799c5195878.png)
適当な名前をつけます。AISACグラフタイプは「ボリューム」です。雨音の大きさを変化させるためのグラフです。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5d660ba6-b315-5e0b-fa21-203b69f43084.png)
すぐにAISACへの編集はせず、一度タブを切り替えて「タイムライン」に戻ります。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c8e0d0ea-5bb8-8f3f-0f1e-d5c752953cc5.png)
再び同じように「AISACを作成」します。今度は雨音のくぐもり具合を変化させるグラフを作ります。
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5653d278-7af0-8664-b3f9-c947e5557d6b.png)
今度は「AISACグラフタイプ」の欄をクリックしてグラフタイプを変更します。
![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8713ffcc-d0ca-ac5f-e68a-c8f7e31c97af.png)
**バンドパス - Cof高域**を選択します。
![A09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/191dcf56-2621-0c35-06d2-a6064b3aa015.png)
適当な名前をつけて「追加」します。
![A10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e482a496-222a-e50c-db1e-3851a3c81d21.png)
ふたつのAISACコントロールが作成されました。
![A11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d6901e42-1712-fca0-35ff-597d6fc14b10.png)


### AISACコントロールの編集
ボリューム、バンドパス共にグラフを編集します。
AISACリストから「ボリューム」を選択して黄色のグラフを動かし、適当な曲線を作ります。線の途中をクリックすればコントロールポイントが追加され、コントロールポイントを右クリックするとカーブタイプが変更できます。
![A12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/09af38c8-3262-700a-bda7-b6507a8b788d.png)
次にAISACリストから「バンドパス - Cof高域」を選択して紫のグラフを編集します。
![A13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1ba022e6-f551-b9c0-10b0-53282131e756.png)
再生ボタンを押し、上部のAISACコントロールの値を左右に動かすと雨音が変化します。何度かチェックし、いい感じの雨音に仕上げましょう。
![A14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0d0a660b-13a9-57ef-0e3a-d92f63ab16b8.png)


### キューシートのビルド
作業が終わったら、キューシートをビルドしてエクスポートします。
![A15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/954c120b-651a-619f-f2ad-a461e373dfa0.png)
ビルドしたいキューシートにチェックがついていることを確認してからビルドしてください。
![A16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/05b15e53-c64f-3898-4dd2-dfd05e654137.png)


## UE5での実装

### キューシートをインポート
ビルドしたacfファイル、acbファイルをエクスプローラからコンテンツブラウザ（コンテンツドロワー）にドラッグ&ドロップし、キューシートをインポートします。

acfファイルインポートの際に出てくるダイアログでは、どちらも「Yes」を選択します。
これにより、プロジェクトの設定が自動的に完了します。
![B01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7a66eb2b-ea15-2c3f-d629-14d0263a4665.png)
![B02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/853ba553-76f4-3efa-de9f-9dd8ce42708a.png)

コンテンツブラザにアセットが追加されます。
![B03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/57690037-048a-4667-3c3b-d4f3171e6c9d.png)
キューシートをダブルクリックして開き、キューが再生できることを確認します。
![B04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/03ca42d5-fbb3-615e-f3cf-34763d48f738.png)


### 必要なアクターの配置
雨音、および軒下に入ったことを感知するトリガーをレベルに配置します。
キューシートからドラッグ&ドロップし、キューをレベルに配置します。
![C01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2c3bda25-ec6a-3fb9-eee8-a1f711a4b9a3.png)

アクターの配置ボタンから、「All Classeds」→「Trigger Box」を選択してトリガーを配置します。
![C02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9e4e85e6-87bb-8ba6-2274-bdcb74813118.png)

直方体のトリガーが設置されました。
![C03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/97f8016f-d4ee-1707-14be-c7d63f7a2651.png)

ボタンを押し、「trigger」と入力することで該当するアクターが検索できます。この機能を使うとすばやく配置できるでしょう。
![C04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7b7f8ef0-5e76-e56c-fd1a-ed7d56245c84.png)

「Box Extent」の数値を変え、適切な形にサイズを整えます。
![C05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f98fb6cd-09e4-71d4-dc90-2fc5b5794da1.png)

「Line Thickness」を上げると輪郭が太くなり、視認性が高まります。
![C06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9440d967-e53f-38d4-3d9a-4e01eeb310f4.png)

トリガーは分かりやすいような名前に変えておきます。
![C07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2dee60d1-b7fa-47b4-9a90-804ca54d9472.png)



### イベントの作成
トリガーを選択します。
レベル上から直接クリックしてもいいですし、「Outeliner」パネルで選択してもいいでしょう。
![C08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/928819fb-51af-4022-dc62-24ea88072b9e.png)

レベルブループリントを開きます。
![C09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/962d4334-5c01-09bf-dd20-1c6722df4a89.png)

イベントグラフ上で右クリックし、「Add Event for Trigger Box」→「Collision」→「Add On Actor Begin Overlap」を選択します。
![C10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a148235e-5c76-0f0e-3900-58b1d76da218.png)
イベントノードが配置されました。
![C11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e3e5f566-c799-c201-506f-54b9f10252b8.png)
同じように「Add On Actor End Overlap」を選択します。
![C12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9c7cf728-752c-d719-2d32-05768abbb7f7.png)
これで「アクターがトリガー内に進入した際」「アクターがトリガーから退出した際」のイベントが追加されました。
![C13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/09ad8137-e3c3-a14a-956e-eec867156b1e.png)




### 軒下での雨音表現
ブループリントで軒下での雨音表現を実装します。
またビューポートに戻り、Atom Cueを選択します。
![D01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d4e36ca4-504f-4aa9-766f-a1b2220cdaac.png)

レベルブループリントエディタで空欄を右クリックし、「Create a Reference to （アクター名）」を選択します。
![D02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e1714a5f-cde5-38c8-154a-c557e32411d4.png)

Atom Cueのリファレンスノードが現れます。
![D03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bf3236ff-803d-5f45-4518-94ffa8cf78dc.png)


軒下に入った際の処理は以下のようになります。

トリガー内にアクターが入ったことを感知し、それがプレイヤーであるか判別します。
![D04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bdc5eb63-d95e-1baf-191f-99a0dabe4439.png)

**Set Aisac Control Value**ノードを使い、AISACコントロールを操作し雨音を変化させます。
![D05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dceef627-91f5-4fdf-cdd7-982cc566dd33.png)
このままでは「Aisac Control」の指定がないため、新規に変数として作成します。
青いインプットピン「Aisac Control」を右クリックして「Promote to Variable」を選択します。
![D06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8d2d9fe2-65b9-82c9-3a48-fb42504a3c5a.png)
変数とノードが作られるので、名前をつけます。今回は「Aisac Control_00」としました。
![D07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0db3d292-5691-ecb0-cf13-25d4c2a017a6.png)
**一度コンパイルしてから**、Detailsパネルにて「Default Value」から「AisacControl_00」を選択します。
もう片方の**Set Aisac Control Value**がエラーを吐いていますが、後ほど解決しますので問題ありません。
![D08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7ebf9493-0778-2661-1b85-2ab0635e44b9.png)
もう片方のノードでもインプットピンを右クリックし、変数を作り名前をつけます。
![D09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/38ccc748-4f84-159b-8351-3a338bd88065.png)
こちらは「Default Value」に「AisacControl_01」を指定します。
![D10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/03ccf72d-1fa8-8667-64e4-395ba74c15f3.png)
「Value」の数値を「0.5」「0.3」とします。
![D11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/44a64b2b-d292-b4f4-4a76-56b3580735d2.png)

**On Actor End Overlap**イベント側も同じように処理を組みます。基本的にコピペで大丈夫です。
こちらは「Value」に「1.0」、「1.0」を指定し、軒下から出た際に雨音が元に戻るようにします。
![D12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9df0c800-6cde-8795-2247-3b212b118a4c.png)


一度テストしてみましょう。トリガーに入ると雨音が変わり、出ていくと元に戻るはずです。
![D13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/be0633ce-f0ae-0bb1-d80f-2c7d28f59ace.png)

これでは変化が即時に起こってしまうので、タイムラインを使って段々と音がフェードするように実装します。

### タイムラインによるフェード表現
イベントグラフの空いている場所で「Add Timeline」をクリックしてタイムラインノードを追加します。
![E01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0acc54bc-ac46-97df-c0d6-02d552584ea6.png)

作成したタイムラインノードに名前をつけます。
![E02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/27615ab3-93a4-cf2f-be60-9ac11853fa95.png)

タイムラインノードをダブルクリックして開きます。
![E03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d359c654-08b8-a73c-697f-2a5e75942731.png)

「Add Float Track」を押してトラックを追加します。
![E04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e475943c-ceb0-9fdf-a42f-52e8ef0b15e6.png)

ふたつのFloat Trackを作っておきます。それぞれ「Float_Volume」「Float_Pass」と名前を付けました。
![E05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0bed1cc0-7774-a340-f318-d566bca5c916.png)

グラフ内で右クリックし、キーを追加します。
![E06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4ff19f10-9356-ca78-c120-b819c10cd35b.png)

数値が「1.0」から「0.5」になるようグラフを作ります。
![E07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/00764234-a53a-41d2-0a3e-92601b63c29e.png)
ポイントを選択して右クリックから「Auto」を選択するといい感じの曲線に補完されます。
![E08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f923277f-ca78-1d07-cdbe-21c2089e42e7.png)

ふたつのグラフを画像のように作ります。
![E09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bb039e42-389e-6edb-9bc1-a2065bc3ffd0.png)

タイムラインの長さを1秒にしておきます。
![E10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2de77191-f882-9a70-c02b-7465356c6be1.png)

イベントグラフに戻り、画像のように接続します。
トリガーに入った際は**Play**、出た際は**Reverse**です。
![E11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b38f12c9-2559-9bc3-f616-9bae9a7bfce6.png)

最後に、タイムラインの現在の値を各AISACコントロールに繋げば実装完了です。
![E12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dbda20bc-843f-19c4-398b-0abc7e7440be.png)

この状態でゲームを再生すると、軒下に入る/出ると1秒間かけて雨音が変わっていくような聞こえ方になっています


これで軒下の雨表現が実装できました。
発展編の記事では、さらに細かい表現を加えて臨場感を加えてみます。
よろしければ参照してみてください。

**UE5+ADXで作る、軒下での雨音表現（発展編）**
https://qiita.com/SigRem/items/d80cb1d730c5328af216