Canvas Responsivo na Unity 3D

A engine contém diversas ferramentas e recursos para ajustes de tela e ancoragem de Game Objects.

Você começa a criar o seu jogo, fica super empolgado com os desenhos recebidos por um Designer amigo seu, monta tudo bonitinho e funcionando perfeitamente, mas quando envia para outras pessoas testares, se assusta, o layout dos elementos UI não está igual a da sua maquina.

Quem nunca passou pela situação mostrada acima? E olha que hoje nem é sexta-feira 13 hein, para trazer esse tipo de conto de terror.

Felizmente temos jogadores em diversas telas com diferentes resoluções, seja um monitor antigo de 800x600 ou um gamer ultrawide de 2560x1080, mas independente do tipo de resolução, sua interface precisa se adaptar a todas elas.

Preparamos um vídeo bem prático ensinando os principais pontos para deixar seu layout responsivo, organizado e mais dinâmico.

Ancoragem de elementos no Canvas da Unity 3D

Precisamos entender duas coisas inicialmente, um Game Object de UI pode ser ajustado a partir do seu ponto pivô central ou distribuído pelo seu conteúdo.

No componente Rect Transform, temos uma grade alinhamentos, o estado padrão faz a distribuição levando em consideração o Pivô do objeto.

Agora se você quer ajustar seus elementos a partir do seu conteúdo (massa, largura e altura), então segure a tecla Shift Esquerdo, enquanto clica e mantém a janela de grades aberta. Nessa nova grade, você terá a sua disposição a distribuição e ancoramento a partir de cada ponto do seu componente UI, como a borda esquerda, por exemplo.

Layout Group no Canvas da Unity 3D

No vídeo citado acima, vemos mais a fundo os componentes de Layout Group, porém vamos ver uma explicação extra.

Existem componentes que fazem diferentes ajustes em elementos, como o Horizontal Layout Group e o Vertical Layout Group. Cada um deles fazem a distribuição dos filhos conforme os parâmetros e o tipo especificado.

  • Vertical Layout Group  - Distribui os elementos verticalmente;
  • Horizontal LAyout Group - Distribui os elementos horizontalmente.

Por hora é isso, em caso de dúvidas, deixe nos comentários.