UETokyo.dev #1 UE×UEFNでオーディオビジュアライザーを作ってみた

UE × UEFN で オーディオビジュアライザーを 作ってみた

自己紹介 ● 趣味で Unreal Engine のブログ （ゲーム開発備忘録 ）を書いています。 ● ギターとインディーゲームと猫が好きです。 ● Alcheという会社でコンテンツを作成しています。 なみとん koituwasugee ゲーム開発備忘録 # UE Tokyo .dev

環境 と 前置き ● Unreal Engine 5.2.1 (Launcher 版) ● Unreal Engine for Fortnite 5.2.0 ● このスライドでは、 Unreal Engine を UE 、 Unreal Engine for Fortnite を UEFN と、 省略して説明いたします。 # UE Tokyo .dev

今回の目標 ● UEFN 上でサウンドに応じた演出を作りたい！ ↳ 周波数 (Hz) ごとに対応させたアクタの 大きさを制御したら出来そう！ ● ランタイム処理は現在（※5.2.0 ）の Verse の API を見る感じまだ難しそう。 ● BGM など普遍的な音声を波形のように 表示出来たらかっこよさそう！！ ※イメージ 引用 : エフェクター(FX)基礎 https://musicplanz.org/effector-basics/ equalizer-effect # UE Tokyo .dev

• https://musicplanz.org/effector-basics/

方針 UEFN ではシーケンサーを利用してトランスフォーム情報をキーとして保存で きるので、こちらを使って音源に合わせた演出を作ろうと決めました。 # UE Tokyo .dev

曲にあわせてやってみる 動かしたいアクタをレベルに配置して、 シーケンサーにドラッグアンドドロップ。 BGMに合わせてスケールのキーを打っていく ・・・・・ # UE Tokyo .dev

あ、これしんどい。 キーを打つのがしんどい。 真ん中あたりを微調整しようとして、 選択を間違って後半すべてズレた。 BGM増えるごとに毎回これやるの！？ 以上の理由からなんとかして手動で キーを打つのを避けたい！ 10個のアクタを制御するためにキーを打っていくだけでも気が遠くなる # UE Tokyo .dev

そうだ、Unreal Engine を使おう # UE Tokyo .dev

作戦会議 UE の豊富な機能を活用して一定間隔で、周波数からアクタのスケールを自動で計算。 その結果を頑張って UEFN に持ち込んだら何とかなるかも？？ # UE Tokyo .dev

Unreal Engine で オーディオビジュアライザーを作ろう # UE Tokyo .dev

Unreal Engine でオーディオビジュアライザーを作る 【UE4】オーディオビジュアライザーを作る https://yeczrtu.hatenablog.com/entry/2019/12/04/151328 # UE Tokyo .dev

• https://yeczrtu.hatenablog.com/entry/2019/12/04/151328

簡単な説明 Get Magnitude for Frequencies ノードで周波数（Hz）ごとの配列を渡すと、 周波数に対応した深度の配列が返されます。 その値をスケールなどアクタのトランスフォームに適応することで、波形として出力する仕組みです。 # UE Tokyo .dev

Unreal Engine でのセットアップ 記事中ではインスタンスドスタティックメッシュを利用していますが、UEFN とのデータ共有を 見越して表示用のアクタ( B_SoundBar )と制御用のアクタ( B_SoundBarManager )に分けました。 なにも実装を持たない表示アクタ B_SoundBarを制御するためのアクタ # UE Tokyo .dev

Unreal Engine でのセットアップ B_SoundBarManager の B_SoundBar を管理する実装はこれだけ。（ほぼ記事の通り） この機能を UEFN で直接動かすことはないので負荷はあまり気にしていません。 UE 標準機能だけでできるので非常にお手軽に実装できました。 # UE Tokyo .dev

Unreal Engine でのセットアップ ついでにマネージャーには周波数の配列から自動配置をする実装をして 作業コストを減らしています。 # UE Tokyo .dev

実装して出来たもの（UE5） https://youtu.be/_-D8QD0zfdE # UE Tokyo .dev

• https://youtu.be/_-D8QD0zfdE

シーケンサーで位置情報を記録しよう # UE Tokyo .dev

シーケンサーに移動情報を記録する UEFN に ブループリントの機能 を持っていくことは出来ないので UE でシーケンサーに移動量を焼きこみ、そのデータを転送します。 記録の手順を簡単に説明します。 ➀ 利用する BGM と記録したいアセットを シーケンサーに登録 ② PIEで実行 # UE Tokyo .dev

シーケンサーに移動情報を記録する ③ 記録したいアセットを シーケンサーから選択 ④ 録画ボタンから録画開始 ⑤ キーが打たれます。（ESCで終了） # UE Tokyo .dev

シーケンサーに移動情報を記録する 成功すると曲にあわせてスケールに キーが入ったシーケンサーが 完成します。 # UE Tokyo .dev

Unreal Engine から UEFN に 情報を送ろう # UE Tokyo .dev

UE から UEFN にシーケンサーを送る アセットアクション→移行から、 UEFN プロジェクトのContentsフォルダを指定して アセットを転送します。 # UE Tokyo .dev

UE から UEFN にキー情報を転送する。 うまくいくとキー情報を保持したままのシーケンサーを UEFNに持ち込むことができます。UEFN に公開されていないプロパティのキーは削除されます。 # UE Tokyo .dev

UE から UEFN にキー情報を転送する。 シーケンサーの赤くなっている部分は 参照が切れてしまっています。 UEFN 上のレベルに B_SoundBar を配置します。 シーケンサーを赤くなっている部分を 右クリック→アクタの割り当て から配置した アクタを割り振ることで修正できます。 # UE Tokyo .dev

UE から UEFN にキー情報を転送する。 これで手動でキーを打たなくてもできるように なりました。 位置情報は UE 上で配置したときの 座標が保持されてしまうので、配置しなおして 0フレームにキーを打ちなおしましょう。 # UE Tokyo .dev

UEFN 上でさらに拡張！！ シーケンサーのキーは UE 上で作成した周波数 ごとの深度が打たれているので、 このキー情報をコピーして、シーケンサーで 制御できるものに利用することもできます。 例えば、ライトが仕込んである街頭アセットの 光量や色を曲にあわせて変化させたり・・・ マテリアルパラメータコレクションを使って キーの値をマテリアルの値に使ったり・・ 表現の幅が広がります。 Alche 制作の 【 Beat Mole Shot 】の UEFN 開発画面 # UE Tokyo .dev

完成！！ https://youtu.be/G2mB7fmn_ jc フォートナイトで配信中 島コード 6361-6053-3025 # UE Tokyo .dev

シーケンサーのTips 開発中に分かったシーケンサーの知見を 2つ共有します。 # UE Tokyo .dev

➀ キーが貼り付けられない時はカーブから！（裏技） UE でつけたスケーリングのキーをカラーの R や、 ライトの Intencity に貼り付けようとしても出来ないことが多々あります。 そんな時はカーブエディタからコピペすることで無理やり貼り付けることができます。 # UE Tokyo .dev

② トランスレーションが超便利 カーブエディタにはトランスレーションという機能があり、 これを利用することでキーの倍率を自由に変更することができます！ ②トランスレーションツールを有効化 ①トランスレーションしたいキーを範囲選択 ③ スケーリングする原点を指定 ④ 枠を移動して自由に変形 # UE Tokyo .dev

UEFN をきっかけに Unreal Engine はじめてみませんか！ # UE Tokyo .dev

ご清聴ありがとうございました！ # UE Tokyo .dev