🐳

[UEFN][UI]stack_box(スタックボックス) 使ってみる

2024/07/23に公開

できること


2列のスタックボックスUIを表示


クリックするとPrintして消える

コード全文


using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}
 
ui_temp_stack_device := class(creative_device):
 
    @editable
    MyButton : button_device = button_device{}
    
    TextForMyUI<localizes>(InText : string) : message = "{InText}"

    var MaybeMyUIPerPlayer : [player]?canvas = map{}


    OnBegin<override>()<suspends> : void =
        MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction)
 
    HandleButtonInteraction(Agent : agent) : void =
        if:
            InPlayer := player[Agent]
            PlayerUI := GetPlayerUI[InPlayer]
        then:
            if(MyUI := MaybeMyUIPerPlayer[InPlayer]?):
                PlayerUI.RemoveWidget(MyUI)
                if:
                    set MaybeMyUIPerPlayer[InPlayer] = false
            else:
                NewUI := CreateMyUI()
                PlayerUI.AddWidget(NewUI,player_ui_slot{InputMode := ui_input_mode.All})
                if:
                    set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}
    
    HandleSelectedUI(Message : widget_message) : void =
        if:
            PlayerUI := GetPlayerUI[Message.Player] 
            MyUI := MaybeMyUIPerPlayer[Message.Player]?
            SelectedButton := text_button_base[Message.Source]
        then:
            Print("Player selected {SelectedButton.GetText()}")
            PlayerUI.RemoveWidget(MyUI)
            if:
                set MaybeMyUIPerPlayer[Message.Player] = false

    CreateMyUI() : canvas =
        stack1 := button_quiet{DefaultText := TextForMyUI("1")}
        stack1.OnClick().Subscribe(HandleSelectedUI)

        stack2 := button_quiet{DefaultText := TextForMyUI("2")}
        stack2.OnClick().Subscribe(HandleSelectedUI)

        stack3 := button_quiet{DefaultText := TextForMyUI("3")}
        stack3.OnClick().Subscribe(HandleSelectedUI)

        stack4 := button_quiet{DefaultText := TextForMyUI("4")}
        stack4.OnClick().Subscribe(HandleSelectedUI)

        stack5 := button_quiet{DefaultText := TextForMyUI("5")}
        stack5.OnClick().Subscribe(HandleSelectedUI)

        stack6 := button_quiet{DefaultText := TextForMyUI("6")}
        stack6.OnClick().Subscribe(HandleSelectedUI)


        MyCanvas : canvas = canvas:
            Slots := array:
                canvas_slot:
                    Anchors := anchors{Minimum := vector2{X := 0.1, Y := 0.8}, Maximum := vector2{X := 0.1, Y := 0.8}}
                    Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                    Alignment := vector2{X := 0.0, Y := 1.0}
                    SizeToContent := true
                    Widget := stack_box:
                        Orientation := orientation.Vertical
                        Slots := array:
                            stack_box_slot:
                                Widget := stack1
                            stack_box_slot:
                                Widget := stack2
                            stack_box_slot:
                                Widget := stack3
                canvas_slot: 
                    Anchors := anchors{Minimum := vector2{X := 0.2, Y := 0.8}, Maximum := vector2{X := 0.2, Y := 0.8}}
                    Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                    Alignment := vector2{X := 0.0, Y := 1.0}
                    SizeToContent := true
                    Widget := stack_box:
                        Orientation := orientation.Vertical
                        Slots := array:
                            stack_box_slot:
                                Widget := stack4
                            stack_box_slot:
                                Widget := stack5
                            stack_box_slot:
                                Widget := stack6
                                
        return MyCanvas

参考URL

公式ドキュメントを少しいじりました。
https://dev.epicgames.com/documentation/ja-jp/uefn/positioning-widgets-on-the-screen-in-unreal-editor-for-fortnite
https://dev.epicgames.com/documentation/ja-jp/uefn/making-widgets-interactable-in-unreal-editor-for-fortnite
https://dev.epicgames.com/documentation/ja-jp/uefn/widget-types-in-unreal-editor-for-fortnite

課題

  1. 各ボタンのテキストが変わると位置ずれが起きる
  2. Clickイベントのところがゴリ押しすぎる
  3. 今回は縦方向のVerticalにしたが、横方向Horizontalと組みあわせることができる?

つづき

https://zenn.dev/mocaprio/articles/e0f6f4875249c2

Discussion