0
0

More than 1 year has passed since last update.

ADX+UEでサウンドの配置UIをシンプルに整える

Last updated at Posted at 2022-07-23

はじめに

アンリアルエンジン4とサウンドミドルウェア「ADX for UE4」を連携させ、サウンドの編集機能をシンプルなUIに抑えてみます。以前の記事「ADX+UEでサウンドの配置作業を効率化する(基本編)」に処理を加えて作っていきますが、当該部分を要約しているためこの記事だけでも試すことが可能です。

UEのアウトライナやDetailsパネルでの編集は詳細な設定が可能ですが、レベル上のサウンドのみをデザインする用途では情報量が多すぎることがあります。UEに慣れないデザイナーにサウンドデザイン作業を任せる場合、混乱を招くことがあるかもしれません。
A00a.png

そこでこの記事では、UEのEditor Utility Widget(以下EUW)機能を使い、サウンドのプロパティについて表示・編集可能な情報を制限し、またスライダーなどの視覚的なデザインへと置換します。
A00b.png

前提

当記事ではUE4.26.1を使用します。ADX LEがUE5に対応した際は同じ実装法が使えると思われます。
基本的にブループリントのみでの実装を想定しています。
ADXはインディー向けの「LE版」であれば、無料で使用できます。
https://game.criware.jp/products/adx-le/

なお、ADX2はADXへ名称が変更になりましたが、ツール構成は変更ありません(2がないから古いほう、というわけではありません)。

記事執筆時点のADX for UE4のSDKバージョンはv1_29です。

ADX2 for UE4の導入や基本的な使い方は以下の記事にあります。必要に応じて参照してください。
ADX2 for UE4の導入で、一歩上のサウンド表現を(導入編)
https://qiita.com/SigRem/items/4250925f6d66a4fd287a
ADX2 for UE4の導入で、一歩上のサウンド表現を(実践編)
https://qiita.com/SigRem/items/c089b71c42e898980a46

実装

サウンド再生用アクターの作成

サウンド再生を行うためのアクターを作成します。
これは以前の記事「ADX+UEでサウンドの配置作業を効率化する(基本編)」で作成したものと同一なので、そのアクターがある方は飛ばして構いません。
https://qiita.com/SigRem/items/efd9a7b9aef44f463d73

Atomコンポーネントを持つシンプルな構造です。
A01.png

4つの変数を用意します。
A02.png

  • Sound (Sound Atom Cue型):再生するサウンドを指定する変数です。
  • Volume (float型):ボリュームを編集するための変数です。
  • Pitch (float型):ピッチを指定する変数です。
  • AutoActivate (bool型):レベル開始時に自動的に再生開始するかを選択する変数です。
    すべて目玉のマークを押し、外部からアクセス可能にしておきます。

Construction Scriptを次のように書きます。
A03.png
いずれも変数の内容をAtomComponentに反映するものです。

EUWのUIを作る

A04.png
EUWを新規に作成し、ダブルクリックして開きます。

EUWの配置

テキストと「Details View」を配置します。
A05.png
「ActorName」のテキストはDetailsパネルにて「Is Variable」にチェックをつけておきます。
A05b.png

Details Viewの設定

「Detais View」はDetailsパネルにて「Parameters to Show」の項目を追加し、「Sound」と入力しておきます。
A06.png
これでEUW上で編集できる設定を「再生するサウンド」だけに制限できます。
A09.png

スライダーの追加

さらにテキストとスライダーを追加します。
A07.png
スライダーは名前を分かりやすいものにしておき、「Is Variable」のチェックがついていることを確認します。
A08.png
ボリュームとピッチに対してスライダーを作っておきます。

チェックボックスの追加

さらにテキストとチェックボックスを追加します。
A10.png

スライダーの設定

スライダーの初期値、最小値、最大値を指定します。
A12.png
A13.png

ボリュームやピッチを操作するスライダーの詳細な数値を表示したい場合は、テキストブロックを横に置いておくといいでしょう。数値の反映は次の項で行います。
A14.png

EUWの処理を実装する

タブを切り替えてイベントグラフに移ります。
B01.png

基本処理

選択中のアクターの情報を表示する処理を書きます。
次の画像と同じように組めばOKです。処理の詳細な解説は基本編にあります。
B02.png
B03.png

編集中のアクターを変数化

選択中のアクターが「BP_CommonSound」だった場合、ボリュームやピッチなどにアクセスしたいのでキャストして変数化しておきます。
Cast To BP_CommonSoundノードの青いアウトプットピンを右クリックし、「Promote to Variable」で変数化します。
B04.png
「CastedActor」と名前をつけ、変数として格納しました。
B05.png
選択中のアクターが「BP_CommonSound」クラスではなかった場合、「CastedActor」変数をクリアしておきます。

スライダーの数値をアクターに反映する

デザイン画面に戻り、スライダーを選択してDetaisパネルから「On Value Changed」の「+」ボタンを押します。
B06.png
自動的にイベントグラフに移り、新たなイベントが追加されます。これはスライダーの数値が変更された際に発火するイベントになります。
B07.png
スライダーの現在値をアクターの変数に反映します。
この数値はアクターのConstruction Scriptを経由し、Atomコンポーネントのパラメータに反映されることになります。
B08.png
ピッチも同じようにイベントを作成します。
B09.png
スライダーの横にテキストを配置した場合、「Text」の横にある「Bind」ボタンを押し、「Create Binding」を選択します。
B10.png
次のように処理を書きます。数値が変更された際、この処理がテキストに対して走りテキスト内容も反映されることになります。選択中のアクターが「BP_CommonSound」クラスではなかった場合、テキスト内容は「-」が返されます。
B11.png
ピッチの数値に対しても同様です。
B12.png

さて、スライダー機能ができたように思えるのですが、実際に使用してみると問題があることに気づくかもしれません。
スライダーの初期値と異なるパラメータを持つアクターを選択した際、アクターの数値とスライダーの位置にずれが発生してしまうのです。
B13.png
(数値ではボリュームは「0.6」となっていますが、スライダーの位置は「1.0」にあります)

これを解決するには、アクター選択時にスライダー位置を操作してあげる必要があります。
Set Valueノードでアクターのパラメータ値をスライダーの数値に代入します。
B14.png
これでスライダーと数値のずれが解消されました。
B15.png

レベル開始時の挙動を選択する

チェックボックスを入れた場合のみ、レベル開始時からサウンドを再生する挙動にしてみましょう。
スライダーと同じ感覚の処理で大丈夫です。
B16.png
B17.png
また、例によってアクター選択時にチェックボックスの値も代入してあげると表示のずれがなくなります。
B18.png

非対応アクター選択時にUIを非表示にする

現状では「BP_CommonSound」クラス以外を選択した場合も一応スライダーが操作できてしまいます。
実際にパラメータ操作は行われないため問題はなさそうですが、少し混乱が起きそうです。
操作不能なことを明示するため、「BP_CommonSound」クラス以外を選択している場合、そもそものUIを非表示にしてしまいましょう。
非表示にさせたいパーツを選択し、「Behavior」にある「Visiblity」の「Bind」をクリックします。
「Create Binding」を選択して表示/非表示の挙動を作成します。
C01.png
キャストが成功していれば表示、そうでなければ非表示に分岐させます。
C02.png
一度挙動を作ってしまえば、他のパーツに対しても同じものを使い回すことができます。
この表示/非表示設定を反映したいパーツすべてのDetailsパネルで「GetVisiblity_0」を選択します。
C03.png

選択しているアクターのクラスによってUIの表示/非表示が変わるようになりました。
C04.png
C05.png

0
0
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
0
0