Cómo crear y eliminar widgets

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 de Verse y añádelo al nivel. Para aprender a crear un dispositivo nuevo 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 editable de dispositivo Botón a tu dispositivo de Verse y establece la referencia al dispositivo Botón en el nivel. Para saber cómo crear propiedades editables, consulta Cómo personalizar las propiedades del dispositivo. # 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 falible GetPlayerUI[] en una expresión if para obtener una referencia de 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 llamado TextForMyUI con el especificador 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> : message = "¡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 Verse.

   1. A continuación, 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. A continuación puedes ver 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 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 Cómo 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 map nombrada MaybeMyUIPerPlayer que use player como clave y un bloque de texto optional como valor del widget 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.

   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 comprobar si el jugador ya tiene un widget mostrado para él en MaybeMyUIPerPlayer. Si es así, elimina el widget. De lo contrario, crea un nuevo widget para que lo vean.

   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. A continuación puedes ver 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 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.