El minijuego Verse Commander tiene la siguiente IU:
Comandos del personaje: estos botones se asignan a comandos para el PNJ (Avanzar, Girar a la izquierda o Girar a la derecha). Al seleccionar uno de estos comandos, se lo añade a la lista en la parte inferior de la pantalla.
Ejecutar: un botón de ejecución que le dice al PNJ que ejecute la cola de comandos en la parte inferior de la pantalla.
Eliminar: un botón de eliminación para eliminar el último comando que se añadió a la lista.
Restablecer: un botón de reinicio que restablece el tablero actual y borra la cola de comandos.
Lista de comandos: una lista dinámica de comandos que se amplía cuando un jugador añade comandos y se reduce cuando un jugador elimina comandos.
La IU se implementa en Verse. Consulta Cómo crear interfaces de usuario en el juego para iniciarte en la IU de Verse y entender cómo funciona.
En las siguientes secciones, se describe cómo crear los botones personalizados y la IU dinámica utilizada en este juego.
Cómo crear botones
Los botones se crean en su propia clase, minigame_button, que gestiona su apariencia cuando están activados o desactivados. Utilizamos un botón silencioso sobre una pila horizontal con el texto y el ícono, que a su vez se superpone sobre el fondo. Esto crea el efecto de una apariencia personalizada para los botones mientras mantiene la funcionalidad y la respuesta que obtienes con el diseño del botón predeterminado 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á habilitado 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 comandos a la pantalla
Cada ranura de la lista de comandos en la parte inferior se almacena en una instancia de la clase command_queue. Esta clase gestiona la apariencia de la ranura y almacena todo dato de comando asociado a ella.
Siempre hay dos ranuras, incluso cuando no hay comandos en la lista, para representar los extremos izquierdo y derecho de la visualización de la lista. Cuando el jugador selecciona un nuevo comando, el extremo derecho se actualiza con el ícono de comando y se añade una nueva ranura derecha. La representación de los datos de comandos se almacena en la variable CommandData.
Cuando el jugador selecciona el botón de eliminación, el widget del extremo derecho se elimina del lienzo, y el último comando pasa a ser la ranura del extremo derecho. La variable CommandData se establece en falso, y ya no hay ningún comando que se asocie a esa 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 el diseño de la IU y gestiona los cambios cuando se añaden o eliminan comandos.
Las imágenes personalizadas son texturas que se expusieron 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 detalles, consulta Cómo exponer recursos en Verse.
Este código parece más largo que los de otros archivos debido a que se necesita especificar la posición y buscar cada widget en 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 }
Próximo 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, en el siguiente paso, verás cómo gestionar el juego y todas las piezas ya creadas.
