UE4+ADX2で作る、軒下での雨音表現（発展編）

# はじめに
UE4.23+「ADX2 LE v2.10.05」を使用します。
アンリアルエンジン4とサウンドミドルウェア「ADX2 for UE4」を連携させ、
ゲーム内の**雨**の環境音の挙動を実装します。

基本的な実装については前回の記事を参照してください。
**UE4+ADX2で作る、軒下での雨音表現（基本編）**
https://qiita.com/SigRem/items/7a534e5f2fa4109015dc

## 今回の実装例
基本編では建物に入った際に雨がフェードアウトするだけでしたが、今回は**建物に雨が当たる音の表現**も加えてみます。
また、トリガーで建物への進入を判定していましたが、**頭上に天井があれば自動的に雨音に変化を加える**ようにします。


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


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


# 実装

##AtomCraft側

###キューの作成
新規にキューを作成します。
![A01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/bbd57ee6-14da-f5ec-b3df-cef34637adf5.png)
通常の雨の音の他に、建物の近くで聞く雨の音の素材をインポートしておきます。
ふたつの素材をキューにドラッグアンドドロップして、ふたつのトラックを作ります。
![A02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/99377246-874d-c574-a48d-d6f3a3f25dc9.png)
リネームし、通常の雨の音を「Track_Rain_Outside」、建物の中から聞く雨の音を「Track_Rain_Inside」としています。

###AISACの設定
ふたつのトラックについて、それぞれボリュームとハイパスフィルタのAISACコントロールを作成します。
合計4つのグラフを作ることになりますが、AisacControlはボリュームとハイパスフィルタの2つぶんになります。これにより、「トラックAが減衰するとトラックBがフェードインする」といったように、ふたつのトラックのボリュームとフィルタの数値を連動させることができます。

トラックを選択して「新規オブジェクト」→「AISACの作成」をします。
![A03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/cb5df4f4-ee02-6089-632c-cd7e6938f7e6.png)
「Track_Rain_Outside」には「Aisac_VolumeA」「Aisac_HighPassA」のふたつを作成します。
![A04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0f912d3f-eff3-4c34-509b-b6e872757803.png)
![A05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/38d61f1e-90d2-6d51-7ce4-8624bedd8764.png)
「Track_Rain_Inside」には「Aisac_VolumeB」「Aisac_HighPassB」のふたつを作成します。
![A06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f06896e0-ff4c-079e-f886-e5ea504174c7.png)
![A07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/a6cbea73-5234-d7bb-4bbc-e2bf1ff3edce.png)
![A08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/06b94af2-fb62-e69f-6088-5e9608953adc.png)
AISACコントロールのIDを間違えないようにしましょう。ボリュームは「AisacControl_00」、フィルタは「AisacControl_01」です。

雨音の自然な移り変わりを実現するためのグラフを考えてみましょう。
![A13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/fb45f416-1764-9248-2a6f-27b773c307e5.png)
上の画像のように、左側では建物の外で聞く音に、右に行くほど屋内で聞く音に近づくようにします。

4本のグラフを編集します。
テスト再生しながらAISACコントロールを動かしてみると調整しやすいです。特に中間の音は聞きながら微調整しましょう。


例として次のようなものができました。
▼Track_Rain_Outsideのボリュームは屋内に入ると、中間ほどから急激に減衰します。
![A09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/1aa68617-8538-9474-3362-396a2aceb0a4.png)
▼Track_Rain_Outsideのハイパスフィルタも同様に減衰していきます。
![A10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0d0f2cf5-6a13-991b-5196-19f4f7941672.png)

▼Track_Rain_Insideのボリュームが代わりに増加しますが、屋内から聞こえる雨なので右端でも音量を抑えておきます。
![A11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/74df30eb-da02-1515-6eea-db145889acc7.png)
▼Track_Rain_Insideのハイパスフィルタも同様です。
![A12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/0a6855d4-20e5-5e15-9acf-df05cc7c962a.png)

聞き返してみて問題なければ、キューシートをビルドします。

## UE4側

### キューシートのインポート
エクスポートしたキューシートをインポートします。
![B01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/78bfe3ef-2ff8-52f5-92b1-61b3c23ace57.png)
新しく作ったAtom Cueをレベルに配置します。
![B02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/452beaa9-c723-9ec5-9ab1-bd4f5f5b9813.png)
イベントグラフを開き、基本編で配置したノードの中からAtom Cueの参照ノードを新しいものに置き換えます。
![B03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3ed84b42-916e-d642-88af-d0c8003924e0.png)
タイムラインノードをダブルクリックして開き、グラフを以下のように変えます。
![B04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/14e49c9d-d747-72c5-8a25-1ae6873d6fc0.png)
屋内に入ると段々とAISACコントロールグラフの右側へと遷移していくイメージです。

テストしてみましょう。より自然なフェードに聞こえると思います。
![B05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3235f5cb-c282-f7b4-ebf2-23086404471a.png)


# Tips

## 頭上に障害物がある場合に雨音をフェードさせる

これまでの実装ではトリガーで特定の場所だけ屋内の判定を作っていましたが、トレースを使って**プレイヤーの頭上が遮られたら屋内判定にする**手法も紹介します。
▼プレイヤーの頭部座標から上方に判定を飛ばし、何か遮るものがないか自動的に判別します。
![B06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/3d2650d1-b0f3-6f5c-536a-5de12834ae0e.png)
▼もし遮られたら、屋内に入ったものとして雨音のフェード処理を行います。
![B07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/627fed74-06f9-5c17-8da9-3c13f7a901a0.png)

ブループリントのグラフは以下のようになります。
![B08A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f45a82fc-7edc-e295-70d2-c2c56474f5e0.png)
▲**Event Tick**から処理を開始します。毎フレーム行われるイベントです。
![B08B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d6190ab9-3eff-70ad-674e-15fac3111f8a.png)
▲**Get Player Character**でプレイヤーキャラであるアクターを取得します。また、**Get Actor Location**でアクターの座標を取得します。
![B08C.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c206b4b1-2287-51e5-4cb8-3faa2fef0ffc.png)
▲**vector + vector**ノードをふたつ作り、それぞれトレースの開始地点である「アクター座標にZ100を加えたもの」（キャラクターの頭上座標）とトレースの目標地点である「アクター座標にZ10000を加えたもの」（高度約10000）の数値を入力します。
![B08D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dc9bc284-5efd-f2cf-86b7-f4580295c14b.png)
▲**LineTraceByChannel**ノードに必要な線をつなぎ、トレース処理が完成します。
![B09A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4f3ce442-0e3a-6298-c506-4cf39921689c.png)
**LineTraceByChannel**の後に**Branch**ノードを配置し、**LineTraceByChannel**の「Return Value」を「Condition」につなげます。
▲トレースに遮蔽物があれば、**LineTraceByChannel**の「Return Value」はTrueを返します。
![B09B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/f750f358-f4c7-0c51-bd25-b6cfda4df8ee.png)
▲後は今までに作ったタイムライン以下のノードをコピペすればOKです。

デバッグ用に**LineTraceByChannel**ノードの「Draw Debug Type」は「For One Frame」に設定しておきましょう。これにより、毎フレームトレースのラインが描画され動作を確認しやすくなります。
![B10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/c5ea3093-9bb8-4bb5-6a55-e070e5af1da8.png)

実行してみましょう。キャラクターの頭上に線が描画されます。
![B11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/4182e32c-288a-fdf6-7eda-a5637ab7d5f0.png)
これが遮られると、雨音の処理が行われるはずです。
![B12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/89b3b796-9173-121a-e53b-5182350f562c.png)

## カメラを基準にしてトレースを使う
前項ではキャラクター基準のトレースを行いましたが、TPSではカメラの位置から判定をとったほうが自然な印象になることもあります。

カメラ位置からのトレースには、次のような処理が必要です。
![B14A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/d3ce1df7-6097-0fe2-da91-d31c15feddb6.png)
▲**Event BeginPlay**ノードでゲーム開始時に実行されるイベントを作ります。
![B14B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/dd2447f8-c4b8-fdc6-3d96-724277ff51d2.png)
▲**Get PlayerCharacter**でプレイヤーキャラのアクターを取得し、**Cast To （プレイヤーキャラのアクター名）**でアクターのクラスにキャストします。これはキャラクターが持つカメラにアクセスするための処理です。
![B15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/2ca6e1d6-c445-0adb-24f2-0b82ab945db6.png)
▲**Cast To （プレイヤーキャラのアクター名）**ノードの青いアウトプットピンを右クリックし、「Promote to Variable」でアクタークラスの変数を作成します。
![B16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/93ce0e48-a662-2629-d25a-f1cc98755742.png)
▲「MyChar」といったように分かりやすい名前をつけます。
![B17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154452/8d4227a8-d07b-6718-0f36-b9f6ba741d7f.png)
▲先ほどのトレース処理に戻り、**Get MyChar**から**Get Follow Camera**でカメラのリファレンスノードを取得し、**GetWorldLocation**ノードでカメラの座標を取ります（カメラはアクターではなくコンポーネントのため、**Get Actor Location**が使えません）。
あとは同じ用に**vector + vector**ノードでつないで完成です。