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

# はじめに
ADXアンバサダーとして執筆しておりますSigと申します。
アンリアルエンジン5と、サウンドミドルウェア「ADX for UE」を連携させ、ゲームの状況によって変化するBGMをセットアップする記事です。
ゲームの臨場感づくりに一役買うでしょう。
UE5.2+「ADX LE UE SDK(2.00.00.00)」を使用します。

## 前提
「ADX for UE LE」を使用します。導入や簡単な使い方は以下の記事にあります。
**ADX for UEの導入で、一歩上のサウンド表現を（導入編/UE5/ADX新バージョン改訂版）**

https://qiita.com/SigRem/items/4250925f6d66a4fd287a

**ADX for UEの導入で、一歩上のサウンド表現を（実践編）**

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



**AtomCraftで用意したサウンドデータを使用します。
AtomCraftの使い方については前編「ADX for UEでインタラクティブミュージック（AtomCraft編)」をご覧ください。**

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


## やること
- UE5にインポート
- ブループリントでパラメータを操作
- BGMのトラックごとにフェードイン・フェードアウトができるようにする
- テストプレイ


# UE5でのセットアップ

ADX for UEプラグインを導入したUE5プロジェクトを開きます。

## キューシートのインポート
ビルドしたacfファイル、acbファイルをインポートします。

acfファイルをインポートした際のダイアログでは、両方とも「Yes」を選択します。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ec399a99-964e-256a-258c-3c6b9a0a2f9d.png)
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/effa8a9d-ce4e-382d-66d2-77e95cf4afb2.png)
コンテンツブラウザにacfファイル、acbファイルがあることを確認します。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/27dd47d1-df3d-5545-aec9-19cccd33b02a.png)
キューシートアセットを開き、キューが再生できることも確認しておきましょう。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3930439c-d68b-3937-496e-31fabb63b2e3.png)


とりあえずレベル上に配置してみて、プレイ開始したらサウンドも再生されることをテストしておきます。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3c656a61-78e7-1bd4-04dd-3e33c83409d1.png)


### AISACコントロールの初期値設定
レベル上に配置したキューは、初期ではAISACコントロールの値がすべて「1.0」になっているようです。
この初期値を個別に設定してみましょう。
レベルに配置したキューを選択し、Detailsパネルを参照します。
「AISAC」内の「Control Modulations」の場所にある+ボタンを押し、項目を追加します。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a4a0efb9-9be1-b394-dc25-9e01f9f344fe.png)
「Control」を「AisacControl_00」にし、値を「0.0」に設定すればトラック1のボリュームが0になり、曲調が変化します。
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6320e6a6-c5aa-c9d9-5f26-30b07714015f.png)
同じように項目を追加していけば、他のトラックの音量（他のAISACコントロール）も初期値が自由に設定できます。
![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/66262a66-e61b-8a2e-d568-9037dfa63254.png)



# BPからの操作

## テスト用レベルの作成
今回はBGMの変化が効果的にテストできるよう、こんなレベル（マップ）を用意しました。
![B01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0549d948-6fcc-d97e-8d5a-4f39f08d3ae7.png)

スタート地点ではAパートのみ再生されており、少し進むとBパートがフェードインし、ゴールに近づくとCパートも加わります。
![B01B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/79413683-8681-1f56-ae81-0eeb257326ef.png)
Bパートエリア、Cパートエリアに入ったことを感知するため、**Trigger_Volume**を配置します。
「Quickly add to the project」ボタンから「Volumes」→「Trigger Volume」です。
![B02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a3c12059-13b6-91f8-684a-5744fbafe4f4.png)
Detailsパネルの「Brush Settings」で大きさを整え、レベル上の目的の位置に配置します。
![B03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/849a6aae-3497-2180-fc26-6443527c8691.png)
同じようにボリュームを配置します。
名前は「Trigger_Bpart」、「Trigger_Cpart」としておきましょう。
![B04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/305a2da6-bd57-d1bc-a9b6-e8dca6c17fd9.png)


## レベルブループリントを開く
エディタ上部より「Open Level Blueprint」でレベルブループリントを開きます。
![C01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c8a71629-669e-1e2e-9d76-5820ebb4912b.png)

**「Event Begin Play」**ノードを置き、プレイ開始時の処理を作ります。
![C02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2d062b55-d629-583b-0d16-35f9c5f6df8e.png)

まずBGMはAパートだけ鳴っている状態にしたいので、B,Cパートのボリュームを0にする処理を書いてみましょう。
ボリュームを操作するには、先程Atom Craftで作成した**Aisacコントロール**が必要になってきます。
ビューポートに戻り、配置した「IMLoop」を選択しておきます。
![C03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1a48de65-adc8-cd77-08a3-b5f49371cbd3.png)

レベルブループリントエディタで右クリックし「Create a Reference to IMLoop」を選択します。
![C04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/229e028d-2c40-57c5-ecf3-18f585a76c1c.png)


「IMLoop」を参照するノードができました。
![C05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9e743320-125f-4f0b-a71b-4dd3cfa5e9d3.png)


このノードの青いピンから線を伸ばし、「**Set Aisac Control Value**」ノードを配置します。
![C06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/64da02a9-4f2f-e4a1-269d-83cc6c37ecfe.png)
![C07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/923a1adf-dca6-8dcd-65c7-9fb544c0ff99.png)


このノードでAisacコントロールへと好きな値を渡すことができます。

ADX for UEのバージョン2からは、AisacControlの指定はノードを使って行うようになりました。
変数を作り、複数の場所でAISACコントロールを使い回せるようにしてみましょう。

**Set Aisac Control Value**ノードの青いインプットピンを右クリックし、「Promote to Variable」で変数を作成します。
![C08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1f56870a-a300-7c2a-8454-8a45b1787608.png)
変数には「Aisac_01」と名前をつけます。
![C09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6badda3b-3be8-7535-c2e9-362dd86662ef.png)
変数の初期値を設定するため、左上の「Compile」ボタンを押してコンパイルします。
![C10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cac72a6d-1ae8-14ce-c741-fa4396cc3e1e.png)
変数を選択し、「AisacControl_01」を指定します。
![C11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/720450b9-f79d-ddc6-e2ef-a27be2e878c4.png)
これでゲーム開始時に、Bパートのボリュームを0にする処理ができました。
![C12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b047ba2c-2b99-34de-ecf1-cbf389bbc39a.png)
同じようにノードと変数（初期値はAisacControl_02）を作り、Cパートのボリュームも0にします。
![C13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a00a4f23-8027-c320-52e1-348f4214ded5.png)



ここで一旦コンパイル&テストプレイし、BGMがAパートだけ鳴っているか確認します。


## タイムラインの作成
BパートやCパートを再生する際、いきなり音量が大きくなるのでは風情がないので、1秒間かけて段々と音を大きくする「フェードイン再生」をさせることにします。
数値を段々と変化させる方法はいろいろありますが、今回はブループリントの「タイムライン」を使ってみましょう。
レベルブループリントエディタで、ノードを置く際と同じように「Add Timeline」を選択します。
![D01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e72b5f96-357d-73d4-be89-f631721321c7.png)
タイムラインノードが出現します。「TL_BPart_FadeIn」などの名前をつけておきましょう。
![D02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/37f3c4e3-0654-f3c2-ae5e-741e07872306.png)


## タイムラインの編集
タイムラインノードをダブルクリックすると、タイムラインの編集画面に入ります。
![D03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/de9d212e-1573-228e-2161-49d21edcc297.png)
上部のタブを切り替えることでもとのレベルブループリントに戻ることができます。
今回はボリュームをfloat値で変動させたいので、「+Track」ボタンから「Add Float Track」を選択し、float値のグラフを作ります。
![D04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/50dde1ed-773f-a083-85a6-ad9f453a70c4.png)
適当な名前をつけておきましょう。
![D05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a865da00-55df-2081-c22a-8ac6ea2648fb.png)
グラフ上で右クリックするとポイントを作ることができるので、0秒の際に数値を0、一秒の際に数値を1にするよう編集します。
![D06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c631c86c-3717-4762-7eb6-0f8761136b62.png)
数値を直接入力すると便利です。
![D07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e38a0cfe-ee7d-121e-6ade-751ad71d46f7.png)
ポイントを選択して右クリックすると、カーブタイプを選ぶこともできます。
![D08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/819731d4-c49e-e516-7657-6a9ff20528ce.png)
遷移時間は1秒間なので、「Length」の値を1.00にしておきます。
![D09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/571d6a1b-0ada-8c70-307f-9023f1a01e0a.png)
ここまでできたら「Event Graph」のタブを押してレベルブループリントの編集に戻ります。

## ノードの組み立て

タイムラインの値を「**Set Aisac Control Value**」ノードに渡したいので、ふたたび一連のノードを配置します（コピペしても大丈夫です）。
Timelineノードから線をつなぎ、以下の画像のように構成します。
![E01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b4576234-1c8c-f58f-5505-ef04f9f2bfdf.png)
Timelineノードの「Update」から線をつなぐと、タイムライン上で数値が変更されるごとに処理が実行されます。
「Finished」から線をつなげば、タイムラインの再生が終わった際に処理が実行されます。
「BpartVolume」の黄緑色の線も忘れずに「**Set Aisac Control Value**」ノードの「Value」ピンにつないでください。

さて、この処理を行う（タイムラインを再生開始する）ためのイベントが必要です。ビューポートでBパートの再生開始トリガーである「Trigger_Bpart」を選択します。
![E02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/62722418-cf6c-8261-6c40-aa6f64cfd048.png)
レベルブループリント上の空欄で右クリックして、「Add Event for Trigger」→「Collision」→「**Add On Actor Begin Overlap**」を選択。
![E03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5bc58125-3286-07f5-5b47-39e7ebd4c358.png)


レベルブループリント内にイベントが追加されました。これはトリガー内にアクターが進入した際に実行されます。
![E04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/79524216-24ce-d894-0de7-8b7084b85cc9.png)

進入したアクターがプレイヤーキャラクターである（プレイヤーキャラクターと同一である）ことを判別するため、以下の画像のように「**Branch**」「**Get Player Character**」「==（イコール）」ノードを置きます。
![E05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/873b6c34-5198-53d4-07f4-cea1cc9e7340.png)

一連の処理がつながるよう、線をつなげます。
![E06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/07ecdca4-519f-8bb1-1a49-d43b5a6b290d.png)

これでBパートのフェードイン処理は完成です。

同じようにCパートのフェードイン処理もつくります。ほとんどはコピペでお手軽に複製できます。
**イベントは「Trigger_Cpart」を選択して作ること、タイムラインノードの名前は変えておくこと、「Set Aisac Control Value」ノードの「Control Name」は「AisacControl_02」にしておくことを忘れずに！**
![E07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/816ba159-5685-24e7-83ab-31efe5281d50.png)
こちらはノード全体図です。うまくいかない場合、見比べてみてください。
![E08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5010dda8-adce-3aa1-e4da-e10deb5f3bed.png)


ここまでできたらテストプレイして確認してみましょう。一定の区画に入った際、フェードイン処理が起こるでしょうか？
![E09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f4d1c35c-e82d-ffd3-ac52-ecc88e5abed4.png)




## フェードアウト処理
このままではトリガーから離れてもBGMは賑やかなままですので、フェードアウト処理を作ります。
World Outerlinerで「Trigger_Bpart」を選択し、イベントグラフの空いている場所で右クリックし「Add Event for Trigger」→「Collision」→「**Add On Actor End Overlap**」を選択。
![F01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a60dcd04-a63a-fb64-9ad5-60e36bfaaa8f.png)
![F02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/99f3f12d-9a33-cc25-3454-b196fe8f2232.png)

フェードイン処理と同じようにグラフを組みます。
今度は、Bパートのフェードインに使ったタイムラインの「Reverse」ノードにつなげます。「Reverse」ピンが実行されると、タイムラインは逆再生されます。
![F03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/60d047c4-70f4-ed61-5339-4417874b4b3d.png)

フェードイン処理が途中でも逆再生にシフトするので、スムーズな変化が可能になります。
強制的にタイムラインの最初から再生したい場合は、「Play from Start」や「Rverse from End」ピンを使ってみましょう。
Cパートのフェードアウト処理も同じように組むと、下記の画像のようになります。
![F04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/63fac2ba-fe99-55ff-af8d-13a8dbc6a62a.png)
これでフェードイン・アウト処理が完成し、現在の位置によって変化するBGMが完成しました。

# その他

## 楽曲全体のフェードイン
プレイ開始時にBGM自体もフェードインすると、より自然な雰囲気になります。
**Event Begin Play**から続く処理に、新しく作成したタイムラインと**Set Volume Multipler**ノードを加えます。
![G01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a8a7a02a-5722-4df8-66d0-ef2ec459b876.png)
タイムラインはほぼ同じですが、フェードイン時間を長く持ちたいため2秒に伸ばしました。
![G02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ba104ffc-1eda-1879-65bf-fb1b7f67fc78.png)