2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

UE5 + ADXで作る、軒下での雨音表現(基本編/新バージョン対応版)

Last updated at Posted at 2020-03-25

はじめに

ADXアンバサダーとして記事を書いておりますSigと申します。
この記事ではアンリアルエンジン5とサウンドミドルウェア「ADX for UE」を連携させ、ゲーム内の雨の環境音の挙動を実装します。
UE5.3+「ADX LE UE SDK(2.01.00)」を使用します。

今回の実装例

雨天の屋外から屋内へ進入するシチュエーションを考えてみましょう。
軒下に入ったタイミングですぐに雨音が小さくなるのではなく、段々と雨の音をくぐもらせながらフェードアウトさせることで自然な雨音の変化を実装してみます。
(サンプルはUE4で作られた動画ですが、UE5でも同じように処理を作ることが可能です。本記事では新バージョンのリリースに伴い、UE5での実装を扱うよう編集しています)
サンプル
▲クリックすると動画に飛びます

前提

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

今回は雨音のコントロールにAISACコントロールを使用します。
AISACコントロールの詳細な説明はこちらの記事で書いていますが、今回の記事だけでも画像の通り作れば大丈夫です。

ADX + UE5でインタラクティブミュージック(AtomCraft編)

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

やること

  • AtomCraftでキューを作成
  • Aisacコントロールを使用し、動的なエフェクトを作成
  • UE5にインポート
  • ブループリントでプレイヤーの挙動を監視、必要に応じて雨の音にエフェクトをかける

実装

AtomCraft側

キューの作成

キューシート内で新規キューを作成します。キューのタイプは「ポリフォニック」にしておきます。
A01.png
適当な名前にリネームします。
A02.png
マテリアルから雨音のサウンドをひとつ、キュー内にドラッグアンドドロップしてトラックを作成します。
A03.png
マテリアルツリーの雨音のサウンド素材はループ設定にしておきましょう。ツリー内で該当のサウンドを選択します。
A17.png
エディタ右側のインスペクター内で「ループ情報の上書き」をTrueにします。
A18.png

AISACコントロールの作成(雨音の大きさと曇り具合を設定)

UE5から雨音をリアルタイムにコントロールする手段として、雨音のトラックにAISACコントロールを設定します。
雨音のトラックを右クリックし、「新規オブジェクト」→「AISACの作成」を選択します。
A04.png
適当な名前をつけます。AISACグラフタイプは「ボリューム」です。雨音の大きさを変化させるためのグラフです。
A05.png
すぐにAISACへの編集はせず、一度タブを切り替えて「タイムライン」に戻ります。
A06.png
再び同じように「AISACを作成」します。今度は雨音のくぐもり具合を変化させるグラフを作ります。
A07.png
今度は「AISACグラフタイプ」の欄をクリックしてグラフタイプを変更します。
A08.png
バンドパス - Cof高域を選択します。
A09.png
適当な名前をつけて「追加」します。
A10.png
ふたつのAISACコントロールが作成されました。
A11.png

AISACコントロールの編集

ボリューム、バンドパス共にグラフを編集します。
AISACリストから「ボリューム」を選択して黄色のグラフを動かし、適当な曲線を作ります。線の途中をクリックすればコントロールポイントが追加され、コントロールポイントを右クリックするとカーブタイプが変更できます。
A12.png
次にAISACリストから「バンドパス - Cof高域」を選択して紫のグラフを編集します。
A13.png
再生ボタンを押し、上部のAISACコントロールの値を左右に動かすと雨音が変化します。何度かチェックし、いい感じの雨音に仕上げましょう。
A14.png

キューシートのビルド

作業が終わったら、キューシートをビルドしてエクスポートします。
A15.png
ビルドしたいキューシートにチェックがついていることを確認してからビルドしてください。
A16.png

UE5での実装

キューシートをインポート

ビルドしたacfファイル、acbファイルをエクスプローラからコンテンツブラウザ(コンテンツドロワー)にドラッグ&ドロップし、キューシートをインポートします。

acfファイルインポートの際に出てくるダイアログでは、どちらも「Yes」を選択します。
これにより、プロジェクトの設定が自動的に完了します。
B01.png
B02.png

コンテンツブラザにアセットが追加されます。
B03.png
キューシートをダブルクリックして開き、キューが再生できることを確認します。
B04.png

必要なアクターの配置

雨音、および軒下に入ったことを感知するトリガーをレベルに配置します。
キューシートからドラッグ&ドロップし、キューをレベルに配置します。
C01.png

アクターの配置ボタンから、「All Classeds」→「Trigger Box」を選択してトリガーを配置します。
C02.png

直方体のトリガーが設置されました。
C03.png

ボタンを押し、「trigger」と入力することで該当するアクターが検索できます。この機能を使うとすばやく配置できるでしょう。
C04.png

「Box Extent」の数値を変え、適切な形にサイズを整えます。
C05.png

「Line Thickness」を上げると輪郭が太くなり、視認性が高まります。
C06.png

トリガーは分かりやすいような名前に変えておきます。
C07.png

イベントの作成

トリガーを選択します。
レベル上から直接クリックしてもいいですし、「Outeliner」パネルで選択してもいいでしょう。
C08.png

レベルブループリントを開きます。
C09.png

イベントグラフ上で右クリックし、「Add Event for Trigger Box」→「Collision」→「Add On Actor Begin Overlap」を選択します。
C10.png
イベントノードが配置されました。
C11.png
同じように「Add On Actor End Overlap」を選択します。
C12.png
これで「アクターがトリガー内に進入した際」「アクターがトリガーから退出した際」のイベントが追加されました。
C13.png

軒下での雨音表現

ブループリントで軒下での雨音表現を実装します。
またビューポートに戻り、Atom Cueを選択します。
D01.png

レベルブループリントエディタで空欄を右クリックし、「Create a Reference to (アクター名)」を選択します。
D02.png

Atom Cueのリファレンスノードが現れます。
D03.png

軒下に入った際の処理は以下のようになります。

トリガー内にアクターが入ったことを感知し、それがプレイヤーであるか判別します。
D04.png

Set Aisac Control Valueノードを使い、AISACコントロールを操作し雨音を変化させます。
D05.png
このままでは「Aisac Control」の指定がないため、新規に変数として作成します。
青いインプットピン「Aisac Control」を右クリックして「Promote to Variable」を選択します。
D06.png
変数とノードが作られるので、名前をつけます。今回は「Aisac Control_00」としました。
D07.png
一度コンパイルしてから、Detailsパネルにて「Default Value」から「AisacControl_00」を選択します。
もう片方のSet Aisac Control Valueがエラーを吐いていますが、後ほど解決しますので問題ありません。
D08.png
もう片方のノードでもインプットピンを右クリックし、変数を作り名前をつけます。
D09.png
こちらは「Default Value」に「AisacControl_01」を指定します。
D10.png
「Value」の数値を「0.5」「0.3」とします。
D11.png

On Actor End Overlapイベント側も同じように処理を組みます。基本的にコピペで大丈夫です。
こちらは「Value」に「1.0」、「1.0」を指定し、軒下から出た際に雨音が元に戻るようにします。
D12.png

一度テストしてみましょう。トリガーに入ると雨音が変わり、出ていくと元に戻るはずです。
D13.png

これでは変化が即時に起こってしまうので、タイムラインを使って段々と音がフェードするように実装します。

タイムラインによるフェード表現

イベントグラフの空いている場所で「Add Timeline」をクリックしてタイムラインノードを追加します。
E01.png

作成したタイムラインノードに名前をつけます。
E02.png

タイムラインノードをダブルクリックして開きます。
E03.png

「Add Float Track」を押してトラックを追加します。
E04.png

ふたつのFloat Trackを作っておきます。それぞれ「Float_Volume」「Float_Pass」と名前を付けました。
E05.png

グラフ内で右クリックし、キーを追加します。
E06.png

数値が「1.0」から「0.5」になるようグラフを作ります。
E07.png
ポイントを選択して右クリックから「Auto」を選択するといい感じの曲線に補完されます。
E08.png

ふたつのグラフを画像のように作ります。
E09.png

タイムラインの長さを1秒にしておきます。
E10.png

イベントグラフに戻り、画像のように接続します。
トリガーに入った際はPlay、出た際はReverseです。
E11.png

最後に、タイムラインの現在の値を各AISACコントロールに繋げば実装完了です。
E12.png

この状態でゲームを再生すると、軒下に入る/出ると1秒間かけて雨音が変わっていくような聞こえ方になっています

これで軒下の雨表現が実装できました。
発展編の記事では、さらに細かい表現を加えて臨場感を加えてみます。
よろしければ参照してみてください。

UE5+ADXで作る、軒下での雨音表現(発展編)
https://qiita.com/SigRem/items/d80cb1d730c5328af216

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?