Cómo hacer que los widgets sean interactivos

Puedes hacer que tus widgets sean interactivos:

• Añade el argumento player_ui_slot{InputMode := ui_input_mode.All } cuando añadas un widget con la función AddWidget().

• Vincula un controlador de eventos al evento del widget.

Actualmente, puedes hacer interactivos los siguientes widgets:

• Botón

• Control deslizante

Las siguientes secciones son ejemplos de cómo hacer que estos widgets sean interactivos.

Interacciones con los botones

Sigue estos pasos para crear una IU con un botón y añade un comportamiento que imprima el texto del botón seleccionado en la pantalla cuando el jugador interactúe con el botón:

1. Abre el archivo de Verse que creaste en Cómo eliminar un widget.

2. Crea una función denominada CreateMyUI() en la que crearás la IU. 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. Cambia el tipo de MaybeMyUIPerPlayer a [player]?canvas: var MaybeMyUIPerPlayer : [player]?canvas = map{}

4. Cambia la asignación de NewUI para llamar a la nueva función 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. Añade el argumento player_ui_slot{InputMode := ui_input_mode.All} cuando añadas un nuevo widget para que el jugador pueda utilizar su cursor en el lienzo al crearlo.

   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. Todos los botones de la IU tienen un evento OnClick() listenable al que puedes suscribirte. El controlador de eventos debería tener un tipo de retorno void y un parámetro con el tipo 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 = # Define lo que ocurre cuando el jugador pulsa el botón

7. En HandleSelectedUIButton, imprime el texto del botón en la pantalla y elimina el widget de la pantalla. Un widget_message reconoce qué jugador y qué elemento de la IU lo han seleccionado, de modo que puedes utilizar esa información para obtener el texto del botón y encontrar el widget que se muestra al jugador para eliminarlo de la pantalla.

   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. A continuación puedes ver el código completo para este ejemplo:

   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)

Interacciones con los controles deslizantes

Sigue estos pasos para crear una IU con un control deslizante y añade un comportamiento que imprima el texto del control seleccionado en la pantalla cuando el jugador interactúe con el control deslizante:

1. Abre el archivo de Verse que creaste en Interacciones con los botones.

2. Actualiza la función denominada CreateMyUI() con el control deslizante. 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. Todos los controles deslizantes de la IU tienen un evento listenable OnValueChanged() al que puedes suscribirte. El controlador de eventos debería tener un tipo de retorno void y un parámetro con el tipo 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 = # Definir qué ocurre cuando el jugador cambia el valor del control deslizante

4. En HandleValueChangedUISlider, imprime el valor del control deslizante en la pantalla. Un widget_message reconoce qué jugador interactuó y qué elemento de la IU seleccionó, así que puedes utilizar esa información para obtener el valor del control deslizante y encontrar el widget que se muestra al jugador.

   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. A continuación puedes ver el código completo para este ejemplo:

   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)