Cómo crear y eliminar widgets

En las siguientes secciones, se muestra cómo añadir un widget a la IU de un jugador y cómo eliminar un widget.

En estos ejemplos, se utiliza un widget de bloque de texto, pero puedes utilizar cualquier tipo de widget. Consulta Tipos de widgets para conocer todos los tipos de widgets que puedes utilizar.

Cómo añadir un widget

En este ejemplo, se muestra cómo añadir un widget cuando un jugador interactúa con un dispositivo de botón en el nivel:

1. Crea un nuevo dispositivo de Verse y añádelo al nivel. Para aprender a 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 una propiedad de dispositivo Botón editable a tus dispositivo de Verse y configura la referencia al dispositivo Botón en tu nivel. Para obtener más información sobre cómo crear propiedades editables, consulta Personalizar propiedades del dispositivo. # Establece el dispositivo de botón en el editor para referenciar al dispositivo en el nivel. @editable MyButton : button_device = button_device{}

4. En la parte superior de tu archivo de Verse, añade las siguientes líneas para utilizar la API de la IU de Verse: using { /UnrealEngine.com/Temporary/UI } using { /Fortnite.com/UI } using { /UnrealEngine.com/Temporary/SpatialMath}

5. Esta IU es única por jugador, por lo que necesitarás una referencia a un jugador para acceder a la IU. En este ejemplo, se 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 obtener más información sobre cómo configurar suscripciones a eventos, consulta Codificación de las interacciones entre dispositivos. # Se ejecuta cuando el dispositivo se inicia en un juego en ejecución OnBegin<override>()<suspends> : void = MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction) # Una IU personalizada solo puede asociarse a un jugador específico, y solo ese jugador puede verla. HandleButtonInteraction(Agent : agent) : void = # Mostrar IU.

6. Ahora, puedes llamar a la función falible GetPlayerUI[] en una expresión if a fin de obtener una referencia a la IU del jugador.

   Verse

        # A custom UI can only be associated with a specific player, and only that player can see it
        HandleButtonInteraction(Agent : agent) : void =
            # Agents can be a player or AI, but you can only get the UI of a player
            # so you must cast the Agent, who interacted with the Button device, to the player type
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                # Display UI
   

   Copy full snippet(6 lines long)

7. Con la referencia a la IU del jugador, puedes llamar a AddWidget() para añadir tu widget.

   1. Crea un mensaje denominado TextForMyUI que contenga el especificador localizes e inícialo con la cadena "¡Hola, mundo!". hello_world_device := class(creative_device): # Establece el dispositivo Botón en el editor para hacer referencia al dispositivo en el nivel. @editable MyButton : button_device = button_device{} # Un mensaje localizable para mostrar como texto en la IU. TextForMyUI<localizes> : message = "¡Hola, mundo!"

   El tipo message significa que el texto puede localizarse, y la cadena que utilizas para inicializar una variable message es el texto y el idioma predeterminados para el mensaje. Para obtener más información sobre el tipo message, consulta la Guía de referencia rápida del lenguaje Verse.

   1. Luego, crea un widget de texto con TextForMyUI como texto predeterminado y añádelo a la IU del jugador.

      Verse

       # A custom UI can only be associated with a specific player, and only that player can see it
       HandleButtonInteraction(Agent : agent) : void =
           # Agents can be a player or AI, but you can only get the UI of a player
           # so you must cast the Agent, who interacted with the Button device, to the player type
           if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
               MyUI : text_block = text_block{DefaultText := TextFOrMyUI}
               PlayerUI.AddWidget(MyUI)
      

      Copy full snippet(7 lines long)

8. El siguiente es el código completo:

   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(26 lines long)

9. Guarda tu archivo de Verse y selecciona Verse > Compilar código de Verse en el menú principal de UEFN para actualizar tu dispositivo de Verse.

Cuando pruebas tu nivel con este dispositivo de Verse, el texto "¡Hola, mundo!" aparece en la esquina superior izquierda de la pantalla cuando el jugador interactúa con el dispositivo Botón.

Cómo eliminar un widget

En este ejemplo, se muestra cómo eliminar la IU de la pantalla del jugador cuando interactúas con el dispositivo Botón nuevamente:

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 establecer una referencia más tarde. Dado que los widgets solo se muestran por jugador, deberás almacenar el widget y asociarlo con el jugador al que se muestra, para que puedas obtener el widget correcto para el jugador correcto.

3. Crea una variable mapa denominada MaybeMyUIPerPlayer que utilice player como clave y un bloque de texto opcional como valor de widget en el mapa. (Ten en cuenta que, en este ejemplo, se 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, almacena tu widget en la variable MaybeMyUIPerPlayer, para poder eliminarlo más tarde de la pantalla. Dado que el acceso a un elemento en un mapa es una expresión falible, establecer el valor del widget en relación con el jugador debe llamarse en un contexto de fallo, como una expresión if.

   Verse

        # A custom UI can only be associated with a specific player, and only that player can see it
        HandleButtonInteraction(Agent : agent) : void =
            # Agents can be a player or AI, but you can only get the UI of a player
            # so you must cast the Agent, who interacted with the Button device, to the player type
            if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
                NewUI := text_block{DefaultText := TextForMyUI}
                PlayerUI.AddWidget(NewUI)
                if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
   

   Copy full snippet(8 lines long)

5. Ahora actualiza la función para verificar si el jugador ya tiene un widget que se muestra en MaybeMyUIPerPlayer. Si lo tiene, elimina el widget. Si no lo tiene, crea un nuevo widget para que lo vea.

   Verse

        # A custom UI can only be associated with a specific player, and only that player can see it
        HandleButtonInteraction(Agent : agent) : void =
            # Agents can be a player or AI, but you can only get the UI of a player
            # so you must cast the Agent, who interacted with the Button device, to the player type
            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}
   
   Expand code Copy full snippet(12 lines long)

6. El siguiente es el código completo:

   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(34 lines long)

7. Guarda tu archivo de Verse y selecciona Verse > Compilar código de Verse en el menú principal de UEFN para actualizar tu dispositivo de Verse.

Cuando pruebas tu nivel con este dispositivo Verse, el texto "¡Hola, mundo!" aparece en la esquina superior izquierda de la pantalla cuando el jugador interactúa por primera vez con el dispositivo Botón. El texto desaparece cuando el jugador interactúa de nuevo con el dispositivo Botón.