Il minigioco Verse Commander ha la seguente UI:
Comandi personaggio: questi pulsanti sono associati ai comandi per il PNG (Avanti, Gira a sinistra, Gira a destra). Selezionando uno di questi comandi, questo viene aggiunto all'elenco nella parte inferiore dello schermo.
Esegui: pulsante Esegui che indica al PNG di eseguire la coda di comandi nella parte inferiore dello schermo.
Rimuovi: pulsante Rimuovi che rimuove l'ultimo comando aggiunto all'elenco.
Reimpostaset: pulsante Reimposta che reimposta il tabellone corrente e cancella la coda dei comandi.
Elenco dinamico di comandi: elenco dinamico di comandi che cresce quando un giocatore aggiunge comandi e si riduce quando un giocatore rimuove i comandi.
La UI è tutta implementata in Verse. Dai un'occhiata a Creazione di UI in gioco per iniziare a utilizzare la UI di Verse e capire come funziona.
Le sezioni seguenti descrivono come creare i pulsanti personalizzati e la UI dinamica utilizzata in questo gioco.
Creazione di pulsanti
I pulsanti vengono creati in una classe separata, minigame_button che ne gestisce l'aspetto quando vengono attivati o disattivati. Abbiamo utilizzato un pulsante silenzioso che sovrappone una stackbox orizzontale con il testo e l'icona che poi si sovrappone allo sfondo. Ciò crea l'effetto di un aspetto personalizzato per i pulsanti mantenendo la funzionalità e la reattività che ottieni con il design dei pulsanti predefinito in Fortnite.
La funzione SetEnabled() imposterà l'interattività del pulsante stesso e scambierà le texture e i colori utilizzati in base al fatto che il pulsante sia abilitato o meno.
# 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}
Aggiunta di comandi allo schermo
Ogni slot per l'elenco dei comandi in basso è memorizzato in un'istanza della classe command_queue. Questa classe gestisce l'aspetto dello slot e memorizza tutti i dati di comando a esso associati.
Ci sono sempre due slot, anche quando non ci sono comandi nell’elenco, per rappresentare le estremità sinistra e destra della visualizzazione dell'elenco. Quando il giocatore seleziona un nuovo comando, l'estremità destra viene aggiornata con l'icona del comando e viene aggiunto un nuovo slot all'estremità destra. La rappresentazione dei dati del comando viene quindi memorizzata nella variabile CommandData.
Quando il giocatore seleziona il pulsante di rimozione, il widget dell'estremità destra viene rimosso dal canvas e l'ultimo comando viene modificato in modo che sia lo slot dell'estremità destra. La variabile CommandData è impostata su falso in quanto non è più un comando associato a questo slot.
# 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}
Gestione della UI complessiva
La maggior parte del codice della UI si trova nella classe verse_commander_minigame_ui. Questa classe imposta l'aspetto di ogni pulsante e il relativo testo e icone univoci, genera il layout della UI e gestisce le modifiche quando vengono aggiunti o rimossi i comandi.
Le immagini personalizzate sono texture che sono state esposte a Verse da UEFN. Il livello di accesso per le Texture importate nel progetto è definito nel file submodules.verse. Per maggiori dettagli, vedi Esporre gli asset a Verse.
Questo codice sembra più lungo di alcuni degli altri file a causa della necessità di specificare la posizione e l'aspetto di ogni widget nell'interfaccia utente. La maggior parte del comportamento esiste solo nelle tre funzioni ResetCommandQueue(), Remove() e 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 }
Step successivo
Puoi trovare l'elenco completo del codice per creare la UI nello step finale 7. Risultato finale.
Ora che abbiamo una UI personalizzata, lo step successivo ti mostra come gestire il gioco e tutti i pezzi già creati.
