はじめに
アンリアルエンジン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コントロールによりピッチを変更して音を変化させます。
AISACコントロールを追加する
まずはピッチを調整するためのAISACコントロールを追加します。
プロジェクトツリーの「AISACコントロール」のフォルダ内の適当な「AisacControl」を選択し、F2キーでリネームします。
今回は名前を「ButtonPitch」としました。
キューを作成する
カーソル音用のキューを作成します。キューのタイプは用途に合わせて変更してください。今回は単純に「ポリフォニック」で作成しました。
キュー内にマテリアルをドラッグ・アンド・ドロップし、サウンドが再生されるようにします。
AISACコントロールを設定する
キューにAISACコントロールを設定していきます。
キューを右クリックし、「新規オブジェクト」→「AISACの作成」を選択します。
AISACの追加ダイアログではグラフタイプを「ピッチ」に変更します。
出現した「AISACリスト」の「ピッチ」を選択するとグラフが操作可能になります。
まずは適当にクリックしてコントロールポイントを追加し……
右の「ポイントリスト」パネルで数値を入力し、微調整するといいでしょう。
0~0.3では低いピッチ(カーソル順送り)、0.301~0.7では通常のピッチ(汎用音)、それ以上であれば高いピッチ(カーソル逆送り)としました。
さらに端にコントロールポイントを追加し、カーソルが端でループした際の変化を追加します。
例ではさらに低いピッチとしました。
キューシートのビルド
ここまでできたらキューシートをビルドします。
これでAtomCraftでの工程は完了ですので、UE4に移りましょう。
UIを準備する
操作するためのUIを準備します。
メニューが並んでいる簡単なサンプルを用意しました。
テキスト「」の場所にあるバーがカーソルとなり、キー入力に合わせて動く想定です。
メニューはY軸座標「100」ごとに置いています。
キー・ボタン入力を登録する
プロジェクト設定からキー・ボタン入力を登録します。
ツールバーの「Edit」→「Project Settings」を開きます。
「Input」タブの「Binding」の項目を開き、「Action Mappings」を+ボタンを押して2つ追加します。
それぞれ「CursorUp」「CursorDown」と名前をつけ、任意のキーを登録します。今回はカーソルキーの上下を登録しました。
ウィジェットの入力処理
UI側に入力を反映させる処理を書いていきます。ここの処理はいろいろな方法があり、プロジェクトによっても変わってくるところなので、この記事では簡単に試せる処理を書いていきます。
UMGからウィジェットのグラフに移動します。
新規にカスタムイベントをひとつ追加します。
Detailsパネルでカスタムイベントにパラメータを追加します。
パラメータのタイプを「Integer」にし、適当な名前をつけます。これがカーソルの移動量になります。
ふたつのInteger型変数を追加し、現在のカーソル位置と項目の最大数とします。
カスタムイベント「CursorMove」の入力を受け取り、カーソルの現在値に加算します。
Clampノードを噛ませると簡単に最小・最大数に制限がかけられて便利です。
Event Tickから、カーソル画像の表示位置をカーソルの現在値に合わせてずらす処理を追加します。
レベルブループリントを開きます。
Event BeginPlayでウィジェットを追加し、変数として格納します。
先ほどプロジェクトに登録したカーソル入力を取得し、上であれば「-1」、下であれば「+1」をウィジェットのカスタムイベント「Cursor Move」に渡します。
UIが表示され、キー入力に合わせてカーソルが動くようになりました。
サウンドを再生する
実装したカーソル移動に合わせてサウンドを再生します。
キューシートをインポートする
AtomCraftでビルドしたacf、acbファイルをコンテンツブラウザにドラッグ・アンド・ドロップしてインポートします。
プロジェクト設定のCriWareタブにて、「Atom Config」にacfファイルを設定します。
カーソル音を再生する
ウィジェットのカスタムイベント「CursorMove」の処理の最後にSpawn Sound 2Dノードを追加し、カーソル移動音を指定します。
AISACコントロールを操作してカーソル音のピッチを変化させます。Set Aisac by Nameノードを使用します。
入力の値はカーソルの移動方向によって変わるので、Selectノードを使います。
少しややこしいのですが、Selectノードは入力(0~n)の値によって異なる出力を設定できます。
インデックス番号が0~になるので、カーソル移動量に+1をし、その値に合わせてインデックスを設定していきましょう。
難しければ次の画像の通りにノードを組んでみてください。
これで、カーソル操作時に移動方向によって音が変化するはずです。
カーソルがループした際のサウンドを変化させる
カーソルが一番上もしくは下に来た際、カーソル位置を反対方向にループさせる処理です。
「CursorMove」の処理を大幅にリフォームします。
どちらにもループしなかった場合、通常のカーソル音処理を付け足して完成です。