Le mini-jeu Commandant Verse présente l'interface utilisateur suivante :
Commandes de personnage : ces boutons correspondent à des commandes destinées aux PNJ (Avancer, Tourner à gauche, Tourner à droite). La sélection de l'une de ces commandes l'ajoute à la liste en bas de l'écran.
Exécuter : bouton d'exécution qui indique aux PNJ d'exécuter la file d'attente de commandes au bas de l'écran.
Supprimer : bouton de suppression qui retire la dernière commande ajoutée à la liste.
Réinitialiser : bouton de réinitialisation qui rétablit le plateau de départ et vide la file d'attente des commandes.
Liste de commandes : liste dynamique de commandes qui augmente à mesure qu'un joueur y ajoute des commandes et qui diminue lorsqu'il en supprime.
L'interface utilisateur est entièrement implémentée dans Verse. Consultez la rubrique Créer des interfaces utilisateur intégrées au jeu pour commencer à utiliser l'interface utilisateur Verse et comprendre son fonctionnement.
Dans les sections ci-dessous, nous vous expliquons comment créer les boutons personnalisés et l'interface utilisateur dynamique utilisés dans ce jeu.
Créer des boutons
Les boutons sont créés dans leur propre classe, minigame_button, qui gère leur apparence lorsqu'ils sont activés ou désactivés. Nous utilisons ici un bouton silencieux qui se superpose à une zone empilable horizontale contenant le texte et l'icône, elle-même se superposant à l'arrière-plan. Cela permet de personnaliser l'apparence des boutons tout en conservant la fonctionnalité et la réactivité que vous offre la conception des boutons par défaut dans Fortnite.
La fonction SetEnabled() définit l'interactivité du bouton proprement dit, et modifie les textures et les couleurs utilisées selon que le bouton est activé ou non.
# 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}
Ajouter des commandes à l'écran
Chaque emplacement de la liste de commandes au bas de l'écran est stocké dans une instance de la classe command_queue. Cette classe gère l'aspect de l'emplacement et stocke toutes les données de commande qui y sont associées.
Il existe toujours deux emplacements, même lorsque la liste ne contient aucune commande, afin de représenter les extrémités gauche et droite de l'affichage de liste. Lorsque le joueur sélectionne une nouvelle commande, l'extrémité droite est mise à jour avec l'icône de commande et un nouvel emplacement est ajouté à l'extrémité droite. La représentation des données de la commande est alors stockée dans la variable CommandData.
Lorsque le joueur sélectionne le bouton de suppression, le widget de l'extrémité droite est retiré de la zone de dessin, et la dernière commande devient l'emplacement de l'extrémité droite. La variable CommandData est désactivée, car il n'y a plus de commande associée à cet emplacement.
# 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}
## Gérer l'interface utilisateur dans son ensemble
La plupart du code de l'interface utilisateur se trouve dans la classe verse_commander_minigame_ui. Cette classe définit l'apparence de chaque bouton ainsi que son texte et ses icônes propres, génère la disposition de l'interface utilisateur et gère les modifications lors de l'ajout ou de la suppression de commandes.
Les images personnalisées sont des textures qui ont été exposées à Verse depuis l'UEFN. Le niveau d'accès aux textures importées dans le projet est défini dans le fichier submodules.verse. Pour en savoir plus, consultez la rubrique Exposer des ressources dans Verse.
Ce code semble plus long que certains autres fichiers, car il doit spécifier la position et l'aspect de chaque widget de l'interface utilisateur. La plupart des comportements n'existent que dans les trois fonctions ResetCommandQueue(), Remove() et 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 }
Étape suivante
Pour obtenir le code complet permettant de créer l'interface utilisateur, consultez l'étape finale 7. Résultat final.
Vous venez de créer une interface utilisateur personnalisée. L'étape suivante va vous montrer comment gérer le jeu et tous les éléments préalablement créés.
