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

Nesta lição, você aprenderá a usar o sistema de ancoragem UI do Cave Engine.

Ancoragem permite que você defina o ponto de referência usado pelos Elementos de UI na tela. Isso é muito importante ao criar interfaces que precisam se adaptar corretamente a diferentes resoluções, tamanhos de janela e proporções de tela.

Ao final desta lição, você entenderá como posicionar os Elementos de UI de forma consistente, garantindo que eles fiquem onde você espera, independentemente do tamanho da tela.

1. Criando um Novo Elemento de UI

Crie um novo Elemento de UI Padrão.

Após adicioná-lo à cena, selecione-o e olhe para o painel de Propriedades.

Lá, você encontrará as configurações responsáveis pela posição, escala, aparência e ancoragem do elemento. Nesta lição, usaremos essas propriedades para entender como o sistema de ancoragem funciona e como afeta o comportamento da interface.

2. Posição

Por padrão, a posição dos Elementos de UI no Cave Engine é definida em valores percentuais.

Isso ajuda você a criar interfaces que se adaptam melhor a diferentes resoluções de tela.

Inicialmente, o Elemento de UI está ancorado ao centro da tela. Por causa disso, quando os valores de posição são definidos como 0, o elemento aparece exatamente no centro da interface.

3. Escala

Assim como a posição, a escala dos Elementos de UI no Cave Engine também é definida em valores percentuais por padrão.

Mudando os valores de escala, você pode aumentar ou diminuir o tamanho do Elemento de UI diretamente na tela.

Isso facilita o ajuste das dimensões da interface enquanto a mantém responsiva.

4. Valores Percentuais e em Pixels Absolutos

Como vimos anteriormente, por padrão, a posição e a escala dos Elementos de UI no Cave Engine são definidas usando porcentagens.

Na maioria dos casos, esse é o comportamento recomendado, pois ajuda a interface a manter sua posição e tamanho consistentes, independentemente da resolução ou tamanho do monitor.

Neste exemplo, definimos a escala do Elemento de UI como 10% nos eixos X e Y. Também definimos a posição como 25% no eixo X, que corresponde ao eixo horizontal.

Com essa configuração, o elemento é movido 25% para a direita em relação ao seu ponto de ancoragem.

Como os valores estão definidos em porcentagem, esse posicionamento será preservado independentemente da resolução ou tamanho do monitor, mantendo a interface consistente em diferentes dispositivos.

Além de valores percentuais, o Cave Engine também permite que você use valores absolutos em pixels.

Esse modo é útil quando você precisa que um Elemento de UI tenha um tamanho fixo ou uma posição fixa.

Para mudar o tipo de unidade, clique no ícone de cadeado ao lado do eixo de Posição ou Escala que você deseja modificar.

Quando você faz isso, o valor alternará entre porcentagem (%) e pixels absolutos (px), permitindo que você escolha a unidade mais apropriada para cada situação.

Ao usar um valor absoluto em pixels, o Elemento de UI não se adaptará mais proporcionalmente à resolução da tela.

Isso significa que, não importa se o jogo está rodando em um monitor de baixa ou alta resolução, o valor em pixels será aplicado exatamente como configurado.

O mesmo comportamento se aplica ao eixo Y da posição e aos eixos X e Y da escala.

Esse modo é recomendado quando você precisa que um elemento mantenha um tamanho ou posição fixos, sem considerar a largura e a altura da tela ou do seu Elemento de UI pai.

Por exemplo, você pode querer que um ícone tenha sempre exatamente 64 pixels de largura ou que uma pequena margem esteja sempre exatamente 20 pixels da borda.

5. Ancoragem da Posição

O ícone de ancla disponível nas propriedades de Posição e Escala indica o ponto de ancoragem do Elemento de UI.

Ao clicar no ícone de ancla da Posição, a janela Ponto de Ancoragem será exibida. Lá, você poderá ver o ponto de ancoragem atual do elemento.

Por padrão, novos Elementos de UI são ancorados ao centro da tela, representado pelo círculo azul na janela de configuração.

Esse ponto de ancoragem funciona como a referência para posicionar o elemento na interface. A partir desse ponto, os valores de posição serão aplicados de acordo com a âncora selecionada.

Imagine que você deseja criar um minimapa, que geralmente é colocado no canto inferior esquerdo da tela.

Nesse caso, manter o elemento ancorado ao centro não faz muito sentido, pois sua posição seria calculada a partir do ponto central da tela.

Para esse tipo de interface, basta mudar o Ponto de Ancoragem para o canto inferior desejado.

Isso faz com que o elemento use aquela região da tela como sua referência, facilitando o posicionamento e garantindo que ele permaneça no lugar correto, independentemente da resolução utilizada.

Quando os valores de Posição estão definidos como 0, usando porcentagem (%) ou pixels absolutos (px), o Elemento de UI será posicionado exatamente sobre seu ponto de ancoragem.

Em outras palavras, o Ponto de Ancoragem se torna a referência para a posição do elemento.

A partir desse ponto, você só precisa ajustar os valores de posição para mover o elemento na direção desejada.

6. Ancoragem da Escala

Agora vamos entender como funciona a ancoragem da escala.

Para isso, mude o ponto de ancoragem do Elemento de UI de volta para o centro da tela e defina os valores de Posição como 0, fazendo o elemento retornar exatamente para o centro.

Com o elemento centralizado, fica mais fácil ver como a ancoragem afeta o comportamento da escala e entender a partir de qual ponto o Elemento de UI será redimensionado.

Quando o ponto de ancoragem da escala está definido no centro, aumentar ou diminuir a escala do elemento afetará ambos os lados igualmente. O elemento crescerá ou encolherá para a esquerda e para a direita ao mesmo tempo.

No entanto, em algumas situações, esse não é o comportamento desejado.

Imagine, por exemplo, uma barra de vida ou uma barra de progresso. Nesse caso, geralmente você quer que o elemento cresça ou encolha em apenas uma direção.

Para conseguir isso, mude o ponto de ancoragem da escala para o lado desejado.

Quando você faz isso, um pequeno cursor será exibido, indicando o ponto a partir do qual a escala será aplicada.

Agora, quando você aumentar ou reduzir a escala, o elemento crescerá apenas na direção oposta ao ponto de ancoragem. Isso facilita muito a criação de barras e outros elementos de UI dinâmicos.

7. Ajustando a Âncora e a Escala

Agora que entendemos como o ponto de ancoragem da escala afeta o comportamento de redimensionamento do elemento, podemos configurar a interface da melhor maneira para nosso projeto.

Retorne a ancoragem de posição para o canto inferior esquerdo da tela ou escolha qualquer outra posição que faça mais sentido para a interface que você está criando.

Você pode fazer o mesmo com a âncora de escala, definindo o ponto a partir do qual o elemento será redimensionado.

Neste exemplo, usaremos valores absolutos em pixels para o eixo X da posição e para o eixo X da escala, enquanto mantemos valores percentuais para o eixo Y.

Essa configuração permite que o elemento mantenha uma proporção quadrada, independentemente das dimensões da tela, enquanto ainda preserva um comportamento responsivo no eixo vertical.

Neste ponto, você deve ter uma boa compreensão de como a ancoragem de UI funciona no Cave Engine.

Âncoras são uma das partes mais importantes da criação de interfaces, pois definem como os Elementos de UI se comportam quando o tamanho da tela muda.

Combinando âncoras de posição, âncoras de escala, valores percentuais e valores em pixels, você pode criar interfaces que são ao mesmo tempo precisas e responsivas.