El minijuego Verse Commander tiene la siguiente IU:
Órdenes del personaje: estos botones se asignan a órdenes para el PNJ (avanzar, girar a la izquierda y girar a la derecha). Al seleccionar una, se añade a la lista de la parte inferior de la pantalla.
Ejecutar: botón que indica al PNJ que ejecute la cola de órdenes de la parte inferior de la pantalla.
Quitar: botón que elimina la última orden añadida a la lista.
Reiniciar: botón que reinicia el tablero actual y borra la cola de órdenes.
Lista de órdenes: lista dinámica de órdenes que aumenta cuando un jugador añade órdenes y disminuye cuando un jugador las elimina.
Toda la IU se implementa en Verse. Consulta Creación de interfaces de usuario en el juego para empezar a utilizar la IU de Verse y entender cómo funciona.
Las secciones siguientes describen cómo crear los botones personalizados y la IU dinámica que se utilizan en este juego.
Creación de botones
Los botones se crean en su propia clase, minigame_button, que gestiona su aspecto cuando se activan o desactivan. Utilizamos un botón silencioso que superpone una caja apilable horizontal con el texto y el icono, que a su vez superpone el fondo. Esto crea el efecto de un aspecto personalizado para los botones, a la vez que mantiene la funcionalidad y capacidad de respuesta que se obtiene con el diseño predeterminado de los botones en Fortnite.
La función SetEnabled() establecerá la interactividad del propio botón y cambiará las texturas y los colores que se utilizan en función de si el botón está activado o no.
# The class for storing all the widget references for a button and setting its look.
minigame_button := class:
# Store a reference of the overlay for easy removal later.
var Widget:overlay = overlay:
# Store a reference of the background texture widget to change easily later.
BackgroundImage:texture_block = texture_block:
DefaultImage := Textures.MiniGameUI.T_UI_Button_Blue_Rounded
DefaultDesiredSize := vector2{X := 256.0, Y := 128.0}
Cómo añadir órdenes a la pantalla
Cada ranura de la lista de órdenes de la parte inferior se almacena en una instancia de la clase command_queue. Esta clase gestiona el aspecto de la ranura y almacena los datos de las órdenes asociadas a ella.
Siempre hay dos ranuras (incluso cuando no hay órdenes en la lista) para representar los extremos izquierdo y derecho de la visualización de la lista. Cuando el jugador selecciona una nueva orden, el extremo derecho se actualiza con el icono de la orden y se añade una nueva ranura en el extremo derecho. A continuación, la representación de los datos de la orden se almacena en la variable CommandData.
Cuando el jugador selecciona el botón Eliminar, el widget del extremo derecho se elimina del lienzo y la última orden pasa a ser la ranura del extremo derecho. La variable CommandData se desactiva porque ya no hay ninguna orden asociada a esta ranura.
# A class that stores the image (texture) that is used to represent a command in the queue on screen
# and the enum associated with that command.
command_queue := class:
# Store a reference of the overlay for easy removal later.
var Widget:overlay = overlay{}
# Store a reference of the background texture block to change the image easily later.
BackgroundImage:texture_block = texture_block:
DefaultImage := Textures.MiniGameUI.TransparentImage512
DefaultDesiredSize := vector2{X := 88.0, Y := 88.0}
Cómo gestionar la IU en general
La mayor parte del código de la IU está en la clase verse_commander_minigame_ui. Esta clase configura el aspecto de cada botón y su texto e iconos exclusivos, genera la disposición de la IU y gestiona los cambios cuando se añaden o eliminan órdenes.
Las imágenes personalizadas son texturas expuestas a Verse desde UEFN. El nivel de acceso para las texturas importadas en el proyecto se define en el archivo submodules.verse. Para obtener más información, consulta Cómo exponer recursos a Verse.
Este código parece más largo que algunos de los otros archivos debido a la necesidad de especificar la posición y el aspecto de cada widget de la IU. La mayor parte del comportamiento solo existe en las tres funciones ResetCommandQueue(), Remove() y AddCommandToDisplay().
# This file contains all the code to create and modify the UI
# in the Verse Commander minigame.
# The UI for the game contains:
# - Buttons that map to commands for the NPC: forward, turn left, turn right.
# - An execute button that tells the NPC to perform the queue of commands.
# - A remove button that removes the last command added.
# - A reset button that resets the current board and clears out the command queue.
# - A dynamic list of commands that grows wider when a player adds commands and shrinks when a player removes commands.
using { /Fortnite.com/Devices }
Siguiente paso
Puedes encontrar la lista completa de código para crear la IU en el paso final 7. Resultado final.
Ahora que tenemos una IU personalizada, el siguiente paso te muestra cómo gestionar el juego y todas las piezas ya creadas.
