【UE5】UnrealEngineのUIにMVVMが使えるようになる？

はじめに

UE5.1のPreviewが来ましたね。
SpeedTreeがNanite対応だとか、半透明反射できるようになったとかいろいろUpdateありますが
個人的にUMGでMVVMが使えるようになるってとこが一番気になったのでテストしてみました！
MVVMができるようになったら、UI実装でひいひい言いながらノード組むこともなくなりそうでめっちゃ期待！

UE5.1ロードマップ

MVVMが使えるようになってうれしくなる（だろう）こと

1. WBPでTextとかに反映するためのノードを組まなくても、ViewModelの変数とWidgetを紐づけるだけでよくなる
2. ViewModelの差し替えで、どんな感じにUIに値を反映させるか変更できる（適当な値を入れたViewModelのMockが作れる）
3. エンジニアが変数を用意すればUIデザイナ側でBindまで組むことも可能なので、WBP全体がエンジニアの手から離れる（かも）

テストしてみた時の動作についてまとめたTweet

公式ドキュメント

ついに公式ドキュメントも用意されたようです！
https://docs.unrealengine.com/5.1/ja/umg-viewmodel/

導入方法

1. まずはUnrealEngine5.1をインストール
2. Pluginの有効化
   
3. Project名.Build.hで、Dependencyに"ModelViewViewModel"を追加
   これより下のC++のコードは「UE」の名前でProjectを作ったので、UEのPrefixが入ってます。（わかりづらくてすいません、、、）

   // Copyright Epic Games, Inc. All Rights Reserved.
   
   using UnrealBuildTool;
   
   public class UE : ModuleRules
   {
   	public UE(ReadOnlyTargetRules Target) : base(Target)
   	{
   		PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;
   
   		PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "HeadMountedDisplay", "EnhancedInput", "UMG", "ModelViewViewModel" });
   	}
   }
   

4. これで導入はできたはず！

UnrealEngineで使ってみる！

1. ViewModelのC++を作る

   // 適当にこんな感じの基底を作ってみる
   UCLASS(BlueprintType, Blueprintable)
   class UE_API UUUETestViewModel : public UMVVMViewModelBase
   {
   	GENERATED_BODY()
   };
   
   

2. Compileして、上を継承したBlueprintを作る。適当にBP_TestViewModelという名前にしました。
   上のMVVMViewModelのClassは選択できなかったので、多分今のところはC++で基底を作るしかなさそう？
   

3. 適当にWidgetBlueprintを作成
   

4. 上のメニューから「ウィンドウ / View Binding」を選択してViewBindingのWindowを開く。
   ついでに「ウィンドウ / View Model」も選択して開いておく。
   

5. 「Create ViewModel」を押して、さっき作ったViewModelを設定。
   さきほど作ったBP_TestViewModelがこのWBPに登録されました！
   
   

6. 作ったBP_TestViewModelに戻ります。
   変数や関数が登録できるような見た目をしています。
   

7. 適当に変数を追加
   

8. WBPに戻ります。
   適当にTextをDesignに追加
   

9. ViewBindingで
   「Add Widget」、追加したTextウィジットとTextウィジットのText変数を登録。
   登録したViewModelの変数も登録。
   矢印はたぶん反映できる方向なのでViewModelからViewに反映させる左向きに設定。
   

10. これでViewModelとWBPの連携は完成！

11. 確認のため、適当にLevelBlueprintでこんな感じのノードを組むと、こんな感じに！
    
    

12. あとはこのViewModelをいい感じに外部から操作すればいい感じに！

ViewModelのセット方法（たぶん）

WBPにExtensionというなにか拡張できる仕組みがあるっぽく、そこからMVVMViewがとれるので
UMVVMViewを継承したClassを用意してCastすればViewModelを外部からセットできると思います。（未テスト）

関数のBind

ViewModelに関数を作ってViewBindingでButtonにBindしようとしても、作った関数がうまく候補に表示されないので
なにか方法が違うのかも？
調査中です、、、

ViewModel内の変数

ViewModelのBlueprintで宣言した変数（ここでいうStackNum）は、自動でSetterが暗黙定義されているのか、EventDispatcherでSetterが登録できるようです。（いちいちセットする用の関数の定義がいらなくなるので便利！）
UMVVMViewModelBaseでINotifyFieldValueChangedが継承されてるのが原因っぽそうです？

まとめ

今までUMGでUIを作るのが正直億劫（C++でModel組んでも、結局Blueprint側で反映処理を書く必要がある）だったのですが、MVVMの導入によってその心配が一切なくなる未来が見えますね！
既存の様々なデータ構造（GASのAttributeSetとか）にも対応して、ちょいちょいとWBPで設定するだけでUIの反映処理が全部組める日が来るのが待ち遠しいです！