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

Nesta lição, você aprenderá como detectar interações do usuário com Elementos de UI no Cave Engine.

Veremos como identificar quando o cursor do mouse está pairando sobre um Elemento de UI e quando o elemento é clicado. Com esses eventos, você pode fazer sua interface responder ao jogador durante o jogo.

Essas interações são essenciais para criar botões, menus, telas de configurações, interfaces de inventário, menus de pausa, opções de diálogo e muitos outros sistemas de UI.

A partir desses eventos, você pode executar lógica em Python, criar comportamentos interativos, abrir menus, alterar elementos de UI, tocar sons, iniciar o jogo, fechar janelas ou acionar qualquer outra funcionalidade que sua interface precise.

1. Permitir Pairar

Para detectar quando o cursor do mouse está pairando sobre um Elemento de UI, selecione o Elemento de UI desejado e, na aba Comportamento, ative a opção Permitir Pairar.

Na Pré-visualização, você pode visualizar a aparência do Elemento de UI sem precisar executar o jogo.

Após ativar Permitir Pairar, mova o cursor do mouse sobre a área de pré-visualização para observar a mudança visual entre o estado normal e o estado de pairar.

Isso é muito útil enquanto desenvolve a interface, pois você pode testar rapidamente se o elemento está reagindo visualmente como esperado.

Por exemplo, você pode usar o estado de pairar para deixar um botão mais iluminado, mudar sua cor, aumentar sua opacidade ou dar ao jogador uma indicação clara de que o elemento pode ser interagido.

2. Permitir Clique

Ative a opção Permitir Clique para permitir que o Elemento de UI detecte quando o usuário clica nele.

Assim como com Permitir Pairar, o comportamento de Permitir Clique também pode ser testado diretamente na Pré-visualização.

Isso permite que você verifique como o elemento se parece quando pressionado, sem precisar executar o jogo constantemente apenas para testar pequenos ajustes visuais.

3. Executando Lógica

Para executar lógica a partir das interações da UI, clique no ícone de seta localizado no lado esquerdo das opções Permitir Pairar e Permitir Clique.

Aqui podemos usar os Callbacks.

Callbacks permitem que você acesse os eventos relacionados às interações do Elemento de UI, tornando possível adicionar comportamento personalizado quando o cursor entra no elemento, sai do elemento, clica nele ou solta o clique.

Para editar a lógica que será executada nesses eventos, clique no ícone de lápis.

Para testar os callbacks de Pairar, vamos adicionar uma simples mensagem de impressão em cada evento.

No Callback de On Hover In, que é executado assim que o cursor é detectado sobre o Elemento de UI, adicione uma mensagem de impressão para confirmar que a interação foi detectada.

Então, no Callback de On Hover Out, que é chamado quando o cursor sai do elemento, adicione outra mensagem de impressão para verificar quando esse evento de saída é detectado.

Dessa forma, podemos ver no Console exatamente quando o cursor entra e sai da área do Elemento de UI.

Agora execute o jogo e interaja com o Elemento de UI movendo o cursor do mouse sobre ele e, em seguida, afastando-o.

Observe o Console para verificar quando as mensagens de impressão são exibidas.

Esta é uma das maneiras mais simples de depurar a lógica de interações da UI, pois confirma que o evento está sendo chamado corretamente.

O ícone vermelho ao lado do Callback indica que não está vazio. Em outras palavras, há lógica ou script configurado para ser executado por aquele evento.

Esse indicador facilita muito a identificação visual de quais eventos já têm comportamento associado a eles.

À medida que sua interface cresce, isso se torna muito útil, pois você pode rapidamente ver quais Elementos de UI já têm lógica de interação configurada.

Agora vamos adicionar mensagens de impressão para verificar os eventos de clique do Elemento de UI.

No Callback de On Click In, adicione uma mensagem de impressão para identificar o momento em que o clique sobre o elemento é detectado.

Então, use o Callback de On Click Out para adicionar outra mensagem de impressão, permitindo que você verifique quando o clique é finalizado, ou seja, quando o botão do mouse é solto.

Essa distinção é importante porque alguns comportamentos da UI devem acontecer quando o botão é pressionado pela primeira vez, enquanto outros devem acontecer apenas quando o clique é liberado.

Por exemplo, você pode querer pressionar visualmente o botão em Click In, mas apenas confirmar a ação em Click Out.

Execute o jogo e observe o Console enquanto interage com o elemento.

Quando você pairar, clicar, soltar e mover o mouse para longe do Elemento de UI, os callbacks correspondentes devem ser executados e suas mensagens de impressão devem aparecer no Console.

Neste ponto, você já sabe como detectar as interações de UI mais básicas no Cave Engine.

Ao combinar Permitir Pairar, Permitir Clique e callbacks, você pode começar a criar interfaces interativas reais, como botões que abrem menus, deslizadores de configurações, janelas de confirmação, menus de pausa e qualquer outro comportamento de UI que seu jogo precise.