# O minijogo Comandante Verse tem a seguinte IU:
Comandos de personagem: estes botões são mapeados a comandos do PNJ ("Forward", "Turn Left", "Turn Right"). Selecionar um desse comandos o adiciona à lista na parte de inferior da tela.
Executar: um botão "Execute" que orienta o PNJ a executar a fila de comandos na parte inferior da tela.
Remover: um botão "Remove" que remove o último comando adicionado à lista.
Redefinir: um botão "Reset" que restaura o tabuleiro atual e limpa a fila de comandos.
Lista de comandos: uma lista dinâmica de comandos que aumenta quando o jogador adiciona comandos e diminui quando comandos são removidos.
A IU é implementada em Verse. Confira Como criar interfaces de usuário no jogo para dar os primeiros passos com a interface de usuário em Verse e entender como esse processo funciona.
As seções abaixo descrevem como criar os botões personalizados e a IU dinâmica utilizada neste jogo.
Como criar botões
Os botões são criados na própria classe, minigame_button, que trata da aparência deles quando são ativados ou desativados. Foi usado um botão silencioso que sobrepõe uma stackbox horizontal com o texto e o ícone, que, por sua vez, sobrepõem o plano de fundo. Assim, é criado o efeito de um visual personalizado para os botões mantendo a funcionalidade e a responsabilidade obtidas com o design de botão padrão no Fortnite.
A função SetEnabled() definirá a interatividade do botão e trocará as texturas e cores que serão usadas dependendo de o botão estar sendo habilitado ou não.
# 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}
Como adicionar comandos à tela
Cada espaço para a lista de comandos que está na parte inferior é armazenada em uma instância da classe command_queue. Esta classe trata do visual de cada espaço e armazena os comandos de dados associados a ele.
Sempre há dois espaços, mesmo quando não há nenhum comando da lista, para representar as extremidades direita e esquerda da exibição de lista. Quando o novo comando for selecionado pelo jogador, a extremidade direita será atualizado com o ícone de comando e um novo espaço de extremidade direita é adicionado. A representação dos dados de comando será adicionada na variável CommandData.
Quando o jogador selecionar o botão de remover, o widget da extremidade direita será removido da tela e o último comando será alterado para ser o espaço da extremidade direita. A variável CommandData é definida como "false", pois não haverá mais nenhum comando associado a esse espaço.
# 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}
Como gerenciar a interface de usuário geral
A maior parte do código da interface de usuário está na classe verse_commander_minigame_ui. Esta classe define o visual para cada botão e seu ícones e texto único, gera o layout da IU e trata das alterações quando os comandos são adicionados ou removidos.
As imagens personalizadas são texturas que foram expostas em Verse a partir do UEFN. O nível de acesso para texturas importadas para o projeto é definido no arquivo submodules.verse. Para obter mais detalhes, confira Como expor ativos em Verse.
Este código parece maior do que alguns outros arquivos por causa da necessidade de especificar a posição e o visual de cada widget na IU. A maior parte do comportamento existe apenas nas três funções 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 }
Próxima etapa
Confira a lista completa de códigos para criar a interface de usuário na etapa final 7. Resultado final.
Agora que temos uma IU personalizada, a próxima etapa mostrará como gerenciar o jogo e todas as peças já criadas.
