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

Nesta lição, você aprenderá a personalizar a aparência visual dos Elementos de UI no Cave Engine.

Veremos como modificar propriedades de estilo, como cores, transparência, imagens, desfoque, e também como criar novos Estilos de UI para o seu projeto.

Os Estilos de UI são úteis porque permitem reutilizar a mesma configuração visual em vários Elementos de UI. Isso facilita a manutenção de sua interface consistente e organizada.

1. Estilo de UI

Por padrão, quando você cria um Elemento de UI Padrão no Cave Engine, ele já vem com um Estilo de UI atribuído a ele.

Esse estilo é chamado de Estilo Padrão.

Esse estilo é responsável por definir a aparência inicial do Elemento de UI.

Você pode encontrá-lo dentro da pasta Interface no Content Browser.

Isso significa que qualquer alteração feita ao Estilo Padrão afetará automaticamente todos os Elementos de UI que estão usando esse estilo por meio da propriedade Style Override.

Por conta disso, é uma boa prática manter o Estilo Padrão como o estilo de interface padrão do Cave Engine e criar um novo Estilo de UI para personalizações de seu próprio projeto.

Dessa forma, você pode modificar a aparência de seus Elementos de UI sem alterar acidentalmente cada elemento que ainda utiliza o estilo padrão.

Selecione o Elemento de UI e, na propriedade Style Override, substitua o Estilo Padrão pelo novo Estilo de UI que acabamos de criar.

Agora este Elemento de UI usará seu estilo personalizado em vez do padrão.

Para editar o estilo, clique no ícone de lápis ao lado do campo Estilo de UI.

Você também pode selecionar o arquivo de estilo diretamente no Content Browser para abrir o editor de estilo.

2. Personalização

Dentro do editor de Estilo de UI, você pode personalizar as propriedades visuais do elemento.

A opção 9-Slice Scaling permite redimensionar um Elemento de UI sem distorcer suas bordas e cantos.

Quando ativada, o elemento é dividido em nove regiões. Os quatro cantos mantêm sempre o mesmo tamanho, as bordas são esticadas apenas em uma direção, e apenas a região central pode ser redimensionada livremente.

Isso é muito útil para criar painéis, janelas, caixas de diálogo, botões e outros elementos de interface que precisam suportar diferentes tamanhos enquanto preservam sua qualidade visual.

Sem o 9-Slice Scaling, redimensionar um botão ou painel pode esticar toda a imagem e distorcer os cantos. Com o 9-Slice Scaling, o elemento pode aumentar ou diminuir de tamanho enquanto mantém as bordas limpas.

• Na opção Imagem, você pode carregar uma textura do seu computador para ser usada como a aparência visual do Elemento de UI.

• Tint permite que você mude a cor aplicada ao Elemento de UI. Funciona como uma sobreposição de cor sobre a imagem utilizada pelo elemento, permitindo que você modifique sua aparência sem editar a textura original.

• Alpha controla o nível de transparência do Elemento de UI. Valores mais altos tornam o elemento mais opaco, enquanto valores mais baixos o tornam mais transparente.

• Blur aplica um efeito de desfoque ao fundo atrás do Elemento de UI. Isso pode ser útil para menus, popups, telas de pausa, janelas de diálogo e painéis que precisam se destacar da cena do jogo.

As mesmas configurações também podem ser aplicadas aos estados Hover e Click do Elemento de UI.

Isso significa que você pode definir uma imagem específica, cor, transparência e valor de desfoque para cada estado de interação.

Por exemplo, um botão pode ter uma cor quando está ocioso, tornar-se mais brilhante quando o mouse estiver sobre ele e mudar novamente quando for clicado.

Isso dá ao jogador um feedback visual claro e torna a interface mais responsiva e polida.

Neste ponto, você agora entende como os Estilos de UI controlam a aparência dos Elementos de UI no Cave Engine.

Ao criar seus próprios estilos em vez de editar diretamente o Estilo Padrão, você pode manter seu projeto organizado, reutilizar configurações visuais e construir interfaces com uma aparência consistente em menus, botões, painéis e elementos HUD.