Interface

A interface é o que fica por cima do jogo: o placar, a barra de vida, o menu, a tela de pausa, a loja. Cada interface é um recurso (nome.ui.json) montado numa aba própria. O editor cuida da aparência; o que cada botão faz e o que cada texto mostra é decidido no código.

Criar uma interface

Em Recursos, clique em + e escolha Nova interface…. A aba que abre tem a lista de elementos à esquerda e a tela do jogo no meio, do tamanho da resolução do projeto. O que aparece ali é desenhado pelo mesmo código do jogo.

Os elementos

Clique em + Elemento e escolha um:

• Painel: uma caixa com cor de fundo, borda ou sprite. Pode ter outros elementos dentro.
• Texto: uma linha (ou várias) de texto.
• Imagem: um sprite.
• Botão: uma caixa com texto que responde ao mouse e ao teclado.
• Barra: enche de 0 a 1 (vida, energia, carregamento).

Com um Painel selecionado, o elemento novo nasce dentro dele.

Montar com o mouse

• Clique seleciona; arraste move; as alças amarelas redimensionam.
• As bordas e o meio do elemento grudam nos do painel e dos vizinhos, com uma guia laranja. Segure Alt para mover livre.
• As setas movem 1 pixel (com Shift, 8).
• Ctrl+C, Ctrl+X, Ctrl+V e Ctrl+D copiam, recortam, colam e duplicam. Delete exclui. Ctrl+Z desfaz.
• Na lista, arraste um elemento para mudar a ordem (o de cima fica na frente) ou solte em cima de um Painel para pôr dentro dele. O botão direito tem Renomear.

O Inspetor

Com um elemento selecionado, o Inspetor mostra:

• Âncora: a que ponto da tela (ou do painel) o elemento fica preso. Um placar ancorado no canto de cima à direita continua lá em qualquer resolução.
• Posição e Tamanho, em pixels do jogo. Visível desmarcado faz o elemento começar escondido.
• Aparência: Fundo e Borda (cores com transparência), Espessura e Sprite. Com Borda fixa maior que 0, o sprite é cortado em 9 fatias: os cantos ficam do tamanho certo e só o meio estica. É assim que se faz uma moldura.
• Texto: o texto, a Cor, a Fonte, o Tamanho em pixels, o alinhamento e Quebrar linha.
• Botão: Ativo e as cores com o Mouse em cima e Apertado.
• Barra: o Valor inicial e a cor da parte cheia.

Fontes

Sem escolher nada, o texto usa a fonte de pixels da Brasa, nos tamanhos 8, 16, 24… Para usar outra, clique em + › Importar fonte (TTF)… em Recursos e escolha a fonte em Fonte. O texto com fonte importada é desenhado na resolução da janela: fica nítido mesmo num jogo de pixel art ampliado.

Listas

Um Painel pode arrumar sozinho o que está dentro dele. Em Organizar filhos, escolha Coluna, Linha ou Grade e ajuste o Espaço e a Margem. Os elementos de dentro ficam um depois do outro, na ordem da lista.

É a base de uma loja ou de um inventário: monte um item dentro do painel, desmarque Visível nele e deixe o código copiá-lo. Veja Loja com lista de itens.

Mostrar a interface no jogo

• Pela room. No Inspetor da room, a seção Interfaces marca as que abrem junto com ela (o HUD nas fases, o menu na room do menu).
• Pelo código. Ui::show("Pausa") e Ui::hide("Pausa").

Veja HUD e menu de pausa e a referência da Interface.