Cave: Sistema de Interface do Usuário (UI) do Jogo

Nesta lição, você aprenderá como usar texto no sistema de interface da Cave Engine.

O texto é uma das partes mais importantes de qualquer UI. Ele é usado para rótulos de botões, títulos de menu, subtítulos, instruções, valores de HUD, contadores de itens, caixas de diálogo, rótulos de configurações e muitos outros elementos da interface.

Veremos como criar elementos de texto, configurar sua aparência e ajustar propriedades como fonte, tamanho, cor, espaçamento, alinhamento e ancoragem.

1. Preparando o Lugar para o Texto

Antes de adicionar os elementos de texto, vamos preparar a estrutura da interface onde eles serão exibidos.

Neste exemplo, criaremos um simples menu principal para um jogo, contendo três botões:

• Iniciar Jogo
• Opções
• Sair

Para isso, crie um novo Elemento UI, que será usado como o elemento pai e servirá como o fundo para o menu.

Então, duplique um dos botões criados anteriormente até ter três botões, e faça com que todos eles sejam filhos deste Elemento UI.

Isso mantém os botões organizados dentro de uma única hierarquia, facilitando o posicionamento, edição e futuras alterações na interface.

2. Adicionando Texto

Agora crie um Elemento UI do tipo Texto e faça dele um filho do botão Iniciar.

Então ajuste a escala do elemento de texto até que ele tenha um bom tamanho para a interface.

Como o texto é um filho do botão, ele seguirá automaticamente a posição do botão. Isso facilita a organização da interface e ajuda a manter o rótulo alinhado corretamente com o botão.

Repita o mesmo processo para os outros botões do menu.

Crie um Elemento UI Texto para o botão Opções e outro para o botão Sair, tornando cada elemento de texto filho de seu respectivo botão.

Dessa forma, cada botão tem seu próprio rótulo, e todo o menu permanece organizado através da hierarquia pai-filho.

3. Configurações do Texto

Selecione o Elemento UI de texto que criamos para o botão Iniciar.

Na aba Texto, você encontrará todas as propriedades responsáveis por configurar o conteúdo do texto e sua aparência visual.

A propriedade Conteúdo define o texto que será exibido pelo Elemento UI.

Basta digitar o conteúdo desejado neste campo e ele será mostrado na interface.

Neste exemplo, usaremos o texto Iniciar Jogo para identificar o botão que inicia o jogo.

• Fonte

A propriedade Fonte permite selecionar uma fonte e alterar a aparência do texto.

Você pode carregar uma fonte compatível e usá-la diretamente no Elemento UI, facilitando a correspondência da tipografia da identidade visual do seu jogo.

• Cor

A propriedade Cor permite alterar a cor do texto.

Isso é útil para adaptar o texto ao estilo da interface, melhorando a legibilidade ou criando contraste visual com o fundo.

• Escala

A propriedade Escala controla a escala geral do texto, aumentando ou reduzindo seu tamanho.

Use isso para tornar o texto mais legível ou para melhor se ajustar ao tamanho do botão, painel ou área da interface onde ele está colocado.

• Escala Horizontal

A propriedade Escala Horizontal ajusta apenas a escala horizontal do texto.

Isso permite que você torne o texto mais estreito ou mais largo sem alterar sua altura.

• Espaçamento

A propriedade Espaçamento controla o espaço entre os caracteres.

Você pode usá-la para aproximar as letras ou afastá-las, melhorando a legibilidade ou criando um estilo visual específico.

• Altura da Linha

A propriedade Altura da Linha define o espaço entre linhas de texto.

Isso é usado quando o conteúdo tem duas ou mais linhas, como descrições, texto de diálogo, instruções ou mensagens de interface mais longas.

• Alinhamento do Texto

A propriedade Alinhamento do Texto define como as linhas de texto estão alinhadas dentro do elemento.

Isso é especialmente útil quando o texto tem várias linhas, permitindo que você as alinhe à esquerda, ao centro ou à direita.

• Ancoragem do Texto

A propriedade Ancoragem do Texto define a ancoragem do texto dentro do Elemento UI.

Ela determina qual ponto é usado como referência para o alinhamento do texto. Com essa opção, você pode posicionar o texto no centro, nos cantos ou nas laterais do Elemento UI, dependendo do que sua interface precisa.

4. Personalizando o Texto

Agora edite os elementos de texto da maneira que melhor se encaixar no seu projeto.

Use as propriedades apresentadas anteriormente para configurar a fonte, cor, escala, espaçamento de caracteres, altura da linha, alinhamento e ancoragem.

Com essas opções, você pode criar diferentes estilos de texto e adaptar a interface à identidade visual do seu jogo.

Por exemplo, os botões do menu podem usar uma fonte grande e legível, enquanto descrições e rótulos secundários podem usar texto menor com cores mais suaves.

Com tudo que você aprendeu nesta Missão, você agora tem a base necessária para criar interfaces completas na Cave Engine.

Você pode editar livremente Elementos UI, personalizar texto, criar e modificar Estilos de UI, organizar a hierarquia da UI, configurar ancoragem e usar Callbacks para executar lógica personalizada.

Como exercício, você pode substituir as mensagens de impressão criadas durante as lições anteriores por ações reais do seu projeto.

Por exemplo, você pode fazer com que os botões do menu realmente iniciem o jogo, abram o menu de opções ou fechem o aplicativo.

A estrutura agora está pronta para você continuar explorando o sistema de UI e desenvolver interfaces mais completas, polidas e interativas.