2. Elementos de Interface com o Usuário no Unity

2.1 O Elemento Canvas

Pronto! Podemos utilizar o Canvas no espaço do mundo, a fim de diálogos serem criados para personagens, ou mesmo elementos de interface, como o quadrado posicionado ao redor do inimigo, visto na Figura 5, serem colocados diretamente no mundo e acompanharem o personagem (ou não, depende de sua escolha).

Perceba que esse Render Mode tem também três propriedades. A primeira, Event Camera, indica qual será a câmera utilizada como geradora de eventos para aquele Canvas. Somente toques, cliques, etc. realizados a partir da visão da câmera selecionada, serão possíveis de serem detectados. É comum utilizar a própria Main Camera nesse componente, mas é possível trabalhar outras também, de acordo com a necessidade do seu jogo. As outras duas propriedades já foram estudadas por nós – Sorting Layer e Order in Layer indicam a ordem de renderização dos elementos desse Canvas em relação aos outros elementos do mundo, uma vez que agora eles se misturam. Você percebe a fala do personagem, na Figura 5, sobrepondo até mesmo a barra azul de mana do personagem? Pois é! Isso pode ser feito apenas alterando a ordem de desenho daquele Canvas específico.

Além do componente Canvas, que contém os três modos citados anteriormente e suas especificidades, temos também o script Canvas Scaler como um dos objetos padrão do Canvas. Esse script é responsável por controlar as alterações de tamanho no Canvas, visto que é comum o jogo sofrer alterações de tamanho de tela, se executado em computadores ou dispositivos móveis. A ideia de saber exatamente as especificações de destino funciona apenas para consoles!

Não precisamos detalhar muito esse componente, pois sua configuração inicial já é, usualmente, boa o bastante. Perceba, no entanto, que ele só funciona para quando o espaço do Canvas é a tela. Quando o Canvas passa a ser parte do mundo, ele é tratado como tal e não necessita de uma nova escala à medida que suas propriedades sejam alteradas.

Caso o Canvas esteja configurado para a tela, teremos três opções de escala para a UI. A primeira, Constant Pixel Size, mantém o tamanho, em pixels, constante. Com isso, à medida que a tela varia, o menu continua ocupando a mesma quantidade de pixels. Isso o fará variar de tamanho. Na segunda, Scale with Screen Size, a UI será definida a partir de uma resolução de referência e, então, se adaptará a novas resoluções de acordo com a base. Por fim, na Constant Physical Size, a UI terá um tamanho físico constante, variando de acordo com o dpi (dots per inch, ou pontos por polegada) da tela a fim de manter-se nesse tamanho, mesmo com variação de tela e resolução. Entenda bem essas três propriedades, para saber escolher qual delas utilizar ao desenvolver os seus menus.

Há alguns anos, era necessário, quando desejávamos adicionar um componente de interface ao nosso jogo, criar tudo manualmente, mesmo que utilizássemos o Unity . Os objetos em si deveriam ser posicionados de acordo com a câmera, para poderem aparecer em sua cena. Já os eventos, como cliques e toques, precisavam ser implementados individualmente, utilizando técnicas de raycasting para saber exatamente onde o toque aconteceu e se algum dos elementos de UI foi ativado.

Lembra de comentarmos, na aula em que apresentamos a câmera, sobre os sistemas de coordenadas e a importância das mudanças entre eles para podermos implementar a UI? Pois é! Era exatamente assim que acontecia. Recebíamos um clique no espaço da tela, convertíamos esse clique para o espaço do mundo, jogávamos um raio com a técnica de raycasting, a qual é o equivalente 3D da técnica de Line Casting estudada em aulas anteriores, para só depois, a partir das colisões detectadas pelo raycasting, saber qual elemento foi clicado e, então, ativar, manualmente também, um script dele. Para evitar tudo isso, cada Canvas agora tem o seu próprio script de detecção de raycasting. Esse é o componente Graphic Raycaster.

E a utilização do resultado desse raycasting automático? Como fazemos? Bem, isso passa a ser responsabilidade do EventSystem, componente, estudado a seguir, que também é criado automaticamente quando adicionamos um elemento de UI à cena.