Unreal Engine (UE)Advent Calendar 2024

【UE5】バイオ等にある3D空間上のWidgetにアクセスするギミックを実装する

Last updated at 2024-12-01Posted at 2024-12-01

0. 最初

こちらの記事はUnrealEngine Advent Calendar 2024 シリーズ3の2日目の記事になります

とても長いので参考程度で読んでいただけると
助かります

1. 概要

今回実装するのはバイオ7に登場する
3D空間上に配置されてあるUIに入力するギミックを再現してみます

以下の動画を視聴して概要を把握してください

完成はコレ↓

2. 実装するアセット

	アセット名	概要	実装意図
本体	BP_NumberPad
本体液晶	BP_NumberPadMonitor
入力キーの親クラス	BP_KeycapBase	使用するキーの親	今回は0とEnterは形が他のキーを異なるため共通クラスを実装
入力キー標準クラス	BP_Keycap	1~9,Cancelで使用
入力キー 0	BP_KeycapZero	横が通常３倍の大きさキー	Widgetを実装すると解像度が乱れるため専用のクラスを用意
入力キー決定	BP_KeycapEnter	縦が通常３倍の大きさキー	Widgetを実装すると解像度が乱れるため専用のクラスを用意
開くドア	BP_Door
本体を映すカメラ	BP_LookCamera

◯UI

	アセット名	概要
モニターのWidget	WBP_NumberPadMonitor
キーキャップWidgetの親クラス	WBP_KeycapBase
キーキャップWidgetの標準	WBP_Keycap	200*200
決定用のWidget	WBP_KeycapEnter	200*600
0番用のWidget	WBP_KeycapZero	600*200

◯素材は以下から好きなものをDLしてください
・音

　https://www.springin.org/sound-stock/category/system/

・フォント

　https://www.1001fonts.com/digital-7-font.html

3. 実装準備をする

　FirstPersonでプロジェクトを作ります
　Fab UE Pluginをエンジンにインストールします

　EditorからFabWindowを開き「Old Mine」を導入します

　結構時間がかかるのでしばしお待ちを....
　導入が完了したら以下のMapを開き実装して行きます

 Content/Scene_OldMine/Maps/Industrial_OldMine.umap

4. 扉を実装する

導入したアセットを使用して扉を装飾していきます

「OnOpenDoor」を定義して、ドアの動きをつけます

5. 本体(NumberPad)を仮組みする

「BP_NumberPad」を作り「StaticMesh」を追加、レベル上に配置します

Scaleは(0.1,0.1,0.1)です

6. カメラの動きを実装する

1.「ActorCamera」を継承した「BP_LookCamera」作りレベルに配置します
2.「BP_NumberPad」からレベル場に配置したカメラを取得しておきます
3.「BoxCollision」を追加します

4.「SetCamera」という関数を定義して以下の様に繋げます

引数名	概要
BlendTimed	カメラの移動時間
LookTarget	視線用のアクタ
ShowMouseCursor	マウスカーソルを表示するか？

当たり判定に接触したときに以下のように繋ぎます

7. キーのWidgetを作る

「WBP_KeycapBase」を作成して以下を継承します
・WBP_Keycap
・WBP_KeycapEnter
・WBP_KeycapZero

Baseで「Setup Key」と定義します
引数は「KeyLabel(キーの名前)」を定義します

「GetTextBlock」のPure関数を定義し「空のText Block型」を返します

各子どもの関数で中身を「GetTextBlock」をOverrideします

WBP_Keycap
WBP_KeycapEnter
WBP_KeycapZero

「Setup Key」へ戻り「SetText」をKeylabelでTextを更新します

「OnClickKeyCup」というDelegateを定義、引数はありません

8. キーのBPを作る

「BP_KeycapBase」を作成して以下を継承して作成します
・BP_Keycap
・BP_KeycapEnter
・BP_KeycapZero

「BP_KeycapBase」で「Setup」と定義します
引数は「KeyLabel(キーの名前)」「ClickSE(クリック時のSE)」を定義します
「KeyLabel」「ClickSE」を変数として保持します

その後Wigetから「KeycapBase」でキャストし「Setup key」で初期化します
Wigetの参照から「BindEventOnClickKeyCup」を呼び中身を定義します

バインドする関数名は「OnClickKeyCap」です
「BP_KeycapBase」でも「OnClickedBase」というDelegateを定義して
「OnClickKeyCap」は以下の用に書きます

9. 本体にキーを配置

本体に「Child Actor Component」を12個追加し
各場所に対応したBPを配置します

配置したChild Actor Componentのセットアップをします

「Setup」と関数を作り「BeginPlay」でコールします
「Setup BPKeycap」と関数を作り中身を以下のように書きます

「Setup」内で「BP_KeycapBase」型の配列を定義してください

以下のように「ChildActor」を繋げて初期化を行います

登録が終わったキーにクリック時の関数を登録します

Playをして各キーに対応したテキストが表示されていれば問題ないです

10. 入力を取る

PlayerのBPを開き「Widget Interaction」を追加してパラメータを変更します

変数名	値
Virtual User Index	1
Interaction Distance	6000
Interaction Source	Mouse

「IA_KeycapSelect」というInputActionを追加します
「IA_KeycapSelect」と「Widget Interaction」を以下の用に配置

「Press Pointer key」「Release Pointer Key」を配置し
マウスの左クリックを割り当てて起きます

11.モニターのWigetの作成

「WBP_NumberPadMonitor」を作成します
モニターには「数字入力中」「失敗」「成功」の3パターンがあります
WidgetSwitcherを配置して各ステータスのWigetを配置します

Enumで「E_MonitorState」としてモニターの状態を定義します

変数名	対応ステータス
Defalut	数字入力中
Open	成功
Error	失敗

「Set Status」と関数を追加して外部から変更できるようにします

12. モニターのBPを作成

「BP_NumberPadMonitor」を作成してWigetを追加します

「Begine Play」から参照を保持しておきます

・「On Update Status」関数を追加し引数に「E_MonitorState」を追加します
Wigetの参照から「Set Status」を呼びます

・「On Update Wiget」と関数を追加し「Text」を引数に追加します
　Wigetの参照から「Default Text Block」を呼び「Set Text」を呼びます

13. モニターの配置・表示

「BP_NumberPad」の「Child Actor Component」として追加します

「BP_NumberPadMonitor」の参照を保存します
「On Update Monitor Text」に空のTextを追加します

14. 各キーの初期化とモニターへ値を反映する

「BP_NumberPad」の「OnClickedKeycap」で以下の関数をコールします

「OnClickedKeycap」は「KeyLabel」を受け取るので分岐します
分岐用の以下の関数を追加します

関数名	概要
On Click Enter	押下時に正解かを判別します
On Click Cancel	押下時に入力された文字列を右から削除してします
On Click Number	押下時に入力された文字列の右から挿入してします