Otimizações para Canvas da Unity

Especialmente para jogos de celular, é preciso ter alguns cuidados com o Canvas.

Assim como qualquer elemento gráfico no projeto, cada imagem ou texto na HUD exige processamento, gerando chamadas de renderização (Draw Calls). Além disso, o Canvas realiza outros processos, como detecção de interações do mouse, monitoramento de cliques, cálculos de máscara e redimensionamentos (redraws), que podem impactar o desempenho do jogo.

Vamos compartilhar com você um compilado de dicas para que você nunca tenha dores de cabeça com o Canvas:

Simplifique suas hierarquias:

É comum agrupar vários elementos da HUD, organizando-os como filhos de um componente para representar uma seção específica do Canvas. Por exemplo, juntar uma imagem de fundo, algumas outras imagens decorativas, um texto e um botão para formar um painel de compra.

Não é uma boa ideia ter hierarquias complexas em um objeto. Por dois motivos:

• Na Unity, ao mover um objeto, sua posição local e global são atualizadas. Se esse objeto tiver um filho, a posição local do filho (em relação ao pai) e sua posição global também precisam ser recalculadas. Caso o filho também tenha outro objeto como filho, esse processo se repete, com cada atualização ocorrendo em sequência após a atualização do pai. Em resumo, quanto mais complexa a hierarquia, mais cálculos são necessários, mesmo para o menor movimento.

• Se você tem uma hierarquia complexa, por exemplo, com várias imagens que compõem a decoração de um painel, cada imagem deverá ser renderizada, criando um Draw Call e afetando a desempenho.

  

  Repare que a Unity tem que desenhar um elemento de cada vez. Totalizando 8 Draw Calls só para um simples painel.

Simplifique painéis e telas. Antes mesmo de exportar para a Unity, junte elementos que vão ficar juntos para compor uma parte da UI.

Por mais que você perca um pouco da "liberdade" de ter cada elemento separado, os ganhos de se ter menos chamadas de renderização e cálculos podem valer muito a pena.

Repare que com apenas 3 Draw Calls conseguimos renderizar todo o painel promocional acima. Isso porque juntamos todos os elementos em um só sprite (1 Draw Call), então criamos o botão (2 Draw Calls) e por fim o texto dentro do botão (3 Draw Calls).

Canvas estáticos VS Canvas dinâmicos:

Evite deixar todos os componentes de UI em apenas um Canvas. O correto, é separar os componentes dinâmicos dos estáticos.

Em outras palavras, mantenha aquelas imagens, textos ou botões que sofrem alterações de cores, posição, rotação ou escala em um Canvas separado dos elementos que permanecem inalterados.

Na Unity, quando algo é atualizado na HUD, não só o objeto específico deve ser redesenhado, mas sim todos os elementos que estão no mesmo Canvas. Isso pode afetar a performance e causar uma impressão de "travamento" na interface.

Raycast Target e Maskable:

Essas duas opções ficam ativas quando um novo componente é adicionado na UI (seja texto ou imagem).

Raycast Target serve para dizer à Unity se você quer que o objeto em questão entre nos processos para detectar o mouse (passar por cima, sair, arrastar, clicar, etc). Já o Maskable diz a Unity se um objeto deve ou não ser afetado por máscaras (Rect Mask).

É importante desmarcar essas opções em elementos que não precisam.

No geral, você não vai querer nenhum elemento com o Maskable e deixar o Raycast Target apenas em botões e painéis. Também desmarque a opção Rich Text para textos que não usam tags (<color>, <font> e outras).

Claro que tudo isso varia de projeto para projeto.

Sprite Sheet / Sprite Atlas:

Sprites Sheets são muito importantes para otimização na Unity. Para jogos mobile, é quase que obrigatório o uso de Sprite Sheet. Mais importante do que isso, a imagem deve ser no formato POT (Power of Two), como 128x128, 256x256, 512x512, etc.

O motivo disso é que, caso a textura não seja POT, alguns dispositivos podem automaticamente redimensioná-la para o próximo valor POT, o que consome tempo de processamento adicional. Mais tempo de processamento significa maior aquecimento do aparelho e menos tempo de bateria.

Além disso, usar o Sprite Sheet também reduz a quantidade de Draw Call, já que se dois sprites fazem parte do mesmo Sprite Sheet, eles serão desenhados juntos, na mesma chamada.

Por fim, como não vai haver redimensionamento, o tamanho final do jogo ficará muito menor. Junte isso ao Crounch Compression (opção de compressão para texturas POT) e seu projeto vai ocupar menos espaço e até os tempos de carregamento serão menores.

Se você conhece mais alguma outra forma de otimização, compartilhe conosco nos comentários.