W minigrze Komandor Verse zastosowano następujące UI:
Polecenia postaci: Te przyciski są zmapowane do poleceń wydawanych postaci niezależnej (Do przodu, W lewo, W prawo). Wybranie jednego z tych poleceń spowoduje dodanie go do listy u dołu ekranu.
Wykonaj: Przycisk wykonywania, który nakazuje postaci niezależnej wykonanie kolejki poleceń widocznej u dołu ekranu.
Usuń: Przycisk usuwania, za pomocą którego można usunąć ostatnie polecenie dodane do listy.
Reset: Przycisk resetowania, który powoduje zresetowanie bieżącej planszy i wyczyszczenie kolejki poleceń.
Lista poleceń: Dynamiczna lista poleceń, która wydłuża się, w miarę jak gracz dodaje polecenia, i kurczy, gdy gracz usuwa polecenia.
UI jest w całości zaimplementowany w języku Verse. Aby rozpocząć pracę z UI w Verse i zrozumieć zasady ich działania, zapoznaj się z tematem Tworzenie UI w grze.
Poniżej opisano, w jaki sposób utworzyć niestandardowe przyciski i dynamiczny UI wykorzystany w tej grze.
Tworzenie przycisków
Przyciski tworzy się w ich własnej klasie minigame_button, która obsługuje ich wygląd oraz decyduje o tym, kiedy zostaną aktywowane lub dezaktywowane. Zastosowaliśmy cichy przycisk, który nakłada tekst i ikonę na poziome pole stosu, a następnie tworzy nakładkę na tło. Pozwoliło to uzyskać efekt niestandardowego wyglądu przycisków przy jednoczesnym zachowaniu funkcjonalności i zdolności reagowania, jakie oferuje domyślny projekt przycisków w Fortnite.
Funkcja SetEnabled() określi interaktywność samego przycisku oraz będzie zmieniać tekstury i kolory, w zależności od tego, czy przycisk jest włączony czy nie.
# 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}
Dodawanie poleceń do ekranu
Każdy slot listy poleceń u dołu jest przechowywany w instancji klasy command_queue. Klasa ta decyduje o wyglądzie slotu oraz przechowuje wszelkie powiązane z nim dane polecenia.
Nawet jeśli na liście nie ma żadnych poleceń, zawsze zawiera ona dwa sloty wyznaczające lewy i prawy koniec wyświetlanej listy. Gdy gracz wybierze polecenie, prawy koniec zostanie zaktualizowany zgodnie z ikoną polecenia, a na prawym końcu dodany zostanie nowy slot. Reprezentacja danych polecenia zostanie wówczas zapisana w zmiennej CommandData.
Gdy gracz wybierze przycisk usunięcia, widżet z prawej strony zostanie usunięty z kanwy, a ostatnie polecenie zostanie zmodyfikowane w taki sposób, że znajdzie się w slocie na prawym końcu. Dla zmiennej CommandData ustawiona zostanie wartość false, ponieważ z tym slotem nie będzie już powiązane żadne polecenie.
# 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}
Zarządzanie całym UI
Większość kodu tego UI znajduje się w klasie verse_commander_minigame_ui. Klasa ta określa wygląd każdego przycisku oraz jego unikalny tekst i ikony, generuje układ UI i obsługuje zmiany zachodzące podczas dodawania lub usuwania poleceń.
Obrazy niestandardowe są teksturami uwidocznionymi dla Verse z UEFN. Poziom dostępu do tekstur zaimportowanych do projektu zdefiniowany jest w pliku submodules.verse. Szczegółowe informacje zawiera temat Uwidacznianie zasobów w UEFN dla Verse.
Ten kod wydaje się dłuższy niż kody w innych plikach ze względu na konieczność określenia położenia i wyglądu każdego widżetu w UI. Większość zachowania istnieje jedynie w tych trzech funkcjach: ResetCommandQueue(), Remove() i 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 }
Następny krok
Kompletny kod pozwalający utworzyć UI znajdziesz w ostatnim kroku 7. Efekt końcowy.
Teraz, gdy mamy już niestandardowy UI, kolejnym krokiem będzie nauka zarządzania grą oraz wszystkim elementami, które dotychczas utworzyliśmy.
