2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

UE4+ADXで実装するUIサウンド(基礎、UIアニメーション編)

Last updated at Posted at 2022-03-16

はじめに

アンリアルエンジン4とサウンドミドルウェア「ADX for UE4」を使い、UI(UMG)に連動してサウンドを再生する実装例です。
この記事ではUIアニメーションにAtom Cueを組み込み、操作に反応する処理を作ります。
また、状態によって音を変化させ、たとえば「現在UIが操作可or不可かといった状態に応じてサウンドを分岐させる」といったことも可能です。

当記事ではUE4.26.1を使用します。基本的にブループリントのみでの実装を想定しています。
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

実装

UIを作成する

UI作成にはUEのUIデザイン機能である「UMG」(Unreal Motion Graphics)を使用します。
まずは新規にウィジェットを作成します。
コンテンツブラウザの任意の階層で右クリックし、「User Interface」→「Widget Blueprint」を選択します。
A01.png
適当な名前をつけてダブルクリックします。
A02.png

UMGのエディタが開きます。
A03.png
適当にイメージとテキストを配置し、ウィンドウ(に見えるもの)を作ります。
A04.png

UIアニメーションを作成し、サウンドを組み込む

左下の「Animations」パネルの「+Animation」ボタンで新規にUIアニメーションを追加します。
A05.png
分かりやすい名前をつけます。あとでブループリントから呼び出すので、判別しやすいものにしておきましょう。
A06.png
キーを打ち、UIがフェードインして現れる、単純なアニメーションを作りました。
A07.png
Timelineパネルの「+Track」ボタンから、Atom Trackが追加できます。名前のとおり、Atom Cueを再生することができるトラックです。
A08.png
タイムライン上に任意のAtom Cueが登録でき、自由に配置できます。
A09.png
Atom Cueを配置しました。
A10.png
UIアニメーションに配置したAtom Cueですが、セレクタやコンボ、ランダムなどのAtomCraftでデザインしたサウンド機能が反映されるのが便利です。
画像内の例にあげた「Cue_A_Piano」は再生されるたびにランダムな音階のピアノの音を再生するキューであり、UIアニメーションが再生される(ウィンドウが現れる)たびに異なる音が再生されることになります。

UIアニメーションを呼び出す

アニメーションは完成しましたが、再生するための処理を作っていないのでゲーム中では呼び出されません。
UMGエディタ右上の「Graph」をクリックしてイベントグラフに移動します。
A11.png
「My Blueprint」パネルから、変数と同じようにアニメーションのGetノードが置けます。
A12.png
アニメーションのGetノードから線を引き出し、Play Animationノードを配置します。
UIが呼び出されるとまずEvent Constructが発火するので、そこにつなげます。
A13.png

レベルブループリントに移動し、UI本体を呼び出す処理を書いていきます。
A14.png
UIをCreate Widgetノードで作成し、Add to Viewportで画面に表示させます。
A15.png
「R」キーを一度押したらUIを呼び出し、もう一度押すと画面から削除する処理はこのようになります。
A16.png
ここで一度テストしてみましょう。たしかに処理どおりに動きますが、UIが消える瞬間があっけないので、クローズするためのアニメーションを用意したほうが良さそうです。

UIクローズ時のアニメーション

クローズ用アニメーションはUI呼び出し時のアニメーションを逆再生してもいいのですが、今のところブループリントから逆再生するとAtom Cueは再生されないようです。
A22.png
そのため、新しくUIクローズ用アニメーションを作ってしまいましょう。

UMGのデザイナー画面に戻り、アニメーションを右クリックし「Duplicate」で複製します。
A17.png
キーのタイミングや数値を調節し、出現時とは逆の動きをさせます。さらに、再生するサウンドをUIクローズ用のAtom Cueに差し替えます。
A18.png
UMGのイベントグラフで、新規にカスタムイベントを作成します。
名前は「CloseWidget」とし、外部からUIのクローズ処理が呼び出せるようにします。
処理内容は呼び出し時と同じく、クローズ用のアニメーションを再生するだけです。
A19.png
アニメーションを再生するだけだと内部的にはUIが動き続けていることになるので、アニメーションの再生が終わったら画面上から削除する処理も必要です。
Event On Animation Finishedはアニメーション再生終了時に自動的に呼び出されるイベントです。「Animation」アウトプットピンから再生終了したアニメーションが取得できるので、それがクローズ用のアニメーションと同一であればRemove from ParentでUIを削除します。
A20.png
レベルブループリント側も処理を変える必要があります。カスタムイベントCloseWidgetをUIから呼び出し、クローズ処理を開始させます。
A21.png

これでスムーズにUIが表示・削除されるようになりました。それぞれ異なるサウンドも再生されています。

状況に応じてサウンドを分岐させる

特に重要なメッセージを表示させる場合など、アニメーションから再生するサウンドを変更したい場合もあります。
タイムライン上のAtom Cueを右クリックし、「Properties」から「Selector Labels」の項でセレクターによるサウンド変化が可能です。
B01.png
任意のセレクタとセレクタラベルを指定できます。
B02.png

UIごとに決め打ちでセレクタラベルを指定したい場合はこれで完了ですが、ブループリントから動的にセレクターラベルを設定することもできます。
Set Global Label to Selector by Nameノードはすべてのキューに影響するため、UI内で再生されるAtom Cueにも有効です。
B03.png
その場合でも、アニメーション内のセレクターラベル指定が優先されるため削除しておく必要があります。UIの用途によって使い分けましょう。
B04.png

また、UI専用のセレクターフォルダを作っておけば他のゲーム内サウンドに影響する心配がなくなります。

補足

UIで再生したAtom Cueが3Dサウンドだったり、減衰設定が含まれていると(おそらく)原点からサウンドが聞こえてしまうので、2Dサウンドとしてデザインするのがおすすめです。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?