ADX2 for UE4で変化するループBGMを再生する（UE4編）

# はじめに
アンリアルエンジン4とサウンドミドルウェア「ADX2 for UE4」を連携させ、
現在の状態に応じてループ楽曲の曲調、テンションを変化させていく「インタラクティブミュージック」を実装する方法です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">UE4+ADX2で、ゲームの状況に応じてBGMが盛り上がったり旋律が変化するやつを作りました。<br>動画では横に動くと旋律、縦に動くと曲のテンションが変わります。<br>実装法は記事に全部書きました。音源、サンプルプロジェクトも公開してるので気軽に試せるはず！<a href="https://t.co/45z8vsiPtA">https://t.co/45z8vsiPtA</a> <br> <a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> <a href="https://twitter.com/hashtag/UE4Study?src=hash&amp;ref_src=twsrc%5Etfw">#UE4Study</a> <a href="https://t.co/3H0AY9GdRO">pic.twitter.com/3H0AY9GdRO</a></p>&mdash; Sig @3DAct開発中 (@sleepyslowsheep) <a href="https://twitter.com/sleepyslowsheep/status/1290551162593140741?ref_src=twsrc%5Etfw">August 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

準備にあたるAtomCraftでの工程はこちらにあります。楽曲素材、サンプルプロジェクトも下記の記事の冒頭にありますので参照してください。
**ADX2 for UE4で変化するループBGMを再生する（AtomCraft編）**
https://qiita.com/SigRem/items/a6ccd57a2881e8a43905



AtomCraftでの実装については

ADX2 for UE4の基本的な使い方はこちらの記事で。
**ADX2 for UE4でインタラクティブミュージック（AtomCraft編)**
https://qiita.com/SigRem/items/8af9b7d8445477906741
**ADX2 for UE4でインタラクティブミュージック（ブループリント編）**
https://qiita.com/SigRem/items/b53dc03d01c5f8fe1465

当記事ではUE4.23+「ADX2 LE v2.10.05」を使用します。

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


#やること


# 実装

## UE4でインタラクティブミュージックを実装する
なにはともあれまずはここから。使用するプロジェクトで、CRIWARE Pluginが有効になっていることを確認します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a4765d65-775f-9635-9cdb-61dbd41a47cd.png)

### 準備
エクスプローラからコンテンツブラウザに、AtomCraftで書き出したacfファイル、acbファイルをドラッグ&ドロップして追加します。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8cf27da1-ea3f-e68f-d677-a02ef1617f6e.png)
ツールバーの「Edit」→「Project Settings」を開き、
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c32a161d-511e-7045-098d-2eb8cde16430.png)
「Atom Config」に今回使用するacfファイルを指定します。ここが編集できない場合、一度UE4のエディタを再起動してみてください。変更したら、必要に応じてまた再起動します。
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/93c26bab-e18b-4569-2b07-571ee3099c4f.png)

今回、見た目がわかりやすいよう2つのメッシュを用意しました。
左はボタンとなる土台、右はあたり判定となるボックス型のメッシュです。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5a4fb9cb-0e55-1b27-e51f-72b01b1db698.png)

### ブループリントでオーディオマネージャを作る
BGMを再生し、直接Aisacコントロールなどを行う「オーディオマネージャ」とでもいうべきブループリントを作成します。
コンテンツブラウザの適当な場所でブループリントクラスを作成します。
親クラス(Parent Class)は「Actor」を選択します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/425962ba-f36a-bfb6-9d4e-9632bac73a0f.png)
分かりやすい名前にリネームしておきましょう。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/fce6d376-1e24-1b81-2231-3cc9de553754.png)
ダブルクリックして開き、Componentsパネルの「+Add Component」から「Atom Component」を追加します。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/615380ec-dbfa-d75d-19df-487b086c8043.png)
これが音源となります。Detailsパネルで鳴らしたいBGMのキューを指定します。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2bb8596c-0529-9017-428d-f28d9870d0f8.png)
一度メインのビューポートに戻り、作成したアクターをドラッグ&ドロップで配置します。この時点で普通に音が鳴ると思います。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b9f867e9-9b3f-e0bd-e226-de35c7c74875.png)

### Aisacコントロールの初期値設定
オーディオマネージャを開きます。
Atom Componentを選択し、
![37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/70b2acff-83eb-73a8-17e3-5b261c9be340.png)
「AISAC Control」の場所にある+ボタンを押します。
![38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9b97a2ce-5c0f-1e1c-c71f-7caf2e8cdae4.png)
ふたつ項目を追加し、下の画像のように設定します。これでふたつのAisacコントロールの初期値が0になるため、「ミドル」「ハイ」テンションで追加されるトラックの音量も0になります。
![39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/73b557de-6aff-4351-8827-929af57690f1.png)
この状態でゲームを再生すると、静かなバージョンのBGMになっているはずです。

### オーディオマネージャにフレーズ、テンションの変化機能を実装する
オーディオマネージャの機能として、**外部からターゲットとなるテンション・フレーズを受け取り、その際にAtom Componentへとブロック再生やAisacコントロールの変更を反映する**というものを実装します。
![00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/31e88d69-7b25-f1f4-9a78-9b74489b6e7c.png)
オーディオマネージャとなるアクターのイベントグラフを開き、ふたつの変数を追加します。変数の型は両方ともIntegerです。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f1e277f3-2885-bb06-bd8a-4da09b5bb4f0.png)
テンション、フレーズが変化した際に発火するイベントを作成します。
イベントグラフの空欄で右クリックし、「Add Custom Event」でカスタムイベントを作ります。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/062e7f88-8846-ef9b-1f32-a4b71949b40a.png)
「ChangePhrase」などの名前をつけておきます。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c97f16fe-c3bb-450e-c656-b8101621395d.png)
**Set Next Block Index**で次に再生するブロックを指定することで、受け取った再生フレーズを反映させます。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c15dab2d-12bf-0952-ab33-d80107c37fc5.png)
「テンション」は0～2の値を受け取り、それぞれ「ロー」「ミドル」「ハイ」テンションの場合へと分岐させます。
Int型変数の値によって分岐させるには、**Switch on Int**を使います。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/96c69c4e-bd5f-2658-c5c7-528bf07be118.png)
Aisacコントロールの値を変化させてテンションを変化させます。**Set Aisac by Name**で値を指定します。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/160d822d-b757-c158-c8f0-55148e93f13d.png)
ノードをコピペして、下の画像のように数値を入力します。
**Switch on Int**（白い線、**Get Atom**（青色の線）と繋ぐのを忘れてコンパイルエラー起きがちなので注意してください。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/69f64e69-8fd2-8b1f-a4f4-0aed0ef69567.png)
これで簡易的ではありますが、オーディオマネージャの機能は実装できました。

### フレーズチェンジャーを実装する
ブループリントを新しく作ります。オーディオマネージャと同じく、親クラスは「Actor」です。
「BP_PhraseChanger」と名前をつけておきました。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ce2bc9f9-55bf-8bba-4996-fdcb4f7fabd0.png)
外観となるボタンのメッシュを追加します。「+Add Component」ボタンから「Static Mesh」コンポーネントを選択します。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f6ca682f-7c33-904a-ab3f-4596c236310c.png)
Detailsパネルで土台となるメッシュを指定します。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ac435855-8414-af19-9a6a-05c19693d136.png)
配置したメッシュの子となるように、当たり判定用メッシュも同じように置きます。
画像ではコンポーネント名をリネームしています。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5f5a5639-ae92-b69b-818e-ff7f96ced392.png)
当たり判定用メッシュのみ、Detailsパネルでプレイヤーをブロックしないよう「Collision Presets」にて「OverlapAll」を選択します。
![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b81ca51c-9074-5e0e-3309-278c360a0d54.png)
当たり判定用メッシュを選択し、右クリックして「Add Event」→「Add OnComponentBeginOverlap」を選びます。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dc719dd4-fddb-f54b-a7ab-29b4feab3b14.png)
これにより、メッシュ内に侵入した際のイベントが発行されます。
イベントグラフに移動すると、既にイベントノードが配置されているはずです。
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ec49f312-5a69-0c2e-f1f7-6d4c0a5a84e7.png)
このアクターが「テンション」と「フレーズ」の情報を持てるよう、ふたつの変数を追加します。変数の型はオーディオマネージャと同じくInteger型です。テンションの高さとフレーズのID情報を、それぞれ整数で持つことになります。
変数リストの横の目玉のマークをクリックし、「公開(Public)」されている状態にします。これにより、レベルに配置した後に、個別に変数をいじることができます。つまり、**複数配置された同じアクターであっても、変数の初期値を別々に持つ**ことができます。
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7f7fd710-8606-81d7-e4e0-88235595b07d.png)
さらに、オーディオマネージャと通信できるよう**「BP_AudioManager」型の変数**を持っておきます。これにより、レベル上に置いた特定のオーディオマネージャアクターと直接変数などがやりとりできるようになります。
この変数を作るには、まず適当な型で変数を作成し、その後Detailsパネルで「Variable Type」を「BP_AudioManager」に変更します。「Reference」と書いてある青色のものです。
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/243176ae-a92e-3191-32b3-65b8ead1c57e.png)
![27b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/27ffdaae-65e6-db88-53bf-fd7c75165ce5.png)
下の画像のように、3つの変数が作られていればOKです。
3つめの変数についても、目玉マークを押して公開設定にします。
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b544a551-7f71-5fcc-3340-1ac3afc26950.png)

処理を書いていきます。
画像のようにノードを配置します。侵入したアクターがプレイヤーキャラクターかどうかを判別し、一致した場合は「True」が返されます。
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/22fffc68-0ba6-5f3a-4fe2-70579aa9b5a1.png)
BP_AudioManagerの「CurrentTension」変数に、このアクターが持つ「Tension」変数の値を代入します。
まず**Get AudioManager**ノードを置き、そこから線を伸ばして**Set CurrentTension**を呼び出します。
![29b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f3383937-136a-242e-a767-1cf8ce064054.png)
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/60f93c66-4aac-a3d2-7fc9-7e605a274092.png)
「CurrentPhrase」変数も同じように代入します。
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ffb166fb-c628-3ac6-679a-f8176c86fa56.png)
値が変わった際にオーディオマネージャ側で処理を起こしたいので、「BP_AudioManager」が持つカスタムイベントである「ChangePhrase」イベントを呼び出します。
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3715c1d2-5398-956a-aa86-8322179456a5.png)
これでフレーズチェンジャーも一通り実装が完了しました。あとは配置だけ！

### レベルに配置する
フレーズチェンジャーをレベルに配置します。複製して12個、画像のように並べてみましょう。
![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5079d0b5-ba46-4df0-2ab9-d5dae48911d3.png)
12個すべてを選択し、Detailsパネルの「AudioManager」にシーン上に置かれている「BP_AudioManager」を指定します。
もし対象が複数ある場合、ひとつを除いて削除しておくと取り違えがなく安全です。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/94264263-1663-cd49-d62c-40769a067ee5.png)
ひとつひとつにテンションとフレーズ情報を入力していきます。左下のブロックではテンションとフレーズ共に「0」を入力し、縦にいくにつれテンションを、横にいくにつれフレーズの数を増やしておきます。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/723f0012-d7c3-a1a4-bc1e-5ea9edafa3ff.png)
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/18cb3454-f656-04d9-09d8-c7179161857c.png)


ここまでできたら再生してみましょう。
![40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5092fcbe-11ba-66ab-8739-1e4aac48eeb1.png)
横のブロックに移動すると次に再生されるフレーズが変わり……
![41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cc8dbbec-b3ad-bc8e-c423-5b188bfc2076.png)
上に1段移動するとパッド、ベース、ドラムが追加され、
![42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a9212e76-1c53-5d13-f7d6-b3bbc3502673.png)
最上段ではさらに、リードと追加のドラムが鳴り出します。
![43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e94aae19-8bcc-b436-74b7-18b3e7688195.png)
フレーズ、テンション共に変化していれば成功です。

### テンションの変化をシームレスにする
現状ではテンションが変わった際、すぐに楽器が増減してしまい急激な印象を与えるので、これをゆっくりとシームレスに変化するように改善してみます。
「BP_AudioManager」に下の画像のように変数を追加します。追加分の変数は「0～1」の値を扱うので、float型です。
![44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/798f363d-1740-615e-b8cd-fbf4dd5cec40.png)
まず現在のテンションに応じて「TargetAisac」変数を変えておき、「CurrentAisac」変数を段々と変化させて実際のAisacコントロールの値とします。

**Set Aisac by Name**だったところを「Target Aisac」変数の代入処理に変えます。
![45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/85e87b9c-0d83-696f-873e-04549eca2f25.png)
**Event Tick**で実際のコントロール処理を行います。もしイベントノードがない場合、新しく作ってください。
代入する値に**FInterp To**ノードを通します。これにより、毎フレームカーブを描いて目標の値に近づく数値が取得できます。
![46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4ab9116c-f15b-0db6-617b-70f782f208da.png)
ふたつの「CurrentAisac」変数に同じ処理を行います。
![47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b17ed00d-9e5f-af60-32fa-485e273e950f.png)
最後に、代入された「CurrentAisac」変数の値をさらに**Set  Aisac by Name**ノードに渡し、実際にBGMに変化を起こします。
![48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/fa8dd5f6-f6cc-b1cb-1eb6-1627f03992e4.png)
「BP_AudioManager」の全体のイベントグラフはこんな感じです。
![49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cc8bb56e-6355-b6db-82c8-7bc03ed1e250.png)
これでシームレスに変化するテンションの変化が実現できました。

### BGMが最後まで再生されてしまった場合にループさせる
今回はBGMにループ処理をしていないので、もし最後まで再生されてしまった場合は**Set Next Block Index**ノードが効かなくなってしまいます。
BGMをループさせたい場合、**Get Sequence Position**で現在の再生位置を取得し、最後のブロックに差し掛かったら**Set Next Block Index**で最初のブロックを指定してあげると良さそうです。
![50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9edc5e6c-280e-5f6d-515b-23d1cc74dde9.png)