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

3.7K Views

July 29, 23

スライド概要

2023.7/28日に開催されたUE コミュニティイベントUE Tokyo .devの登壇スライドです。

スライド内の動画のリンク↓
P11 https://yeczrtu.hatenablog.com/entry/2019/12/04/151328
P16 https://youtu.be/_-D8QD0zfdE
P27 https://youtu.be/G2mB7fmn_jc

イベントURL↓
https://ue-community-tokyo.connpass.com/event/288818/

profile-image

プログラマーです

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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