Das Verse-Kommandant-Minispiel hat die folgende Benutzeroberfläche:
Charakterbefehle: Diese Schaltflächen sind Befehlen für den NPC zugeordnet (Vorwärts, Links drehen, Rechts drehen). Durch die Auswahl eines dieser Befehle wird er zur Liste unten auf dem Bildschirm hinzugefügt.
Ausführen: Die Ausführen-Schaltfläche weist den NPC an, die Befehlswarteschlange unten auf dem Bildschirm auszuführen.
Entfernen: Die Entfernen-Schaltfläche entfernt den letzten Befehl, der zur Liste hinzugefügt wurde.
Zurücksetzen: Eine Zurücksetzen-Schaltfläche, die den aktuellen Plan zurücksetzt und die Befehlswarteschlange löscht.
Befehlsliste: Die dynamische Liste der Befehle wächst an, wenn ein Spieler Befehle hinzufügt, und wird reduziert, wenn ein Spieler Befehle daraus entfernt.
Die UI ist komplett in Verse implementiert. Sieh dir die Erstellung von In-Game-Benutzeroberflächen an, um die ersten Schritte mit der Verse-UI zu machen und zu verstehen, wie sie funktioniert.
Die folgenden Abschnitte beschreiben, wie die benutzerdefinierten Schaltflächen und die dynamische UI erstellt werden, die in diesem Spiel verwendet werden.
Erstellen von Schaltflächen
Die Schaltflächen werden in ihrer eigenen Klasse minigame_button erstellt, die ihre Darstellung regelt, wenn sie aktiviert oder deaktiviert werden. Wir haben eine stumme Schaltfläche verwendet, die ein horizontales Stapelfeld mit dem Text und Symbol überlagert, die wiederum den Hintergrund überlagern. Damit erzielen wir den Effekt einer benutzerdefinierten Darstellung für die Schaltflächen und behalten gleichzeitig die Funktionalität und Reaktionsfähigkeit bei, die das Schaltflächen-Standarddesign in Fortnite mit sich bringt.
Die Funktion SetEnabled() legt die Interaktivität der eigentlichen Schaltfläche fest und tauscht die Texturen und Farben aus, die basierend darauf verwendet werden, ob die Schaltfläche aktiviert oder deaktiviert ist.
# 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}
Hinzufügen von Befehlen zum Bildschirm
Jeder Slot für die Befehlsliste im unteren Bereich wird in einer Instanz der Klasse command_queue gespeichert. Diese Klasse verarbeitet die Darstellung des Slots und speichert alle Befehlsdaten, die ihm zugewiesen sind.
Es gibt immer zwei Slots, die das linke und rechte Ende der Listenanzeige darstellen, auch wenn sich keine Befehle in der Liste befinden. Wenn der Spieler einen neuen Befehl auswählt, wird das rechte Ende mit dem Befehlssymbol aktualisiert und es wird eine neuer rechter End-Slot hinzugefügt. Die Befehlsdatendarstellung wird dann in der Variable CommandData gespeichert.
Wenn der Spieler die Entfernen-Schaltfläche auswählt, wird das Widget des rechten Endes aus dem Canvas entfernt und der letzte Befehl wird geändert und zum rechten End-Slot. Die Variable CommandData wird auf False gesetzt, da dem Slot kein Befehl mehr zugeordnet ist.
# 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}
Verwalten der gesamten UI
Der Großteil des Codes für die UI befindet sich in der Klasse verse_commander_minigame_ui. Diese Klasse richtet die Darstellung jeder Schaltfläche, ihren eindeutigen Text und ihrer Symbole ein, generiert das UI-Layout und verarbeitet Änderungen, wenn Befehle hinzugefügt oder entfernt werden.
Die benutzerdefinierten Bilder sind Texturen, die über UEFN für Verse freigegeben wurden. Die Zugangsstufe für in das Projekt importierte Texturen wird in der Datei submodules.verse definiert. Ausführliche Informationen findest du unter Freigabe von Assets für Verse.
Dieser Code ist länger als einige der anderen Dateien, weil wir die Position und Darstellung jedes Widgets in der UI festlegen müssen. Ein Großteil des Verhaltens ist in den drei Funktionen ResetCommandQueue(), Remove() und AddCommandToDisplay() enthalten.
# 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 }
Nächster Schritt
Die vollständige Codeliste zum Erstellen der UI findest du im letzten Schritt 7. Endergebnis.
Da wir nun über eine benutzerdefinierte UI verfügen, siehst du im nächsten Schritt, wie du das Spiel und alle bereits erstellten Teile verwaltest.
