概要

前回、ローカルのオーディオデバイスを音源をアプリ内に取り込む機能を実装した。※UE5.4 ローカルで再生中のオーディオ取得および再生①　-対象オーディオデバイス固定-
現状、対象のオーディオデバイスはソース内で指定している。
そのため対象デバイスを変更する場合はソース改修が必要であり、あまりにもお粗末。
最適なのはアプリ利用時にUIにて対象のオーディオデバイスを選択すること、そのために今回はUI上からオーディオデバイスを選択できる機能を実装するため、UIを操作するモードを追加する。

目的

ローカルのオーディオデバイスを抽出し選択することが出来るUIの実装

名称定義

名称	説明
Main画面	ゲームとしてキャラクターの操作及びストーリーなどをゲームを楽しむ画面
Pouse画面	ゲームとしては一時停止状態やコンフィグ設定などの画面
UE	Unreal Engine。当環境ではUnrealEngine5.4を指す
BP	BluePrintの略
Wedgit	UEにおけるUIオブジェクトの総称

要件

主画面

キーボードによるプレイヤーの操作
マウスによる視線変更
キー押下によるPouse画面への遷移

Pouse画面

マウスによるWedgitの選択
キャラクターは移動のみ許可
主画面のイベントの停止はしない　※BGMなどの再生、時間での描写内容の変更などは継続

環境

バージョン等

種別	概要	バージョン
OS	Mac	M1 2020/Sonoma 14.4.1
Engine	UnrealEngine	UE5.4.2
テンプレート	ThardPorthon	-
Plugin	-	-

開発規則

命名規則

区切り文字としては「 _ 」アンダースコアを利用
基本概念として先頭の領域から階層的に下降する
最後の領域には用途が容易に認識可能な名称を設定する

[ファイルタイプ]_[名称]

共通ファイルの修正

World設定

デフォルトマップの変更

[1] Project設定を開く
　「Settings」-「Project Settings...」を選択
[2] 読み込むMapの変更
「Project - Map & Modes」-「Defoult Maps」
　　Editter startup Map : MAP_PauseUI
　　Game defoult Map :MAP_PauseUI
[3] Gamemodeの変更

Gamemodeの変更

[1] world設定を開く
　「Settings」-「world Settings...」を選択
[2] Gamemodeの変更
　「GameMode」
　Gamemode Override:GM_PouseUI

流用用ファイルの複製

アプリ作成時ThirdPersonのテンプレートを利用し、デフォルトで設定されているファイルを本項目向けにコピーする。

コピー元※「/All/Contents/」は略	コピー先※「/All/Contents/PouseUI/」は略	用途
ThirdPerson/BluePrints/BP_ThirdPersonCharacter	BluePrints/BP_Character_PouseUI	ユーザが操作するキャラクターのブループリント
ThirdPerson/BluePrints/Inputs/IMC_Defoult	BluePrints/Inputs/IMC_PouseUI	キャラクターに設定するキーマップとアクションの紐付け用ブループリント
ThirdPerson/BluePrints/Inputs/Actions/IA_*	BluePrints/Inputs/Actions/IA_*	キーに設定するアクション用ブループリント

必要ファイルの生成

名前	継承元	用途
WBP_PouseUI	「User Interfaces」-「Widget BluePrint」	Pause画面用Wedget
IA_MainPouseSwitch	Input Action	画面遷移を行うためのアクションイベントの入力を管理する
PC_InGame	Player Controler	ゲームモードの管理をキャラクターではなく上位レイ
HUD_UI	「Object」-「Actor」-「HUD」	Pouse画面を表示させるためHUDクラスのBPを作成する。
PG_InGame	GameMode Base	ゲームモードの処理を行うBPを生成する

Pause画面用Wedget

[1]「Contents」-「UIs」- 「PouseView」ディレクトリへ移動
[2] 「...add」-「User Interfaces」-「Widget BluePrint」を選択
→Widget BluePrint生成画面が出力
[3] Widget BluePrint生成画面にて下記を選択して生成する。
　Common:User Widget 生成するウィジットの継承元を指定する。
[4]生成されたWedgitBluePrintの名前変更
WBP_PouseUI

IA_MainPouseSwitch

[1]「Content Browser」タブより「All」-「COntent」-「PouseUI」-「BluePrints」-「Inputs」-「Actions」へ移動　
[2]「Content Browser」タブより「Add」を押下し「Input」-「Input Action」にてファイル生成
[3]生成されたファイルの名前を「IA_MainPouseSwitch」へ変更

PC_InGame

ヤにて実施したいため、別途コントローラ用BP|
[1]コンテンツドロワより「PouseUI」ー「BluePrints」-「Inputs」へ移動
[2][Add]を押下し、「BluePrint」-「Player Controler」を選択し「Select」ボタンを押下

HUD_UI

HUD

HUD とは、ゲームプレイ中にスクリーン上でオーバーレイ表示されるステータスと情報のことです。
HUD の目的は、 現在のゲームの状態、すなわちスコア、ヘルス値、残り時間などを プレイヤーに知らせることです

HUD は、スクリーン上にオーバーレイされる要素を表示するための基本クラスです。
ゲーム内でユーザーがコントロールするすべてのプレイヤーは、各自で AHUD クラスのインスタンスを持ち、それらは個々のビューポートに描画されます。
分割スクリーンのマルチプレイヤー ゲームの場合、 複数のビューポートが同じスクリーンを共有しますが、各 HUD は各自のビューポートに描画します。
使用する HUD のタイプやクラスは、 使用しているゲームタイプによって指定されます。

参照元：UE docment

手順

[1]コンテンツドロワより「PouseUI」ー「BluePrints」へ移動
[2][Add]を押下し、「BluePrint」-「All Classes」を展開。「Object」-「Actor」-「HUD」を選択し「Select」ボタンを押下
[3]生成したファイルを 「HUD_UI」 に名称変更

PG_InGame

[1]コンテンツドロワより「PouseUI」ー「BluePrints」へ移動
[2][Add]を押下し、「BluePrint」-「Game Mode Base」を選択。「Select」ボタンを押下
[3]生成したファイルを 「GM_InGame」 に名称変更

コピーしたファイルの設定修正

IMC_PouseUI

コピーしたIAとの紐付け

[1]「IMC_PouseUI」を開き「Detalis」タブ-「Mappings」に設定されている「IA_＊」を同名のコピーしたインプットアクションファイルへ差し替える

BP_Character_PouseUI

World設定

[1]「World Settings」-「Game Mode」-「Selected GameMode」-「Defoult PlownClasses 」に 「BP_Character_PouseUI」 を設定

キーマッピングBP「IMC_PouseUI」との紐付け

作成したコントローラーマッピングファイルを利用するため、デフォルトのユーザキャラクターの操作マッピングとして設定を行う

[1]「BP_Character_PouseUI」を展開
[2]「Event Ghaph」を開き下記変数を置き換える
「Add Input Mapping」-「Add Mapping Context」-「Mapping Context」： IMC_PouseUI

[3]既存の「EnhansedInputAction」関数をIMC_PouseUIにて設定したInputActionへ変更

[4]コンパイルを実行

新規ファイルの構築

Pause画面用Wedget

Canvas Panelの設置

【概要】

最上位の状態では複数のオブジェクトを配置できない。
Pouse画面へ遷移したことを視認しやすいようにする。
Pouse画面遷移後、メイン画面のオブジェクトを間違えて選択させない。

上記を達成するため、ベースとなるCanvas Panel設置し全画面に敷き詰めてぼかしを入れる。

【階層構成】

【手順】
[1] 「Designer」モードへ移動-「Palette」-「Panel」-「Canvas Panel」を「Hierarchy」-「WBP_PouseUI」配下へドラッグ＆ドロップする。

[2]「Palette」-「SPECAL EFFECTS」-「Background Blur」を「Hierarchy」-「WBP_PouseUI」配下へドラッグ＆ドロップする。

[3]「Hierarchy」-「WBP_PouseUI」-「Background Blur」を選択し「Detalis」から下記パラメータを修正
「Slot(Canvas Panel Slot)」-「Anchors」: Anchors　※全画面へ拡張
「Application」-「Blur Strengh」：10.0 ※ぼかし効果

[4]「Complie」を押下

IA_MainPouseSwitch　※デフォルトより変更なし

IMC_PouseUIの設定

[1]「IMC_PouseUI」を開く
[2]Detalis」タブ-「Mappings」-[+]を押下
[3]生成されたMappingレコードへ下記設定を実施
Mappings: IA_MainPouseSwitch
「IA_MainPouseSwitch」-key:keybord - Tab
「IA_MainPouseSwitch」-「Trigers」（「+」押下して追加）: Pressed

PC_InGameの設定

HUD_UI の設定

追加変数

PouseUIWidget

VariableType: WBP_PouseUI
DefaultValue: -
Private: true

StrPouseVisibility

VariableType: String
DefaultValue: Collapsed
Private: true

追加EventDispaches

IsPause

VariableName: IsPause
VariableType: Boolean

ゲーム開始時に折りたたんで表示させる

Pouse画面遷移イベント発生時の処理

PC_InGame

ゲーム起動時はGameモードであることの設定

Pouse画面遷移イベントの受け取り

World Settings

「Selected GameMode」-「HUD_Class」: HUD_UI
「Selected GameMode」-「Player Controller Class」: PG_InGame

参考

GitHubリンク

参考にソースは下記に配置しています。
https://github.com/DevAkame/UE5Leans/tree/main/PaseUI