1. Epic GamesDeveloper
  3. Cómo hacer que los widgets sean interactivos

Cómo hacer que los widgets sean interactivos

Añade interacciones y funcionalidades a tu interfaz de usuario personalizada utilizando Verse.

Cómo hacer que los widgets sean interactivos

Puedes hacer que tus widgets sean interactivos:

  • Añadiendo el argumento player_ui_slot{InputMode := ui_input_mode.All } cuando añadas un widget con la función AddWidget().
  • Vinculando un controlador de eventos al evento del widget.

Actualmente, puedes hacer interactivos los siguientes widgets:

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

Interacciones con los botones

Interactuar con un botón - IU de Verse

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 nombrada 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(). 
     # Se añade la IU por jugador.
 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}) {}
  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. 
     # Se añade la IU por jugador.
 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 (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
  6. Todos los botones de la IU tienen un evento listenable OnClick() 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. 
     HandleSelectedUIButton(Message : widget_message) : void =
     if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]):
         Print("El jugador ha seleccionado {SelectedButton.GetText()}")
         PlayerUI.RemoveWidget(MyUI)
         if (establece MaybeMyUIPerPlayer[Message.Player] = false) {}
  8. A continuación puedes ver el código completo para este ejemplo: 
     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):

     # Establece el dispositivo Botón en el editor para referenciar dicho dispositivo en el nivel.
     @editable
     MyButton : button_device = button_device{}

     # Mensaje localizable que se va a mostrar como texto en la IU.
     TextForMyUI<localizes> : message = "Opción"

     # Asignación entre el jugador y el widget que se puede haber añadido a su IU.
     var MaybeMyUIPerPlayer : [player]?canvas = map{}

     # Se ejecuta cuando se inicia el dispositivo en un juego en ejecución.
     OnBegin<override>()<suspends> : void =
         MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction)

     # Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla.
     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 (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}

     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 =
         if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]):
             Print("El jugador ha seleccionado {SelectedButton.GetText()}")
             PlayerUI.RemoveWidget(MyUI)
             if (establece MaybeMyUIPerPlayer[Message.Player] = false) {}

Interacciones con los controles deslizantes

Interactuar con un control deslizante - IU de Verse

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 nombrada 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 =
     # Define lo que 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 detecta qué jugador interactuó y qué elemento de la interfaz de usuario seleccionó, así que puedes utilizar esa información para obtener el valor del control deslizante y encontrar el widget que se muestra al jugador. 
     HandleValueChangedUISlider(Message : widget_message) : void =
     if:
         PlayerUI := GetPlayerUI[Message.Player]
         MyUI := MaybeMyUIPerPlayer[Message.Player]?
         ChangedSlider := slider_regular[Message.Source]
     then:
         Print("El jugador cambió el valor del control deslizante a {ChangedSlider.GetValue()}")
  5. A continuación puedes ver el código completo para este ejemplo: 
     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):
    
     # Establece el dispositivo Botón en el editor para referenciar dicho dispositivo en el nivel.
     @editable
     MyButton : button_device = button_device{}
    
     # Mensaje localizable que se va a mostrar como texto en la IU.
     TextForMyUI<localizes> : message = "Cerrar"
    
     # Asignación entre el jugador y el widget que se puede haber añadido a su IU.
     var MaybeMyUIPerPlayer : [player]?canvas = map{}
    
     # Se ejecuta cuando se inicia el dispositivo en un juego en ejecución.
     OnBegin<override>()<suspends> : void =
         MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction)
    
     # Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla.
     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 (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
    
     # Crea una IU con un control deslizante interactivo y un botón que elimine la IU de la pantalla.
     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 
    
     # Cuando el jugador interactúa con el control deslizante, el nuevo valor se imprime en la pantalla.
     HandleValueChangedUISlider(Message : widget_message) : void =
         if:
             PlayerUI := GetPlayerUI[Message.Player]
             MyUI := MaybeMyUIPerPlayer[Message.Player]?
             ChangedSlider := slider_regular[Message.Source]
        then:
             Print("El jugador cambió el valor del control deslizante a {ChangedSlider.GetValue()}")
    
     # La IU personalizada se elimina cuando el jugador selecciona la opción del botón Cerrar.
     HandleSelectedUIButton(Message : widget_message) : void =
         if (PlayerUI := GetPlayerUI[Message.Player], MyUI := MaybeMyUIPerPlayer[Message.Player]?, SelectedButton := text_button_base[Message.Source]):
             Print("El jugador ha seleccionado {SelectedButton.GetText()}")
             PlayerUI.RemoveWidget(MyUI)
             if (establece MaybeMyUIPerPlayer[Message.Player] = false) {}

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page