SaaSでPdMをしています UnrealEngine, Blender, Ableton Liveつかって色々作ります

https://www.instagram.com/naoto_bando/

https://twitter.com/7auto

※spacebarをたたくと数が増える

<aside> 💡

**ポイント：**学習のためミニマムにMVVMを利用

</aside>

UE Ver

Unreal Engine :5.5.4

注意事項

<aside> 🚨

MVVMは5.5.4ではまだベータです。異なるバージョンでは扱いが異なる可能性あり

</aside>

登場人物

• BPVM_Digit
  • MVVMViewModeBase
  • UIで更新したい変数を持つ
• WB_Digit
  • User Widget
  • VMでバインドされたUIを表示する
  • BPVM_Digitの変数とバインドされている
• BP_Digit
  • Actor
  • Widgetの表示や、Widget内の表示内容の更新を行う

手順

1. プラグインのUMG ViewModelをインストール

• pluginウィンドウからUMG ViewModleプラグインをインストールし、再起動する

2. ViewModelを作成

• 右クリック > Blueprint Class> ViewModelで検索 > MVVMViewModelBaseを選択
• BPVM_Digitを命名
• 変数にIntegerを追加 > ベルのマークをクリック
• FUNCTIONSを追加 > IntToTextを命名 > return nodeを追加 > 変数のIntを取得 > To Textを追加 > return nodeに接続
• FUNCTIONSのIntToTextのDetailsからpure, Constgにチェック > Field Notifyにチェック
• VARIABLESのIntのDetailsのFieldNotifyからIntToTextにチェック

3. Widgetを作成

• 右クリック > UserInterface > Widget Blueprintを選択 > User Widgetを選択
• WB_Digitと命名
• CanvasPanel, Border, Textを追加 > サイズや配置をざっくり調整
• WindowメニューからView BindingsとView Modelsを追加
• ViewModels画面から +ViewModelをクリック > BPVM_Digitを選択しSelectをクリック
• ViewModels画面のIntToTextをTextのDetailsのContent.Textにドラッグアンドドロップ

4. Widgetを表示する

• 右クリック> Blueprint Class > Actorを選択
• BP_Digitと命名
• Construct from Class > Class に BPVM_Digitを選択 > 変数化してBPVM_Digitと命名する
• create widget > class にWB_Digitを選択 > 変数ピンをCreate Widgetノードに接続 > Add Viewportを追加
• GetPlayerControllerを追加 > create widgetに接続 > Get Player ControllerからSet Show Mouse Cursorを追加 > ノードを接続

5. BPからMVVM経由でWidget内の表示を変更

• keyboard eventのspace barを追加 > timelineを追加 > Play From Startにピンを付け替える
• Timelineをダブルクリック > + trackをクリック > Add Float Trackをクリック > 右クリックしAdd Key Float Curveをクリック > timeとvalueをともに0に >右クリックしAdd Key Float Curveをおこないtimeを5, valueを10に > TimelineのLoopをOnに
• Timelineからtruncateを追加 > 変数からBPVM_Digitを取得 > BPVM_DigitからSet Intを追加 > ノードを接続

6. BPをLvに配置しinputを受け取れるようにする

• BP_DigitをLvに配置 > BP_DigitのDetailsからInputのAutoRecieveInputをplayer0に

補足

サムネではフォントを変更したり、文字色を変えたりしています

資料

https://unrealengine.hatenablog.com/entry/2023/09/28/233801

MVCやMVVMとは？というところの開設リンクもありわかりやすい

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

公式の資料。しっかり解説してくれてる分、ボリュームが大きい。