【UEFN】VerseでクリックできるUIを表示させる

2023年10月24日

このようなクリックできるUIを作っていきます

コードは以下の動画を参考しています。

コードの全体

using { /Fortnite.com/Devices } 
using { /Verse.org/Simulation } 
using { /UnrealEngine.com/Temporary/Diagnostics } 
using { /UnrealEngine.com/Temporary/UI } 
using { /UnrealEngine.com/Temporary/SpatialMath } 
using { /Fortnite.com/UI} 

 
UI := class(creative_device): 
    @editable 
    ButtonUI :button_device = button_device{} 
    TextForButton<localizes>:message="Hello" 
    var PlayerCanvas : canvas = canvas{} 


    OnBegin<override>()<suspends>:void= 
        ButtonUI.InteractedWithEvent.Subscribe(HandleButtonPress) 

 
    CreateUI() : canvas = 
        ButtonForCanvas : button_quiet = button_quiet{DefaultText := TextForButton} 
        ButtonForCanvas.OnClick().Subscribe(HandleUIButtonClick) 
        NewCanvas : canvas = canvas: 
            Slots := array: 
                canvas_slot: 
                    Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} # (0, 0) is to left (1, 1) is to bottom right 
                    Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} 
                    Alignment := vector2{X := 0.5, Y := 0.5} # Center is anchored 
                    SizeToContent := true  
                    Widget := ButtonForCanvas 

                 
    HandleButtonPress(Agent : agent) : void = 
        if (Player := player[Agent],PlayerUI := GetPlayerUI[Player]):
            set PlayerCanvas = CreateUI() 
            PlayerUI.AddWidget(PlayerCanvas,player_ui_slot{InputMode :=ui_input_mode.All}) 


    HandleUIButtonClick(Message : widget_message) : void = 
        Player :=Message.Player 
        if(PlayerUI := GetPlayerUI[Player]): 
            PlayerUI.RemoveWidget(PlayerCanvas)

コードの解説

冒頭

今回の仕組みではボタンデバイスを使うため、11行目で定義しています。

12行目でクリックできるボタンに表示させる文字を定義しています。
String型ではなくmessage型なのは後に、はのDefaultTextの値として設定するためです。 (DefaultTextはmessage型である必要があります)

13行目で、後にcanvas型の情報が入る変数を定義しておきます

関数宣言

20行目からCreateUIを宣言しています。

コードブロックでは、ボタンを画面上に作成するために必要なcanvas型の情報作成して返すということをしています。

21行目でbutton_quietクラスのインスタンスを作成して、DefaultTextメンバー=TextForButtonとしています。
button_quietクラス自体にメンバーは存在しませんが、親であるtext_button_baseクラスのメンバーにDefaultTextが存在します。※

ちなみにtext_button_baseクラスの子には以下の3つがあり今回はbutton_quietを使っています。

この3つの違いはUIの色になります。
button_loud→黄色
button_regular→青
button_quiet→透明

22行目は、画面上のボタンをクリックしたらHandleUIButtonClick関数を実行するという意味です。
OnClickメソッドも親であるtext_button_baseクラスを対象とするため、button_quietクラスも対象にできます。

23行目からCreateUIによって返される値を設定するため、canvasクラスのインスタンスを作成しています。
CanvasクラスにはSlotsというメンバーがあり行目以降その値を定義しています。
Slotsは配列であり、またSlotsの型であるcanvas_slotは構造体であるため、難解な式になっています。

読みやすくするため配列定義と構造体のインスタンス化の表記がドキュメントのよくある表記と少し異なっています。

ドキュメントによくある表記
array{値、値、値}
構造体名{メンバー、メンバー、メンバー}

今回のコードの書き方

array:
値
値
値

構造体:
メンバー
メンバー
メンバー

構造体のメンバーの意味はそれぞれ以下のようになります。

Anchor⇒アンカーの位置
Offsets⇒Left:アンカーからの相対X座標
Top:アンカーからの相対Y座標
Right:UIのX座標のサイズ
Bottom:UIのY座標のサイズ
Alignment⇒ボタンのピボットの位置
SizeToContent⇒ボタンのサイズを自動調整するかどうか
Widget⇒表示する文章

あわせて読みたい