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

Nesta lição, vamos aprender como funciona o sistema de pai-filho de entidades do Cave Engine.

Esse recurso pode ser utilizado com qualquer tipo de Entidade na cena, permitindo criar hierarquias organizadas entre os objetos.

Ao criar interfaces de usuário, isso se torna especialmente útil. Ao definir um Elemento de UI como pai de outros Elementos de UI, transformações como posição, escala e visibilidade são automaticamente propagadas para os elementos filhos.

Isso torna a organização da interface muito mais fácil, simplifica a edição de menus e painéis e torna o gerenciamento de estruturas de UI mais complexas muito mais eficiente.

1. Criando Elementos do Kit de Ferramentas de UI

Além do Elemento de UI Padrão criado anteriormente, adicione três elementos de interface usando o Kit de Ferramentas de UI:

• Deslizante de Entrada
• Número de Entrada
• Texto de Entrada

Vamos testar na prática como cada um desses elementos se comporta durante o jogo.

Em seguida, usaremos esses componentes para criar uma hierarquia de entidade, tornando-os filhos do Elemento de UI Padrão, demonstrando como o sistema pai-filho ajuda a organizar a interface.

2. Testando os Elementos do Kit de Ferramentas de UI

Antes de testar os elementos criados com o Kit de Ferramentas de UI, se você estiver usando o template de jogo em terceira pessoa do Cave Engine, desative o Jogador e o Veículo na cena.

Isso é importante porque uma dessas entidades pode assumir o controle do cursor do mouse enquanto o jogo está em execução.

Com o cursor livre, você poderá interagir corretamente com os elementos da interface, como o Deslizante de Entrada, Número de Entrada e Texto de Entrada, permitindo testá-los sem interferências.

Execute o jogo pressionando F5.

Durante a execução, você poderá interagir com os elementos criados.

O Deslizante de Entrada e o Número de Entrada permitem que você modifique seus valores por meio da interação com o mouse, enquanto o Texto de Entrada permite que você digite texto diretamente na interface.

Esse é um bom momento para testar cada um e entender na prática para que são usados.

Por exemplo:

• o Deslizante de Entrada é ótimo para configurações como volume ou brilho
• o Número de Entrada é útil para valores numéricos precisos
• o Texto de Entrada é útil quando o jogador precisa digitar informações

3. Hierarquia

Agora vamos ver como a hierarquia funciona entre os Elementos de UI.

Selecione o Elemento de UI Padrão e, no painel de propriedades, ajuste seus valores de Escala.

Ao mudar esses valores, você pode aumentar ou diminuir o tamanho do elemento.

Para criar a relação pai-filho entre as Entidades, clique e arraste o Elemento de UI que você deseja transformar em filho e solte-o sobre o Elemento de UI Padrão, que se tornará a Entidade pai.

Esse é o mesmo conceito de hierarquia usado em todo o motor: o filho fica preso ao pai e começa a segui-lo.

Após criar essa relação pai-filho, o elemento filho seguirá automaticamente as transformações do elemento pai.

Isso significa que alterações como posição, escala e visibilidade aplicadas ao Elemento de UI Padrão também afetarão todos os seus elementos filhos.

Isso é extremamente útil ao construir menus e painéis de interface.

Por exemplo, se você criar um painel de menu como pai e colocar vários botões, textos e campos de entrada como filhos, poderá mover ou redimensionar todo o menu editando apenas o elemento pai.

Ao invés de ajustar cada elemento da interface um por um, você pode organizá-los em grupos, tornando toda a UI muito mais fácil de editar e manter.

Neste ponto, você aprendeu não só como criar e testar elementos do Kit de Ferramentas de UI, mas também como organizá-los usando hierarquia.

Este é um dos conceitos mais importantes ao construir interfaces maiores no Cave Engine, pois ajuda a manter sua UI mais limpa, modular e muito mais fácil de gerenciar.