1
0

UE5+ADXで、ゲーム内UIのカーソル音に凝ってみる(改訂版)

Last updated at Posted at 2022-04-02

はじめに

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

前提

UE5.4+「ADX LE UE SDK(2.03.00)」を使用します(他バージョンにおいても、基本的に実装方法は同じです)。
基本的にブループリントのみでの実装を想定しています。
ADXはインディー向けの「LE版」であれば、無料で使用できます。
https://game.criware.jp/products/adx-le/

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

ADX for UEの導入や基本的な使い方は以下の記事にあります。必要に応じて参照してください。
ADX for UEの導入で、一歩上のサウンド表現を(導入編)

ADX for UEの導入で、一歩上のサウンド表現を(実践編)

実装

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

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

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

まずはピッチを調整するためのAISACコントロールを追加します。
プロジェクトツリーの「AISACコントロール」のフォルダ内で未使用の「AisacControl」を選択し、F2キーでリネームします。
A02.png

今回は名前を「ButtonPitch」としました。
A03.png

キューを作成する

カーソル音用のキューを作成します。キューのタイプは用途に合わせて変更してください。今回は単純に「ポリフォニック」で作成しました。
A04.png

キュー内にマテリアルをドラッグ・アンド・ドロップし、サウンドが再生されるようにします。
A05.png

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

キューにAISACコントロールを設定していきます。
キューを右クリックし、「新規オブジェクト」→「AISACの作成」を選択します。
A06.png

AISACの追加ダイアログではグラフタイプを「ピッチ」に変更します。
A07.png

出現した「AISACリスト」の「ピッチ」を選択するとグラフが操作可能になります。
A08.png

まずはグラフ上を適当にクリックして4つのコントロールポイントを追加し……
A09.png

右のインスペクターをタブ切り替えで「ポイントリスト」表示にし、パネルで数値を入力して微調整するといいでしょう。
0~0.3では低いピッチ(カーソル順送り)、0.301~0.7では通常のピッチ(汎用音)、それ以上であれば高いピッチ(カーソル逆送り)としました。
A10.png

さらに端にコントロールポイントを追加し、カーソルが端でループした際の変化を追加します。
例ではさらに低いピッチとしました。
A11.png

キューを再生しながら、上部のスライダーでAisacコントロールの動作を試してみましょう。段階的にピッチが変化しているでしょうか?
A12.png

キューシートのビルド

ここまでできたらキューシートをビルドします。

A13.png
A14.png

これでAtomCraftでの工程は完了ですので、UEに移りましょう。

UEでの実装

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

ビルドしたキューシートをインポートします。
コンテンツブラウザ(コンテンツドロワー)の適当な場所にacf, acbファイルをドラッグ&ドロップしてインポートします。
その際のダイアログでは「Yes」を選択します。
B01.png
2種類のアセットが作られました。
B02.png
キューシートを開き、キューが再生できることを確認します。
B03.png

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

UE5の新しい入力システム「EnhancedInput」を使用する、ボタン入力を登録して使用します。

B04.png
B05.png
B06.png
B07.png
B08.png
B09.png
B10.png
B11.png
B12.png
B13.png

UIを準備する

操作するためのUIを準備します。

コンテンツブラウザ(コンテンツドロワー)の適当な場所で右クリックし、「User Interface」→「Widget Blueprint」を選択します。
C01.png
親クラスは「User Widget」を選択します。
C02.png
名前をつけ、ダブルクリックして開きます。
C03.png

メニューが並んでいる簡単なサンプルを用意しました。
「Canvas」を下地に、「Image」「Text」を使用して作っています。
C04.png

テキスト「メニューA」の場所にあるシアンのバーがカーソルとなり、キー入力に合わせて動く想定です。

ウィジェットの入力処理

UI側に入力を反映させる処理を書いていきます。ここの処理はいろいろな方法があり、プロジェクトによっても変わってくるところなので、ここでは簡単に試せる処理を書いていきます。
この記事では最終的に「レベルブループリントで入力処理を受け取り、UIにカスタムイベントとして伝達する」手段をとります。

UMGからウィジェットのグラフに移動します。
D01.png

新規にカスタムイベントをひとつ追加します。
D02.png

Detailsパネルでカスタムイベントにパラメータを追加します。
D03.png

パラメータのタイプを「Integer」にし、適当な名前をつけます。これがカーソルの移動量になります。
D04.png

ふたつのInteger型変数を追加し、現在のカーソル位置と項目の最大数とします。
D05.png
変数「MaxCursor」を選択し、「Default Value」を「3」にしておきます。
選択肢が4つのため、カーソルの値は「0~3」で変動する想定です。
D05b.png

カスタムイベント「CursorMove」の入力を受け取り、カーソルの現在値に加算します。
D06.png

Clampノードを噛ませると簡単に最小・最大数に制限がかけられて便利です。
D07.png

Event Tickから、カーソル画像の表示位置をカーソルの現在値に合わせてずらす処理を追加します。
D08.png

レベルブループリントを開きます。
Event BeginPlayでウィジェットを追加します。
E01.png

追加したウィジェットのアウトプットピンを右クリックし、「Promote to Variable」で変数として格納します。
E02.png
変数に適当な名前をつけます。
E03.png

先ほどプロジェクトに登録したカーソル入力を取得し、上であれば「-1」、下であれば「+1」をウィジェットのカスタムイベント「Cursor Move」に渡します。
E04.png

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

サウンドを再生する

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

カーソル音を再生する

ウィジェットのカスタムイベント「CursorMove」の処理の最後にSpawn Sound 2Dノードを追加し、カーソル移動音を指定します。
同名のノードがありますが、「Atom」カテゴリのものを使用します。
F01.png
再生するキューシートを選択し、キューを選択します。
F02.png
AISACコントロールを操作してカーソル音のピッチを変化させます。Set Aisac Control Valueノードを使用します。

F03.png

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

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

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

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

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