Zenn
🐳

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

2024/07/29に公開
UI
verse
fortnite
UEFN
verselang
tech

前回

https://zenn.dev/mocaprio/articles/195373f8818373

今回は下記2点の改善を加えました！
・テキストによる位置ずれ問題
・横方向stack_box_slotの中に、縦方向stack_box_slotを追加する

今回のアウトプット


横スタックボックスの中に縦スタックボックス、HorizontalAlignmentをFillに


参考 HorizontalAlignmentがLeftだったら

コード全文


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("たたかう")}
        stack1.OnClick().Subscribe(HandleSelectedUI)

        stack2 := button_quiet{DefaultText := TextForMyUI("まほう")}
        stack2.OnClick().Subscribe(HandleSelectedUI)

        stack3 := button_quiet{DefaultText := TextForMyUI("どうぐ")}
        stack3.OnClick().Subscribe(HandleSelectedUI)

        stack4 := button_quiet{DefaultText := TextForMyUI("にげる")}
        stack4.OnClick().Subscribe(HandleSelectedUI)

        stack5 := button_quiet{DefaultText := TextForMyUI("さくせん")}
        stack5.OnClick().Subscribe(HandleSelectedUI)

        stack6 := button_quiet{DefaultText := TextForMyUI("ああああああ")}
        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.Horizontal
                        Slots := array:
                            stack_box_slot:
                                Widget := stack_box:
                                    Orientation := orientation.Vertical
                                    Slots := array:
                                        stack_box_slot:
                                            Widget := stack1
                                            HorizontalAlignment := horizontal_alignment.Fill
                                        stack_box_slot:
                                            Widget := stack2
                                            HorizontalAlignment := horizontal_alignment.Fill

                                        stack_box_slot:
                                            Widget := stack3
                                            HorizontalAlignment := horizontal_alignment.Fill

                            stack_box_slot:
                                Widget := stack_box:
                                    Orientation := orientation.Vertical
                                    Slots := array:
                                        stack_box_slot:
                                            Widget := stack4
                                            HorizontalAlignment := horizontal_alignment.Fill

                                        stack_box_slot:
                                            Widget := stack5
                                            HorizontalAlignment := horizontal_alignment.Fill

                                        stack_box_slot:
                                            Widget := stack6
                                            HorizontalAlignment := horizontal_alignment.Fill


                                
        return MyCanvas

参考URL

  1. 今回は特になし

課題

  1. canvas_slotの記述がひどいことになっているから関数化やクラス分けしたい

Discussion