ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

【UE5】サウンドをループさせる方法【UMG】

こんにちは、ちょこです。

ここではUE5を学習する中で得た知見を書き残しておきます。
同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。

今回はBGMをループさせる方法を紹介します。

UIデザイナーがサウンドを管理することは稀だと思いますが、例えばモックを作って見せる際、BGMやSEがあった方がモック段階でもゲームの雰囲気がより伝わりやすくなるのかなとも思います。簡単な設定なので知っていて損ではないはず。

◆作業時間目安:5分程度

 

最終的な処理はこんな感じです。結構シンプルに見えるかなと思います。

https://cdn-ak.f.st-hatena.com/images/fotolife/a/appgameui/20230613/20230613001300.png

 

以下、ダイジェストです。

 

BGMを登録しよう

まずはライブラリにBGMを登録します。
wave形式のサウンドファイルを用意し、コンテンツディレクトリにドラッグアンドドロップするとBGMが登録できます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆


登録に成功するとこんな感じでサムネイル表示されます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲「しゅわしゅわハニーレモン350ml_2」がBGMのファイル名です。

 

キューを作成しよう

それでは、このサウンドをループ設定できるようにするために、キューを作成します。
サウンドファイルのサムネイルを右クリックし、サブコマンドを表示します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

表示されたサブコマンドの上の方にある「キューを作成」を選択してください。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

これでキューが作成できました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲コンテンツブラウザに「しゅわしゅわハニーレモン350ml_2_Cue」が表示されました

 

ループ設定しよう

作成されたキューのサムネイルをダブルクリックし、サウンドキューエディタを起動します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

サウンドキューの中身はこんな感じです。
再生させたいBGMを指定し、出力させているようです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

ここに、ループ設定させるためのノードを作ります。
エディタ上で右クリックし、ノード検索を行います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

検索窓に「Looping」を入力し、Loopingノードを表示します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

Loopingを選択し、Loopingノードを作成します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

Wave Playerノードとアウトプットノードの間にLoopingノードを挿入したら完了です。
保存してエディタを閉じても大丈夫です。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

あとは鳴らしたい場所に登録すればOKです。
例えば、以下はタイトル画面のレベルブループリントに登録した場合です。

Play Sound 2Dノードを作成し、Soundの項目からBGMを指定します。
BeginPlayノードの直後にPlay Sound 2Dノードを接続しています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

以上です。
BGMをループ再生させたい場合の参考になれば幸いです。

 


環境