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

Sempre, ao adicionarmos um dos novos elementos de interface gráfica do Unity, criamos também, na cena, um Canvas e um EventSystem. Esses componentes são alternativas encontradas pelo Unity para facilitar o gerenciamento dos elementos de UI adicionados e de todos os eventos que são relacionados a tais elementos e podem surgir em seu ciclo de vida. Conheceremos melhor esses componentes auxiliares e entenderemos o motivo de essa solução ter sido escolhida.

2.1 O Elemento Canvas

O elemento Canvas é um GameObject criado automaticamente pelo Unity para guardar elementos de UI. Ele também pode ser criado manualmente pelo usuário, uma vez que uma cena pode possuir mais de um Canvas. Sendo assim, fica a critério do usuário escolher a utilização e posição de novos componentes desse tipo.

O elemento Canvas contém, desde sua criação, quatro componentes especiais: o Rect Transform, que substitui o transform; o componente Canvas, que contém algumas propriedades relacionadas ao próprio Canvas; o Canvas Scaler (script), que é um script gerenciador da escala do Canvas em relação à tela; e o Graphic Raycaster (script), que é um componente no qual há um script gerenciador de todos os raycasts necessários para a utilização de uma interface gráfica. Veja esses componentes na Figura 2.

O primeiro componente visto ao selecionarmos o objeto Canvas é o componente Rect Transform. A fim de adaptar as possibilidades para algo mais específico do próprio Canvas e dos elementos de UI em geral, esse componente substitui o Transform clássico que temos em todos os objetos do Unity. Ainda possuímos escala e rotação, como vocês podem ver nas duas últimas linhas do componente, mas a propriedade referente à posição foi bem alterada. Detalharemos o Rect Transform a seguir, em sua própria seção.

O segundo componente visto é o componente Canvas. Ele apresenta as propriedades do próprio Canvas e sua configuração é primordial para que a nossa interface com o usuário seja exibida adequadamente, posicionada da maneira desejada.

A primeira propriedade do elemento, a Render Mode, indica qual será o espaço de coordenadas que utilizaremos para renderizar os objetos do Canvas. O primeiro deles, mais utilizado dentre todos, é o Screen Space – Overlay. Quando estamos utilizando esse modo para definir a nossa UI, ela é posicionada à frente de todos os elementos da cena, diretamente no espaço da tela de coordenadas, como uma camada de overlay. Ou seja, desenhamos todo o jogo e, em seguida, os elementos da UI.

Como geralmente as interfaces com os usuários se posicionam à frente de todo o jogo, o mais comum para elas é utilizar o valor Screen Space – Overlay para essa propriedade, a fim de poder exibir informações ao usuário sem que qualquer parte dela seja bloqueada por elementos do jogo. Esse modo traz mais três propriedades a serem configuradas. A primeira delas, Pixel Perfect, indica se os elementos de UI contidos nessa camada devem tentar se adequar, em perfeição de pixels, à tela. Isso pode criar uma visualização mais bem definida de sua UI como um todo. Em seguida, temos a propriedade Sort Order, que indica, como para os sprites, a ordem de desenho daquele Canvas em relação aos outros. Por fim, a propriedade Target Display indica, em setups de múltiplos monitores, em qual das telas disponíveis o Canvas deve desenhar os seus elementos.

A segunda opção de Render Mode para o Canvas é a opção Screen Space – Camera, vista na Figura 3. Nesse modo, o Canvas será desenhado baseado em uma câmera e se posicionará sempre à frente para ela. Caso não escolhamos nenhuma câmera, ele será considerado em modo Screen Space – Overlay e funcionará exatamente como vimos anteriormente. Caso uma câmera seja selecionada, ele se adequará e será desenhado na renderização específica dela.

O último Render Mode possível para o componente Canvas é o modo World Space, visto na Figura 4. Nesse modo, saímos do espaço de coordenadas da tela e passamos ao espaço de coordenadas do mundo. Ou seja, nosso Canvas agora não mais é renderizado por último, diretamente na tela ou por cima da câmera. Agora, ele passa a ser renderizado no mundo, como um objeto qualquer, podendo ser sobreposto ou mesmo sofrer alterações durante a cena. Você consegue imaginar algum lugar em que podemos utilizar esse tipo de Canvas? Direto na cena?

Não? Vejamos uma ideia, na Figura 5.