1. Epic GamesDeveloper
  3. Cómo crear y eliminar un widget

Cómo crear y eliminar un widget

Utiliza Verse para crear y eliminar widgets de la interfaz de usuario del jugador.

Cómo crear y eliminar un widget

Las siguientes secciones muestran cómo añadir un widget a la interfaz de usuario de un jugador y cómo eliminarlo.

Estos ejemplos utilizan un widget de bloque de texto, pero puedes utilizar cualquier tipo de widget. Consulta tipos de widgets para ver todos los tipos de widgets que puedes utilizar.

Cómo añadir un widget

Este ejemplo muestra cómo añadir un widget cuando un jugador interactúa con un dispositivo Botón en el nivel:

  1. Crea un nuevo dispositivo Verse y añádelo a la página de nivel. Para más información sobre cómo crear un nuevo dispositivo en Verse, consulta Cómo crear tu propio dispositivo con Verse.
  2. Abre tu archivo de Verse en Visual Studio Code con el Explorador de Verse.
  3. Añade un dispositivo Button propiedad editable a tu dispositivo Verse y configura las referencias al dispositivo Button en tu nivel. Para más información sobre cómo crear una propiedad editable, consulta Cómo personalizar un dispositivo propiedad. 
     # Establece el dispositivo Botón en el editor para referenciar dicho dispositivo en el nivel.
 @editable
 MyButton : button_device = button_device{}
  4. En la parte superior de tu archivo de Verse, añade estas líneas para usar la API de IU de Verse: 
     using { /UnrealEngine.com/Temporary/UI }
 using { /Fortnite.com/UI }
 using { /UnrealEngine.com/Temporary/SpatialMath}
  5. Esta IU es solo por jugador, por lo que necesitarás una referencia a un jugador para acceder a su IU. Este ejemplo muestra cómo mostrar una IU personalizada cuando el jugador interactúa con un botón, ya que los eventos para dispositivos incluyen una referencia al jugador que interactuó con el dispositivo. Para saber cómo configurar suscripciones a eventos, consulta Codificación de interacciones de dispositivos. 
     # 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 =
     # Se muestra la IU
  6. Ahora puedes llamar a la función fallible GetPlayerUI[] en una expresión if para obtener una referencia de la IU del jugador. 
     # Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla
 HandleButtonInteraction(Agent : agent) : void =
     # Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
     # Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
     if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
         # Se muestra la IU
  7. Con la referencia a la IU del jugador, puedes llamar a AddWidget() para añadir tu widget
    1. Crea un mensaje nombrado TextForMyUI con la especificación localizes e inicialízalo con la cadena "¡Hola, mundo!". 
       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{}

     # Un mensaje localizable para mostrar como texto en la interfaz de usuario
     TextForMyUI<localizes> : mensaje = "¡Hola, mundo!"

    El tipo message significa que el texto se puede localizar, y la cadena que utilices para inicializar una variable message es el texto y el idioma predeterminado para el mensaje. Para obtener más información sobre el tipo message, consulta la Referencia rápida del lenguaje de Verse.
    1. A continuación, crea un widget de texto con TextForMyUI como texto predeterminado y añádelo a la IU del jugador. 
       # Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla
 HandleButtonInteraction(Agent : agent) : void =
     # Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
     # Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
     if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
         MyUI : text_block = text_block{DefaultText := TextForMyUI}
         PlayerUI.AddWidget(MyUI)
  8. A continuación puedes ver el código completo: 
     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{}

     # Un mensaje localizable para mostrar como texto en la interfaz de usuario
     TextForMyUI<localizes> : mensaje = "¡Hola, mundo!"

     # 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 =
         # Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
         # Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
         if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
             MyUI : text_block = text_block{DefaultText := TextForMyUI}
             PlayerUI.AddWidget(MyUI)
  9. Guarda tu archivo Verse y elige Verse > Crear secuencias de comandos de Verse en el menú principal de UEFN para actualizar tu dispositivo Verse.

Cuando pruebes tu nivel con este dispositivo de Verse, aparecerá el texto "¡Hola, mundo!" en la esquina superior izquierda de la pantalla cuando el jugador interactúe con el dispositivo Botón por primera vez.

Cómo eliminar un widget

Este ejemplo muestra cómo eliminar la IU de la pantalla del jugador cuando vuelve a interactuar con el dispositivo Botón:

  1. Abre el archivo de Verse que creaste en Añadir un widget.
  2. Para poder eliminar el widget más tarde, cuando el jugador vuelva a interactuar con el botón, tendrás que almacenar el widget en una variable para poder hacer referencia a ella más adelante. Como los widgets solo se muestran por jugador, tendrás que almacenar el widget y asociarlo al jugador al que se muestra para poder escoger el widget adecuado para el jugador adecuado.
  3. Crea una variable del mapa llamada MaybeMyUIPerPlayer que utilice player como clave y un bloque de texto opcional como valor en el mapa. (Ten en cuenta que este ejemplo utiliza un widget de bloque de texto, pero puedes utilizar cualquier tipo de widget). 
     var MaybeMyUIPerPlayer : [player]?text_block = map{}
  4. Cuando añadas el widget a la IU del jugador, almacénalo en la variable MaybeMyUIPerPlayer para poder eliminarlo más tarde de la pantalla. Como acceder a un elemento de una asignación es una expresión falible, establecer el valor del widget en relación con el jugador al que debe llamarse en un contexto de fallo, por ejemplo, una expresión if. 
     # Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla
 HandleButtonInteraction(Agent : agent) : void =
     # Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
     # Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
     if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
         NewUI := text_block{DefaultText := TextForMyUI}
         PlayerUI.AddWidget(NewUI)
         if (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
  5. Ahora actualiza la función para comprobar si el jugador ya tiene un widget mostrado para él en MaybeMyUIPerPlayer. Si es así, elimina el widget. Si no es así, crea un nuevo widget para que lo vean. 
     # Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla
 HandleButtonInteraction(Agent : agent) : void =
     # Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
     # Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
     if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
         if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
             PlayerUI.RemoveWidget(MyUI)
             if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
         else:
             NewUI := text_block{DefaultText := TextForMyUI}
             PlayerUI.AddWidget(NewUI)
             if (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
  6. A continuación puedes ver el código completo: 
     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{}

     # Un mensaje localizable para mostrar como texto en la interfaz de usuario
     TextForMyUI<localizes> : mensaje = "¡Hola, mundo!"

     # Asignación entre el jugador y el widget que se puede haber añadido a su IU
     var MaybeMyUIPerPlayer : [player]?text_block = 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 =
         # Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
         # Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
         if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
             if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
                 PlayerUI.RemoveWidget(MyUI)
                 if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
             else:
                 NewUI := text_block{DefaultText := TextForMyUI}
                 PlayerUI.AddWidget(NewUI)
                 if (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
  7. Guarda tu archivo Verse y elige Verse > Crear secuencias de comandos de Verse en el menú principal de UEFN para actualizar tu dispositivo Verse.

Cuando pruebes tu nivel con este dispositivo de Verse, aparecerá el texto "¡Hola, mundo!" en la esquina superior izquierda de la pantalla cuando el jugador interactúe con el dispositivo Botón por primera vez. Al volver a interactuar con él, el texto desaparece.

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page