LoginSignup
0

More than 1 year has passed since last update.

UE4+ADXで、ゲーム内UIのカーソル音に凝ってみる

Last updated at Posted at 2022-04-02

はじめに

アンリアルエンジン4とサウンドミドルウェア「ADX for UE4」を使い、UI(UMG)上のカーソル操作に伴うサウンドを再生する実装例です。
ボタンやキーの入力を取得してカーソルを操作する際、順送りか逆送りか、またメニューの先端でのループ時にサウンドを変化させ、聴覚からのフィードバックを多彩にします。

(動画サンプルツイートを載せます)

当記事では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

実装

AtomCraftでサウンドバリエーションを作成する

UI上で再生するためのサウンドをAtomCraftで設定します。
ひとつだけサウンドを用意し、AISACコントロールによりピッチを変更して音を変化させます。
A01.png

AISACコントロールを追加する

まずはピッチを調整するためのAISACコントロールを追加します。
プロジェクトツリーの「AISACコントロール」のフォルダ内の適当な「AisacControl」を選択し、F2キーでリネームします。
A02.png
今回は名前を「ButtonPitch」としました。
A02b.png

キューを作成する

カーソル音用のキューを作成します。キューのタイプは用途に合わせて変更してください。今回は単純に「ポリフォニック」で作成しました。
A03.png
キュー内にマテリアルをドラッグ・アンド・ドロップし、サウンドが再生されるようにします。
A04.png

AISACコントロールを設定する

キューにAISACコントロールを設定していきます。
キューを右クリックし、「新規オブジェクト」→「AISACの作成」を選択します。
A05.png
AISACの追加ダイアログではグラフタイプを「ピッチ」に変更します。
A06.png
出現した「AISACリスト」の「ピッチ」を選択するとグラフが操作可能になります。
A07.png
まずは適当にクリックしてコントロールポイントを追加し……
A08.png
右の「ポイントリスト」パネルで数値を入力し、微調整するといいでしょう。
0~0.3では低いピッチ(カーソル順送り)、0.301~0.7では通常のピッチ(汎用音)、それ以上であれば高いピッチ(カーソル逆送り)としました。
A09.png
さらに端にコントロールポイントを追加し、カーソルが端でループした際の変化を追加します。
例ではさらに低いピッチとしました。
A10.png

キューシートのビルド

ここまでできたらキューシートをビルドします。
A11.png
A12.png
これでAtomCraftでの工程は完了ですので、UE4に移りましょう。

UIを準備する

操作するためのUIを準備します。
メニューが並んでいる簡単なサンプルを用意しました。
B01.png
テキスト「」の場所にあるバーがカーソルとなり、キー入力に合わせて動く想定です。
メニューはY軸座標「100」ごとに置いています。

キー・ボタン入力を登録する

プロジェクト設定からキー・ボタン入力を登録します。
ツールバーの「Edit」→「Project Settings」を開きます。
B02.png
「Input」タブの「Binding」の項目を開き、「Action Mappings」を+ボタンを押して2つ追加します。
B03.png
それぞれ「CursorUp」「CursorDown」と名前をつけ、任意のキーを登録します。今回はカーソルキーの上下を登録しました。
B04.png

ウィジェットの入力処理

UI側に入力を反映させる処理を書いていきます。ここの処理はいろいろな方法があり、プロジェクトによっても変わってくるところなので、この記事では簡単に試せる処理を書いていきます。

UMGからウィジェットのグラフに移動します。
C01.png
新規にカスタムイベントをひとつ追加します。
C02.png
Detailsパネルでカスタムイベントにパラメータを追加します。
C03.png
パラメータのタイプを「Integer」にし、適当な名前をつけます。これがカーソルの移動量になります。
C04.png
ふたつのInteger型変数を追加し、現在のカーソル位置と項目の最大数とします。
C05.png
カスタムイベント「CursorMove」の入力を受け取り、カーソルの現在値に加算します。
C06.png
Clampノードを噛ませると簡単に最小・最大数に制限がかけられて便利です。
C07.png
Event Tickから、カーソル画像の表示位置をカーソルの現在値に合わせてずらす処理を追加します。
C08.png

レベルブループリントを開きます。
Event BeginPlayでウィジェットを追加し、変数として格納します。
C09.png
先ほどプロジェクトに登録したカーソル入力を取得し、上であれば「-1」、下であれば「+1」をウィジェットのカスタムイベント「Cursor Move」に渡します。
C10.png

UIが表示され、キー入力に合わせてカーソルが動くようになりました。
C11.png

サウンドを再生する

実装したカーソル移動に合わせてサウンドを再生します。

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

AtomCraftでビルドしたacf、acbファイルをコンテンツブラウザにドラッグ・アンド・ドロップしてインポートします。
D01.png
プロジェクト設定のCriWareタブにて、「Atom Config」にacfファイルを設定します。
D02.png

カーソル音を再生する

ウィジェットのカスタムイベント「CursorMove」の処理の最後にSpawn Sound 2Dノードを追加し、カーソル移動音を指定します。
D03.png

AISACコントロールを操作してカーソル音のピッチを変化させます。Set Aisac by Nameノードを使用します。
D04.png
入力の値はカーソルの移動方向によって変わるので、Selectノードを使います。
少しややこしいのですが、Selectノードは入力(0~n)の値によって異なる出力を設定できます。
インデックス番号が0~になるので、カーソル移動量に+1をし、その値に合わせてインデックスを設定していきましょう。
難しければ次の画像の通りにノードを組んでみてください。
D05.png

これで、カーソル操作時に移動方向によって音が変化するはずです。

カーソルがループした際のサウンドを変化させる

カーソルが一番上もしくは下に来た際、カーソル位置を反対方向にループさせる処理です。
「CursorMove」の処理を大幅にリフォームします。
D06.png
どちらにもループしなかった場合、通常のカーソル音処理を付け足して完成です。
D07.png

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