ADX + UE5で、特定の広さの空間を満たす環境音を実装する（長い川や駆動音など）

# はじめに
ADXアンバサダーとして記事を書いておりますSigと申します。
この記事ではアンリアルエンジン5（以下UE5）とサウンドミドルウェア「ADX for UE」を連携させ、**一定の領域を満たし、さらに外部にも影響を与える環境音**を再生します。

https://twitter.com/sleepyslowsheep/status/1411604725271732224?s=20

たとえば川のせせらぎを考えてみましょう。
川から一定の距離にプレイヤーがいた場合は常に聞こえていてほしい音です。しかし、川という広がりを持つ以上音源の長さも川に沿って存在しなければなりません。
音源を川に沿ってひとつひとつ配置していくのも手間ですし、重複して聞こえてしまうという問題もあります。
そこで、ADXの「**AreaSoundVolume**」機能の出番です。

**AreaSoundVolume**は一定の空間の中と外で音の聞こえ方を変化させる機能です。
直近のアップデートでAreaSoundVolumeに「**Portal**」機能が追加され、**空間上に大きさを持つ音源**を再現することが可能になりました。
これらはADX for UE旧バージョンにおける、「AtomSoundVolume」機能にあたります。


当記事ではUE5.3+「ADX LE UE SDK(2.01.00)」を使用します。
また、基本的にブループリントのみでの実装を行います。
ADX for UEはインディー向けの「LE版」であれば、無料で使用できます。
https://game.criware.jp/products/adx-le/

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


# 実装

## AtomCraftでサウンドを用意する

UE5で再生するためのサウンド、Atom CueをAtomCraftにてビルドします。
既に必要なファイル（acb, acfファイル）を用意できている場合は次の項から参照してください。

### マテリアルのインポート
AtomCraftのマテリアルツリーに素材ファイルをインポートします。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f05632bd-90c7-c992-8fd0-a0d25bbc0d69.png)
今回は環境音となる水や森の音を用意しました。

環境音は単発で鳴るわけではなく、ずっとループして欲しいものです。
各マテリアルを選択した状態で、インスペクターにて「ループタイプ」を「ループ」に設定します。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/82436d16-4e2c-83de-62ef-466f9a3354e3.png)


### キューの作成
新規にキューを作成します。
ワークユニットツリーで右クリックし、「新規オブジェクト」→「キュー『ポリフォニック』の作成」を選択します。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/6db0c3a1-9b30-c04d-869b-c214b228c936.png)
作成したキューに対して、タイムライン上に再生したいマテリアルをドラッグアンドドロップして配置します。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b5860d1d-913a-7ca5-99f4-520ac717b599.png)
すべてのマテリアルに対して、対応するキューを作りました。
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a8341e5d-4b0d-6a2d-704d-9ee55a69d20d.png)


### 3Dサウンドの設定
環境音が3D空間上で減衰を受けるよう設定します。
キューを選択した状態で、インスペクターにて「パンのタイプ」を「3Dポジショニング」に設定します。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2541999d-9e63-63ea-0a36-4f2219906edd.png)
3Dサウンドになったことを確認するには、セッションウィンドウを使います。
ツールバーの「表示」→「セッションウィンドウ」を選択します。
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ae13e343-d87c-85f1-e0e4-862528227c3e.png)
セッションウィンドウが起動します。確認したいキューをセッションウィンドウにドラッグアンドドロップします。
![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c64dfb4f-08c2-a283-b8d6-f2bcd46b23e9.png)
「3Dポジショニング」ボタンを押すと、3Dサウンドの確認機能が使用できます。
「プレーヤーに3Dオブジェクトをアタッチ」にチェックを入れておきます。
![A09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9607f471-d7ee-0ce8-e224-7c5f9371058b.png)
緑色の領域をドラッグすると音源が移動し、サウンドの再生位置が動いた際の様子が確認できます。
![A10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/24cc653f-94c5-86d6-729c-f42f80fd3205.png)

少し音の動き方が過剰に感じるので修正します。
キューを選択した状態でインスペクターの「3Dポジショニング」を選択します。
![A11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4e247db2-d59e-e9a4-177f-f7a090e57a37.png)
下にスクロールし、「距離減衰」の「最小」を少しだけ上げておきます。
![A12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9b8be112-38a1-70c9-7e79-fdd48f0cb003.png)
この状態をセッションウィンドウで確認すると、音の動きが少しマイルドになっているはずです。


### キューシートのビルド
設定がうまくいったらキューシートをビルドします。
![A13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/85d481bc-e8c9-0311-90e5-cc59bd9a815d.png)
![A14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0d63cfc8-526b-5a03-15c2-34c9ca3e8154.png)
ここまでできたらUE5に移行します。


## UE5で環境音を実装する

今回の実装例として、川、池、焚き火があるマップを用意しました。

![A00_A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f3c78486-5f4b-93f1-4abf-73c0a1624fba.png)
![A00_B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8bd9f01a-c7c8-d596-c50f-3cadd0e46758.png)
![A00_C.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/18662ebc-66b8-c1c9-1a78-5145d4e3ec63.png)



使用アセット：
**「Dreamscape: Stylized Environment Meadows - Stylized Nature Open World Fantasy」**
https://www.unrealengine.com/marketplace/ja/product/dreamscape-nature-meadows



### キューシートのインポート
UE5のコンテンツブラウザ（コンテンツドロワー）にビルドしたacfファイル、acbファイルをドラッグアンドドロップしてインポートします。

acfファイルインポートの際に出てくるダイアログでは「Yes」を選択します。
これにより、プロジェクトの設定が自動的に完了します。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/add524d3-898b-398d-62de-3e100317d592.png)


コンテンツブラザにアセットが追加されます。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f7262dac-e7b9-92fb-e18d-7c42bd5e9100.png)

キューシートをダブルクリックして開き、キューが再生できることを確認します。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1e0ecf3c-202e-5087-bfc1-db2838340524.png)



### AtomGameplayVolumeを作成
音を持つエリアを示すAtomGameplayVolumeを作成します。

アクターの配置ボタンから、「Place Actors Panel」を選択します。
![B01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ae73e50c-6965-e5db-4a21-f8d46caaae39.png)



「Place Actors」パネルが現れます。
「Geometry」タブにある「Box」をレベル上にドラッグアンドドロップして配置します。
![B02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/45647530-d4c8-fe52-9888-91a1172992ff.png)
![B03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/b63e834b-45f9-4987-ce22-bfdcfcc78cbb.png)

「Selection Mode」から「Brush Editing」モードに切り替えます。
![B04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/22160744-78ab-2bc8-3661-7ee1a8f6d776.png)

頂点や面の移動、Extrude（押し出し）などを使い、Box Brushを川の形に沿って変形させていきます。
![B05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/35f209f5-6f64-effa-91ff-4e6cc7c0007f.png)

川と大体同じ領域をカバーできるよう変形させます。画像では分かりやすいようにマテリアルを変更していますが、必須ではありません。
![B06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dd717f2d-e937-6c26-2026-27991bf66291.png)

変形が完了したら後々混乱しないよう、Selection Modeにモードを戻しておきます。
![B06B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/32f4dedd-7991-3013-0d7d-00282a95936d.png)

変形させた「Box_Brush」を選択し、Detailsパネルの「Convert Actor」をクリックします。これはBSPブラシを形状を維持したままActorにコンバートする機能です。
![B07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9397f4b9-7adc-a7c6-e076-f2acfe0aec8f.png)
「AtomGameplayVolume」を選択します。
![B08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0e91cc09-b882-736c-66be-1d5b48e9f87e.png)

BSPブラシが**AtomGameplayVolume**に変換されました。
![B09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/39d571af-c175-1edb-7adb-d7baf8e7e68b.png)

名前がデフォルトのブラシ名である「Box_Brush」になっているので、分かりやすいようリネームするといいでしょう。
![B10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2a793124-22f7-eb6f-029f-357e3404f5c2.png)



### AtomGameplayVolumeの設定
作成したAtomGameplayVolumeから環境音をが聞こえるよう設定していきます。

キューシートを開き、川の環境音を**レベル上の「AtomGameplayVolume」内に配置**します。
![C01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/00c295cd-b411-d162-de78-49875c9dde70.png)
この状態でゲームをプレイすると……音源から離れると川の音は減衰してしまいます。
![C02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c59a4e6f-8f1e-877d-1523-71225d1a3504.png)

まずはキューを選択し、Detailsパネルの「Override Attenuation」にチェックを入れます。
これで距離減衰が個別に設定できるようになります。
![C03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/039afb69-97ad-eb0c-eb0f-a104bc78036f.png)
「Inner Radius」を川の幅に合うくらいに調節します。
![C04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f2499e00-ef47-ae2b-2a24-ad7c3f19367a.png)
「AtomGameplayVolume」を選択し、Datailsパネルから「+Add」ボタンを押してコンポーネントを追加します。
![C05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/13cb1e0a-b7be-636d-3491-bff82e1f4081.png)
今回の実装の要となる「Portal」コンポーネントを選択します。
![C06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/9f4b7cf6-4121-473e-2b22-f959792eb22a.png)
「AtomGameplayVolume」に「Portal」コンポーネントが追加されました。
![C07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/232d97dd-c686-6f46-abb7-b40ca253fb56.png)
もうひと手間必要です。コンテンツブラウザ（コンテンツドロワー）の任意の場所で右クリックし、「ADX Atom」→「Atom Sound Class」を追加します。
![C08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5637566f-7b7d-6124-b92a-3a9dfffc403a.png)
「Atom Sound Class」が作られます。環境音のためのクラスを想定し、「ASC_Environment」と名前をつけました。
![C09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f632204c-ac10-5253-0f19-b413d9485915.png)
ダブルクリックして開きます。
Detailsパネルの「Apply Ambient Volumes」にチェックをつけます。
これでこのAtom Sound Classに設定されたサウンドは、AtomGameplayVolumeの影響を受けることになります。
![C10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cb253ff8-82b8-786d-3b63-6c0d101dec84.png)
キューシートを開き、キューの「Class」に作成した「ASC_Environment」を設定します。
![C11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0f162bb9-94e2-c9c1-3b52-180552b0529b.png)
他の環境音のキューに対しても一括でClassを設定してしまいましょう。
![C12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/ab2877af-34f9-a958-7143-a115dc4732d4.png)
ゲームを再生すると、川に沿って移動してもサウンドが着いてきてくれるようになりました！
![C13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/5f92ee78-1e6f-9b0c-ee74-d757a5a3957d.png)

サウンドのテスト用描画は、コンソールコマンド「atom.3dVisualize.Enabled 1」で行えます。
![C15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/10db60d0-3fb5-f514-5898-d4c9df3d074a.png)
サウンドの位置は変化しませんが、Portal内をプレイヤーの近くまで移動できるカーソルが視覚化できます。

川の中（AtomGameplayVolumeの中）に入ると、減衰のないサウンドが聞こえます。
![C14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/02174d91-d795-e84d-101a-3da16abbf829.png)
川を辿ったり、離れたり近づいたりして確認してみましょう。

同じように池と焚き火についてもボリュームを作成します。
BSPブラシは近い形状のものを使用します。
池の場合はCylinderを配置し、
![C16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c0ef2006-a00a-954f-960b-b51fb3cbc0a6.png)
![C17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/78672610-c451-375b-2655-0eda0d00d4fe.png)

焚き火の場合はSphereを配置して、それぞれの領域をカバーしました。
![C18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/327708e7-89fa-9747-59f9-a1c3f305afe8.png)
![C19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d9c6ea34-13ac-4a1f-70e1-24381b9b75bf.png)
（例として作ってみましたが、焚き火のようなごくごく小さい領域かつ、プレイヤーが内部に入り込んだりしないものにはこの機能は基本的に不要です）

ボリュームを変換後でも「Brush Editing Mode」に切り替えることで、ボリュームの大きさを変更可能です。
![C20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/fc9e2a9a-cb6a-eacd-fc0a-f7987dbf8396.png)


手動で実装しようとするとなかなか骨の折れるようなシチュエーションの環境音でも、AtomGameplayVolumeとPortalコンポーネントを組み合わせることでお手軽に実現できてしまいます。
フィールドの雰囲気作りにとても有用な機能ですので、ぜひ試してみてください。