ADX2 for UE4でゲーム内BGMの曲調切り替え、トラック遷移

# はじめに
UE4.23+「ADX2 LE v2.10.05」を使用します。
アンリアルエンジン4とサウンドミドルウェア「ADX2 for UE4」を連携させ、
ゲーム内のシチュエーションに合わせてBGMの曲調を変化させる演出を実装します。


# サンプル
こんなのができます。
[![サンプル](http://img.youtube.com/vi/AfH78w_A_WU/0.jpg)](http://www.youtube.com/watch?v=AfH78w_A_WU)
▲画像をクリックしてください。動画に飛びます
蝶をキーボードで操作し画面上の3つのトリガーに進入すると、

- くぐもった静かな曲調
- ピアノをメインとした通常の曲調
- アレンジされたにぎやかな曲調

の3つのトラックにそれぞれシームレスに遷移します。

2020/2/5に開催された「UE4何でも勉強会」にて公開した作例です。
https://ue4allstudy.connpass.com/event/161710/


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


#やること
- AtomCraftで複数トラックを持つキューを作成
- UE4にインポート
- ブループリント処理によるトラック切り替え再生


# 実装

##AtomCraft側

###キューの作成

サウンドをインポートし、キューを作成します。
キューシート内で右クリックし、「新規オブジェクト」→『キュー「セレクタによるトラック遷移」』を選択します。
![A_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bea9cea7-e7be-f3bb-209b-794676e4ef2f.png)

新しくキューが作成されるので、曲調の違うトラックを入れます。
![A_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e1bac131-74f3-c367-5525-d4e512e72317.png)
![A_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c7d6b9c9-9bab-804d-798a-f27ed15a9467.png)
スムーズな遷移を実現するためには、各トラックの再生位置や長さ、テンポを合わせてください。

### セレクタの設定
次に、再生するためのトラックを指定するのに使う「セレクタ」を設定します。
この機能については次の記事でも触れています。
「ゲームの状況に合わせて効果音にバリエーションを by ADX2 for UE4」
https://qiita.com/SigRem/items/2c1f497ebf0e981dd43c

プロジェクトツリーの「セレクタフォルダ」を右クリックし、「新規オブジェクト」→「セレクタの作成」を選びます。
![A_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a9276fd3-5ad8-80bb-df64-79a1765817a6.png)
新しい「セレクタ」が現れるので、F2キーを押すなどしてリネームします。
![A_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/e9598944-94e4-6b36-9062-383889a4d07d.png)
リネームしたセレクタを右クリックし、「新規オブジェクト」→「セレクタラベルの作成」を選びます。
![A_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bc33bc5a-24d0-7f1d-d143-8edadabaaf98.png)
セレクタラベルに「TrackA」と名前をつけ、作成します。
![A_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5bf64552-6808-6994-7d5a-a5eee65fbcf2.png)
同じように「TrackB」、「TrackC」のセレクタラベルも作成しておきます。
![A_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4dfca9eb-add9-66fe-16ec-3f72a1f5bc12.png)


###トラックにセレクタを設定する
各トラックに、対応したセレクタラベルを付与します。
トラックリストの「なし」と表示されたプルダウンメニューから、先程作成したセレクタ→セレクタラベルを設定します。
![A_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/09df14a0-494f-0a98-7a26-28cbfced4553.png)
3つのトラックについて、それぞれTrackA,B,Cを設定しました。
![A_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a2acb124-c715-46b5-998e-2d08a16ce899.png)



###ビート情報を同期する
この状態で再生ボタンを押して確認……あれ？プレビューが機能しませんね？
「セレクタによるスイッチ遷移」キューでは、**ビート同期情報を作成**することでプレビュー機能が使用可能になります（このままでもUE4にインポートすれば再生は可能です）。
トラックリストの空欄を右クリックし、「ビート同期情報の作成」をクリックします。
![A_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/44fa44d4-9fc1-f0e6-9250-76a287df390b.png)
タイムラインに「BeatSync」が現れ、ビートに同期した演出が可能になりました。
![A_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4071966f-1e70-32a5-3123-588f84da8c57.png)

「BeatSync」をクリックして選択すると、インスペクターにてBPM情報などが編集できます。予めBGMにあったものを設定しておきましょう。
![A_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3575adb5-7275-a15a-0803-edf7d4fc59bb.png)

インスペクターの下部、「ビート同期」をクリックすると複数のビート同期タイミングやビートパターンを編集することが可能です。今回はそのままにしておきます。
![A_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/be789f0e-4376-804b-3b4a-eb266276b094.png)


###bpmが分からない場合
マテリアルのbpmが不明な場合、「BPM解析」で解決できる可能性があります。
マテリアルツリー内で、使用しているサウンドのマテリアルを右クリックし、「BPM解析」をクリックします。
![A_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/81a0c15f-2304-e025-b104-7633d9491927.png)
ログにBPM情報が出力されます。
![A_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f38433e8-af42-c2f4-b0bb-2233589d4656.png)
公式マニュアルによると、Wavファイルにのみ使用可能である程度の長さがないと正確な値が出ないとのことです。


### トラック遷移の設定
トラックが切り替わるにあたって、クロスフェード（ふたつのトラックを混ぜ合わせて再生）の設定をしてみましょう。
「ワークユニットツリー」で、編集しているキューを選択します。
![A_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/496a5bd6-b1c2-a34a-15a0-50a2438b0c4e.png)
インスペクターを下にスクロールしていき、「セレクタによるトラック遷移」の項目へ移動します。
ここで遷移タイプや、トラックの切り替わりにかかる時間などを設定できます。
とりあえず画像の通りに入力してみてください。
![A_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c72877cd-1c33-7872-6840-469a1c60bcf0.png)




### 再生テスト
これでプレビューが可能になりました！
再生ボタンを押して聞いてみましょう。
![A_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3bbd904c-3b45-8586-eeff-a35855064377.png)
トラックAのみが流れているはずです。
「プロジェクトツリー」の任意のセレクタラベルをクリックすると、トラックが遷移して曲調が切り替わります。
![A_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/aaf8512c-8b8d-e48b-7de5-0bc0bc37d69f.png)
先ほどの遷移タイミングを調整して、納得いくものができたらビルドに移りましょう。


###ビルド
例によって、UE4に持っていくためにキューシートをビルドします。
![A_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/32754815-a19a-1532-ff59-8cb4b1519e06.png)
![A_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a4f00ea3-8a80-cde7-ed66-cbe9040c5890.png)
ここからUE4エディタに移ります。

##UE4での実装
### インポート
UE4にacfファイルとacbファイルをドラッグアンドドロップし、キューシートをインポートします。
![B_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1f5fa2ba-c3f4-62a7-688d-f6db95c1cc4f.png)


### レベルに配置する
コンテンツブラウザからAtom Soundをビューポートにドラッグアンドドロップし、レベルに配置します。
![B_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/7cfbec49-909d-c17a-c239-478a905879c6.png)

加えて、楽曲に変化をもたらすためのきっかけとなるトリガーを3つ配置します。
![B_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/64ddf8b8-6c39-fcc6-b0e6-0035d9834e22.png)
このトリガー内にプレイヤーが進入すると、それぞれ違ったトラックが再生されることになります。
![B_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0909473f-b97d-7016-8931-76ce8efb34a0.png)


###イベントの作成
トリガー範囲内への進入を感知してから処理を開始しますので、トリガーからイベントを作成します。
World Outlinerでトリガーを選択します。
![B_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a67c946c-16f1-0338-d288-2f6331f9091a.png)
右クリックし、「Add Event」→「OnActorBeginOverlap」を選択します。
![B_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c54c57ba-7be3-e6f6-ada4-768b35da3fd5.png)
自動的にレベルブループリントに移動し、イベントが配置されます。
![B_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0908828e-e693-69c2-26a0-4fe32b57bc0f.png)


### イベントグラフの編集
いったんレベルブループリントのエディタからビューポートに戻ります。
配置したAtom Soundを選択します。
![B_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6be995c0-1b14-a148-80d9-d0059a5f3964.png)
レベルブループリントのイベントグラフで、空欄を右クリックし「Create a Reference to （AtomSound名）」を選択します。
![B_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/612a9651-73d4-d240-10d8-ece9a67393b0.png)
Atom Soundへのリファレンスが作られます。
![B_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6aa68076-cfbe-7758-0d37-cc7b620dc457.png)

本格的に処理を組みます。
……といってもこれだけです。詳しい解説は順番にしていきますので、見ながらグラフを組んでみてください。
![B_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5925073f-0f3a-4159-e15a-795861e4f025.png)
まずはトリガーが進入を検知する部分です。何らかのアクターがトリガーに入ると、イベントが開始されます。
![B_05A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/326dfbd1-b149-e3e8-a1a0-0d6e5fb7f72d.png)
Branchノードで、進入したアクターがプレイヤーキャラであることを判別します。
![B_05B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/53860172-d38c-40d6-b780-9f99ccff4c6d.png)
**「Set Selector Label」**ノードでBGMに変化を起こします。
セレクタ名は「BGM_Track」、セレクタラベル名は「TrackA」でしたね。
![B_05C.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9444e650-4cfb-2ff8-9edf-8ed6bc3f21a6.png)
このノードはAtom Soundのリファレンスから直接作ることができます。
![B_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8a96782b-bd12-772c-8bef-4a9e6cd1907f.png)

3つのトリガーについて、同じ手順を繰り返し処理を作ります。
![B_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/90c7f57e-4e73-d36c-06d1-2b9565fe54f1.png)
指定するセレクタラベルを間違えないように注意！

これで処理は完成です！
3つのトリガーに入った際、違うトラックに遷移していくはずです。
![B_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/94450791-1e5b-e222-087f-8ac36f82955f.png)
遷移タイミングなど少し違和感を感じる場合は、AtomCraftで再度編集して再インポートしてみてください。