Tworzenie widżetów interaktywnych

Widżety mogą być interaktywne dzięki następującym metodom:

• Dodanie argumentu player_ui_slot{InputMode := ui_input_mode.All } podczas dodawania widżetu za pomocą funkcji AddWidget().

• Powiązanie procedury obsługi zdarzeń ze zdarzeniem widżetu.

Obecnie interaktywne mogą być następujące widżety:

• Przycisk

• Suwak

W poniższych sekcjach znajdziesz przykłady, jak sprawić, by widżety te były interaktywne.

Interakcje z przyciskiem

Postępuj zgodnie z poniższą instrukcją, aby utworzyć UI z przyciskiem i dodać zachowanie, które powoduje wyświetlenie tekstu wybranego przycisku na ekranie, gdy gracz wchodzi w interakcję z przyciskiem:

1. Otwórz plik Verse utworzony w sekcji Usuwanie widżetu.

2. Utwórz funkcję o nazwie CreateMyUI(), w której utworzysz UI. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableButtons

3. Zmień typ dla MaybeMyUIPerPlayer to [player]?canvas: var MaybeMyUIPerPlayer : [player]?canvas = map{}

4. Zmień przypisanie dla NewUI, aby wywołać nową funkcję CreateMyUI().

   Verse

        # UI are added per Player.
        HandleButtonInteraction(Agent : agent) : void =
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
                    PlayerUI.RemoveWidget(MyUI)
                    if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
                else:
                    NewUI := CreateMyUI()
                    PlayerUI.AddWidget(NewUI)
                    if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
   

   Copy full snippet(10 lines long)

5. Dodaj argument player_ui_slot{InputMode := ui_input_mode.All} podczas dodawania nowego widżetu, aby gracz mógł użyć kursora na kanwie po jej utworzeniu.

   Verse

        # UI are added per Player.
        HandleButtonInteraction(Agent : agent) : void =
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                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}) {}
   

   Copy full snippet(10 lines long)

6. Wszystkie przyciski UI mają zdarzenie nasłuchiwalne` OnClick(), które możesz subskrybować. Procedura obsługi zdarzeń powinna mieć typ zwracany void i jeden parametr typu widget_message. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyInteractableButtons : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableButtons HandleSelectedUIButton(Message : widget_message) : void = # Określ, co się stanie, gdy gracz naciśnie przycisk

7. W HandleSelectedUIButton, wyświetl tekst przycisku na ekranie i usuń widżet z ekranu. Element widget_message wie, który gracz i element UI go wybrał, więc możesz użyć tej informacji, aby pobrać tekst przycisku i znaleźć widżet, który jest wyświetlany graczowi, aby usunąć go z ekranu.

   Verse

        HandleSelectedUIButton(Message : widget_message) : void =
            if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]):
                Print("Player selected {SelectedButton.GetText()}")
                PlayerUI.RemoveWidget(MyUI)
                if (set MaybeMyUIPerPlayer[Message.Player] = false) {}
   

   Copy full snippet(5 lines long)

8. Poniżej znajduje się kompletny kod ilustrujący ten przykład.

   Verse

        using { /Fortnite.com/Devices }
        using { /Verse.org/Simulation }
        using { /UnrealEngine.com/Temporary/UI }
        using { /Fortnite.com/UI }
        using { /UnrealEngine.com/Temporary/SpatialMath }
   
        hello_world_device := class(creative_device):
   
            # Set the Button device in the Editor to reference the device in the level
            @editable
   
   Expand code Copy full snippet(54 lines long)

Interakcje z suwakiem

Postępuj zgodnie z poniższą instrukcją, aby utworzyć UI z suwakiem i dodać zachowanie, które powoduje wyświetlenie ustawionej wartości na ekranie, gdy gracz wchodzi w interakcję z suwakiem:

1. Otwórz plik Verse utworzony w sekcji Interakcje z przyciskiem.

2. Zaktualizuj funkcję o nazwie CreateMyUI() za pomocą suwaka. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableWidgets

3. Wszystkie suwaki UI mają zdarzenie nasłuchiwalne OnValueChanged(), które możesz subskrybować. Procedura obsługi zdarzeń powinna mieć typ zwracany void i jeden parametr typu widget_message. CreateMyUI() : canvas = MyUIButton : button_loud = button_loud{DefaultText := TextForMyUI} MyUIButton.OnClick().Subscribe(HandleSelectedUIButton) MyUISlider : slider_regular = slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5 MyUISlider.OnValueChanged().Subscribe(HandleValueChangedUISlider) MyInteractableWidgets : canvas = canvas: Slots := array: canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUISlider canvas_slot: Anchors := anchors{Minimum := vector2{X := 0.25, Y := 0.6}, Maximum := vector2{X := 0.5, Y := 0.6}} Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0} Alignment := vector2{X := 0.5, Y := 0.5} SizeToContent := true Widget := MyUIButton return MyInteractableWidgets HandleValueChangedUISlider(Message : widget_message) : void = # Określ, co się stanie, gdy gracz zmieni wartość suwaka

4. W HandleValueChangedUISlider wyświetl wartość suwaka na ekranie. Element widget_message wie, który gracz wszedł w interakcję i który element UI wybrał, więc możesz użyć tej informacji, aby pobrać wartość suwaka i znaleźć widżet, który jest wyświetlany graczowi.

   Verse

        HandleValueChangedUISlider(Message : widget_message) : void =
            if:
                PlayerUI := GetPlayerUI[Message.Player]
                MyUI := MaybeMyUIPerPlayer[Message.Player]?
                ChangedSlider := slider_regular[Message.Source]
            then:
                Print("Player changed slider value to {ChangedSlider.GetValue()}")
   

   Copy full snippet(7 lines long)

5. Poniżej znajduje się kompletny kod ilustrujący ten przykład.

   Verse

        using { /Fortnite.com/Devices }
        using { /Verse.org/Simulation }
        using { /UnrealEngine.com/Temporary/UI }
        using { /Fortnite.com/UI }
        using { /UnrealEngine.com/Temporary/SpatialMath }
   
        interactable_slider := class(creative_device):
   
            # Set the Button device in the Editor to reference the device in the level
            @editable
   
   Expand code Copy full snippet(79 lines long)