🎨

【UEFN】カスタムUIからセーブポイントを使えるようにする

2024/02/04に公開

全体の流れ

  1. CanvasでUIをつくる
  2. ボタンをセーブポイントとbindingする
  3. HUDメッセージとCanvas連携

Widget BluePrintを作成

コンテンツフォルダの中にUI用のフォルダを新規作成後
コンテンツドロワーを右クリックしてUserInterface➡︎Widget BluePrintをクリック

BluePrintを選択後にUserWidgetを選択

Widget BluePrintは2種類ある
・UserWidget➡︎HUDMessage
・Dialog➡︎ポップアップ

Dialogはイベントが発生させられるのでボタンなどを実装したい場合はこっち

今回は、イベントを送りたいのでポップアップを選択
UserWidgetはインタラクションなし

引用:
https://www.youtube.com/watch?v=OAupkMTq2no

BluePrintをダブルクリックして開く

Canvas Panelを置く

UIを配置していくために、まずは左側のEditorにあるCanvas Panelを中央の編集画面に
ドラッグ&ドロップしておきます

Buttonを配置

UserCreatedからButtonを選択して配置します

バインディング

ウィンドウの一番下にViewBindingという項目があるのでクリック

ビューモデルを作成

ビューモデル選択画面で、Creative Modal Dialog Viewmodel を選択しSelect
その後閉じる

AddNewWidgetをクリック

None→下記のように作成したUIに設定

Click時にイベントを発火できるように、下記画像のようにバインディングします

  1. 矢印をビューモデルに一方向にする
  2. Functionの設定
    Get Response Buttonにする
  3. CreativeModalDialogmodel➡︎Responseの設定
  4. Fieldの部分は、先ほど配置したButtonを設定

    ここまでできたら、左上のCompileボタンを押し、保存します

引用:
!NO CODE! Custom UI with working Buttons in 5 MINUTES || UEFN - Fortnite Creative 2.0
https://www.youtube.com/watch?v=wzp2veXSHXU

ポップアップダイアログの仕掛けを配置

ポップアップダイアログとは・・・
ポップアップダイアログ の仕掛けは、HUD上に、プレイヤーがインタラクトできるテキストボックスを表示させるインターフェース
インタラクトできるという点が重要
https://dev.epicgames.com/documentation/ja-jp/fortnite-creative/using-popup-dialog-devices-in-fortnite-creative

  1. ポップアップダイアログの仕掛けを配置
  2. ユーザーオプションのラウンド開始時に表示をオン
  3. 詳細設定の指定の時間表示をオフ
  4. HUDWidgetに作成したUIのBluePrintを選択
  5. 表示を下記の画像のようにしてリモコンから起動できるようにする

HUD Scaleを100%にしておく

HUD OptionsのHUD Scaleを100%にしておく

https://www.youtube.com/watch?v=eWcL5aTH-MY

セーブポイントを配置

セーブポイントでイベントを受信

セーブポイントの詳細設定

・デバイスを選択
ModalWidgetに配置したポップアップデバイスを選択

・イベントを選択
UIの作成時に作成した「On responding Button 1」イベントを選択します

信号リモコンからUIを呼び出せるようにする

信号リモコンからポップアップを呼び出す

信号リモコンの付与

アイテムグランターを配置してユーザーに信号リモコンを起動時に付与する
下記のように設定

信号リモコンマネージャーの配置

信号リモコンから信号を受けとるために
詳細設定でゲームスタート時に有効化

参考:
https://www.youtube.com/watch?v=BciWUt_RXcc

ポップアップダイアログで信号を受信

ユーザーオプション
表示
を下記のように設定

公式docs:
https://dev.epicgames.com/documentation/ja-jp/fortnite-creative/using-signal-remote-manager-devices-in-fortnite-creative

追加情報

UIはUEのUnreal Motion Graphics (UMG)というものを使用しているらしい
https://docs.unrealengine.com/5.1/en-US/umg-ui-designer-for-unreal-engine/

Verseを使用したやりかた
https://dev.epicgames.com/documentation/en-us/uefn/making-widgets-interactable-in-unreal-editor-for-fortnite

スクショなどは下記動画から撮影させていただきました

公式docs:
In-Game User Interfaces
https://dev.epicgames.com/documentation/en-us/uefn/creating-in-game-ui-in-verse

Modal Dialog Variant: Create a Custom Button UI without Verse Code
https://dev.epicgames.com/community/learning/tutorials/4yPG/fortnite-modal-dialog-variant-create-a-custom-button-ui-without-verse-code

Discussion