🐳

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

2024/08/05に公開

前回

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

今回は下記2点の改善を加えました!
・関数化、クラス分けしてコードを簡略化(わかりにくさ増)
・Paddingを設定して、Stack_boxの位置変更

今回のアウトプット


1番左の縦スタックボックスはPadding設定なし、2列目から設定した


ここでテキスト入力すればスタックボックスに反映される

コード全文


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{}
    @editable
    Sub_buttontexts : []buttontexts = array{}

    var Horizon_stackslot : []stack_box_slot = array{}
    
    TextForMyUI<localizes>(InText : string) : message = "{InText}"

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


    OnBegin<override>()<suspends> : void =
        MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction)

        return
 
    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}
        return
    
    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()}")
            set Horizon_stackslot = array{}
            PlayerUI.RemoveWidget(MyUI)
            if:
                set MaybeMyUIPerPlayer[Message.Player] = false
        return

    CreateStackbutton(text:string) : button_quiet =
        stack := button_quiet{DefaultText := TextForMyUI(text)}
        stack.OnClick().Subscribe(HandleSelectedUI)
        return stack

    createStackBox(widgets:[]widget) : stack_box =
        var Vertical_stackslot : []stack_box_slot = array{}
        
        for(stackwidget:widgets):
            set Vertical_stackslot += array:
                stack_box_slot:
                    Widget := stackwidget
                    HorizontalAlignment := horizontal_alignment.Fill
                    #Padding := margin{Top:=100.0} 

        VerticalStack : stack_box = stack_box:
            Orientation := orientation.Vertical
            Slots := Vertical_stackslot

        return VerticalStack

    CreateMyUI() : canvas =
        var Index : int = 0
        for(text_class:Sub_buttontexts):
            var widgets : []widget = array{}

            for(text:text_class.buttontext):
                set widgets += array{CreateStackbutton("{text}")}
                Print("{text}")
            
            vertical := createStackBox(widgets)
            if(Index=0):
                set Horizon_stackslot += array
                    {
                    stack_box_slot:
                        Widget := vertical
                        VerticalAlignment := vertical_alignment.Top
                        #Distribution := option{20.0} 
                        #Padding := margin{Left:=100.0}
                    }
            else:
                set Horizon_stackslot += array
                {
                stack_box_slot:
                    Widget := vertical
                    VerticalAlignment := vertical_alignment.Top
                    #Distribution := option{20.0} 
                    Padding := margin{Left:=10.0}
                }
            set Index += 1

        MyCanvas : canvas = canvas:
            Slots := array:
                canvas_slot: 
                    Anchors := anchors{Minimum := vector2{X := 0.05, Y := 0.15}, Maximum := vector2{X := 0.05, Y := 0.15}}
                    Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
                    Alignment := vector2{X := 0.0, Y := 0.0}
                    SizeToContent := true
                    Widget := stack_box:
                        Orientation := orientation.Horizontal
                        Slots := Horizon_stackslot
                        
        return MyCanvas

buttontexts<public> := class<concrete>:
    @editable
    buttontext : []string =array{}

参考URL

  1. 今回は特になし

課題

  1. Clickしたあとのイベント

Discussion