Zenn
🤖

UE5.5 + MVVM でキャラに追従するUIを作成する

に公開
MVVM
UE5
Unreal Engine 5
tech

UE5.5におけるMVVM

MVVMは「Model/View/ViewModel」という内部構造を持ち、UIの描画処理とロジックを分離するGUIアーキテクチャです。Model → ViewModel の状態変更に同期してViewの状態（UI）が更新されます。[1] この際、ViewはViewModelの保持する値をバインディングして、値の変更があった際はUIの更新を行います。こうすることでUIとロジックの実装が疎になるメリットがあります。「Model → ViewModel → View」だけでなく、「View → ViewModel → Model」という逆方向もあり、双方向的です。
Unreal Engine の公式ドキュメントでは、「Model(大体Actor）」「View(UMG)」「ViewModel(ViewModel)」の例で紹介されています。[2]

UE5.5においてMVVMの実装を行う（BP）

  1. 「UMG ViewModel」というプラグインをONにする

  2. 「MVVMViewModelBase」を継承したBP「BP_ViewModelExample」を作成します

  3. 「View」に当たるWidgetBPを開き、「ウィンドウ>バインディングを表示」を選択

  4. 「ウィジェットを追加」から「BP_ViewModelExample」で保持している値の変更に応じて、表示を更新したいウィジェットを選択します（HPの更新ならばHPゲージのWidgetなど）この際、ViewModel側で保持している変数は「ベル」を選択してView側へ変更通知を可能にしておく必要があります。

  5. Modelに当たるアクタに「BP_ViewModelExample」の参照を持たせる

  6. アクタのロジックの更新時は、「BP_ViewModelExample」で保持している値に変更を通知するようにします（アクタのHP減少 → ViewModelで保持するHP変数に通知）

上記がMVVM実装の基本の流れです。

MVVMを用いてアクタの位置にUIを追従させる

さて上記を踏まえたうえで、アクタに追従したUI表示を行う方法が以下です。ベストプラクティスではないと思いますが、一例として。

  1. アクタのOnBeginPlayでViewModelを生成→「BP_ViewModelExample」の参照を持たせます
  2. 毎Tick「GetActorLocation → Project World Location to Widget Position」を呼び出し、ViewModel側へ通知する

UIの追従検証動画

移動しているユニットに対してUIが追従していってるのがわかります。（動画0:05~ 辺り: 縦に3つ出てくるUIがそれです）

脚注

  1. iOSアプリ設計パターン入門 より ↩︎

  2. https://dev.epicgames.com/documentation/en-us/unreal-engine/umg-viewmodel-for-unreal-engine ↩︎

Discussion