UI Responsiva na Unity: Canvas Scaler e Âncoras

O Canvas Scaler da Unity é o componente que decide como a interface uGUI cresce e encolhe em telas de tamanhos diferentes. Com UI Scale Mode em Scale With Screen Size, uma Reference Resolution definida e o Match certo, somado a âncoras bem colocadas em cada elemento, a mesma UI cabe num celular 16:9, num 20:9 alongado e num tablet 4:3, sem botão saindo da tela nem texto gigante.

Aqui você vai configurar o Canvas Scaler, escolher o Match, posicionar âncoras e pivôs, usar Layout Groups, criar um componente SafeArea para o notch e testar tudo no Game view e no Device Simulator do Unity 6.3.

Por que a UI quebra em outras resoluções

Por padrão, um Canvas novo vem com UI Scale Mode em Constant Pixel Size: cada elemento mantém o tamanho em pixels independente da tela. Um botão de 200 pixels ocupa um quinto da largura num celular de 1080 pixels e um oitavo num tablet de 1600. Num celular de resolução alta, tudo fica minúsculo.

O segundo problema são as âncoras. Um RectTransform com âncora no centro posiciona o elemento a partir do centro da tela. O botão de pausa colocado a 900 pixels à direita do centro fica no canto num 16:9, sobra um vão até a borda num 20:9 mais largo e sai da tela num 4:3 mais estreito.

O terceiro é o formato dos celulares atuais: telas 19,5:9 e 20:9 com notch, ilha de câmera e cantos arredondados. Um botão no canto superior esquerdo pode ficar embaixo da câmera.

A solução combina três peças: escala (Canvas Scaler), posição relativa (âncoras) e área segura (Safe Area).

Canvas Scaler: Scale With Screen Size e Reference Resolution

Selecione o Canvas e, no componente Canvas Scaler:

1. UI Scale Mode: Scale With Screen Size. Os elementos ficam maiores em telas maiores.
2. Reference Resolution: a resolução para a qual você desenha a UI. Para jogo em paisagem, 1920x1080. Para retrato, 1080x1920.
3. Screen Match Mode: Match Width Or Height.
4. Match: comece em 0,5 (a escolha de cada caso está na próxima seção).
5. Reference Pixels Per Unit: deixe igual ao Pixels Per Unit dos sprites de UI (100 por padrão).

As outras opções de modo: Constant Physical Size mantém o tamanho físico (em centímetros) independente da densidade da tela, útil em ferramentas, raro em jogo. E os outros modos de match: Expand aumenta a área do Canvas para que ela nunca fique menor que a referência (tudo cabe, sobra espaço nas bordas), e Shrink recorta para que nunca fique maior (nada sobra, mas pode cortar).

Faça isso em todos os Canvases do jogo, com a mesma Reference Resolution. Canvases com configurações diferentes geram botões de tamanhos diferentes em telas diferentes.

Match Width or Height: como escolher

O Match define qual medida da tela comanda a escala:

• 0 (Width): a escala segue a largura. Em paisagem, um 20:9 é mais largo que um 16:9 na mesma altura, então a UI fica maior e pode estourar verticalmente.
• 1 (Height): a escala segue a altura. Em paisagem, a altura varia pouco entre celulares, então o tamanho dos elementos fica estável e o espaço extra de telas mais largas aparece nas laterais.
• 0,5: mistura as duas. É o meio termo seguro quando você ainda não sabe o formato dos aparelhos.

Regra prática:

Depois de escolher, teste nos dois extremos (o aparelho mais estreito e o mais largo que você quer suportar). Se algo estourar, ajuste o Match em passos de 0,1 antes de mexer em âncoras.

Âncoras e pivôs sem mistério

A âncora é o ponto do pai em relação ao qual o elemento é posicionado. O pivô é o ponto do próprio elemento que fica nessa posição. No Inspector do RectTransform, o quadrado de Anchor Presets (canto superior esquerdo) mostra as opções. Segurando Shift, o clique define também o pivô; com Alt, também move o elemento para lá.

Como ancorar o HUD:

• Botão de pausa no canto superior direito: preset superior direito, com Shift+Alt. O botão gruda no canto em qualquer proporção.
• Barra de vida no canto superior esquerdo: preset superior esquerdo.
• Joystick virtual: inferior esquerdo. Botões de ação: inferior direito.
• Título de tela, diálogo central: centro.
• Barra que ocupa a largura toda (barra de experiência no topo): preset de esticar horizontalmente no topo. Com âncoras esticadas, os campos viram Left e Right em vez de posição e largura.
• Fundo de tela: esticar nos dois eixos (canto inferior direito dos presets, com Alt), com todos os offsets em 0.

Erro clássico: tudo com âncora no centro. Funciona na resolução em que você montou e quebra em todas as outras.

Layout Groups e Content Size Fitter

Para grupos de elementos, não posicione item por item:

• Horizontal Layout Group e Vertical Layout Group: alinham os filhos em linha ou coluna, com Spacing e Padding. Use em menus de botões e barras de itens.
• Grid Layout Group: grade com Cell Size fixo. Use em inventário e seleção de fase.
• Content Size Fitter: faz o elemento crescer conforme o conteúdo. Com Horizontal Fit em Preferred Size, um balão de diálogo acompanha o tamanho do texto.
• Layout Element: define tamanho mínimo e preferido de um filho específico dentro do grupo.

Cuidado com o custo: Layout Groups recalculam quando qualquer filho muda. Em listas grandes atualizadas toda hora, pese o uso. O post sobre otimização de jogos mobile aprofunda o que pesa no celular.

UI que funciona em todas as telas é um dos detalhes que separam protótipo de jogo publicável, e é justamente o tipo de acabamento que fica para depois até o lançamento chegar. No curso de Unity você constrói um jogo completo com a UI pensada para várias telas desde o começo, junto com o restante do projeto.

Unity Safe Area: notch e bordas arredondadas

A Screen.safeArea devolve, em pixels, o retângulo da tela que não é coberto por notch, câmera ou cantos arredondados. A ideia é simples: um painel ocupa exatamente esse retângulo, e todos os elementos interativos ficam dentro dele.

Monte assim:

1. No Canvas, crie um objeto vazio filho chamado SafeArea, com âncoras esticadas nos dois eixos e offsets em 0.
2. Coloque o script abaixo nele.
3. Mova botões, HUD e textos importantes para dentro de SafeArea. O fundo e efeitos decorativos ficam fora, ocupando a tela toda.

Arquivo SafeArea.cs:

using UnityEngine;

[RequireComponent(typeof(RectTransform))]
public class SafeArea : MonoBehaviour
{
    private RectTransform rectTransform;
    private Rect lastSafeArea;
    private Vector2Int lastScreenSize;
    private ScreenOrientation lastOrientation;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        Apply();
    }

    private void Update()
    {
        bool changed = Screen.safeArea != lastSafeArea
            || Screen.width != lastScreenSize.x
            || Screen.height != lastScreenSize.y
            || Screen.orientation != lastOrientation;

        if (changed)
        {
            Apply();
        }
    }

    private void Apply()
    {
        Rect safeArea = Screen.safeArea;
        lastSafeArea = safeArea;
        lastScreenSize = new Vector2Int(Screen.width, Screen.height);
        lastOrientation = Screen.orientation;

        if (Screen.width <= 0 || Screen.height <= 0) return;

        Vector2 anchorMin = safeArea.position;
        Vector2 anchorMax = safeArea.position + safeArea.size;
        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;

        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
        rectTransform.offsetMin = Vector2.zero;
        rectTransform.offsetMax = Vector2.zero;
    }
}

O script converte o retângulo seguro, em pixels, para âncoras entre 0 e 1. A origem da Screen.safeArea é o canto inferior esquerdo, a mesma das âncoras do uGUI, então a conversão é direta. O Update só recalcula quando algo muda: rotação do aparelho, mudança de resolução ou de área segura. Se você usa UI Toolkit, a origem do painel fica no canto superior esquerdo e o Y precisa ser invertido, como mostra o exemplo do manual.

O que vai dentro e o que fica fora da Safe Area:

• Dentro: todo botão, joystick, barra de vida, contador e texto que o jogador precisa ler ou tocar.
• Fora: fundos, molduras decorativas, vinhetas e partículas de tela. Eles devem ir até a borda, senão aparecem faixas pretas em volta do notch.

Testando em várias telas no Game view e no Device Simulator

Game view. No menu de resolução do Game view, clique em + no fim da lista e crie resoluções fixas: 1920x1080 (16:9), 2340x1080 (19,5:9), 2400x1080 (20:9) e 2048x1536 (tablet 4:3). Alterne entre elas com o jogo rodando. É rápido, mas não simula notch.

Device Simulator. Está embutido no editor no Unity 6, sem pacote. Troque o menu suspenso no canto superior esquerdo do Game view de Game para Simulator, ou abra por Window > General > Device Simulator. Na barra de ferramentas:

• Escolha o aparelho na lista de dispositivos.
• Use Rotate para alternar entre retrato e paisagem.
• Ligue Safe Area para desenhar o contorno da área segura na tela.

O Simulator simula a área segura de cada aparelho, então o Screen.safeArea do seu script responde como no telefone de verdade. Passe por três ou quatro aparelhos com notch em posições diferentes e gire a tela em cada um.

Mesmo assim, teste num aparelho real antes de publicar: densidade de toque e legibilidade só se avaliam com o celular na mão.

Erros comuns: botão fora da tela e texto gigante no tablet

Botão fora da tela em celular alongado. Âncora no centro. Ancore no canto correspondente com Shift+Alt.

Texto gigante no tablet ou minúsculo no celular. Match puxando para o lado errado ou Constant Pixel Size num Canvas esquecido. Confira todos os Canvases.

UI esticada ou deformada. Elementos com âncoras esticadas que deveriam ter tamanho fixo. Para ícones, use âncora de ponto e marque Preserve Aspect no componente Image.

Botão embaixo do notch. Elemento fora do painel SafeArea, ou o script está no Canvas em vez do painel filho.

Faixa preta ao redor da Safe Area. O fundo está dentro do painel seguro. Tire o fundo de dentro e deixe esticado no Canvas.

Texto borrado. Use TextMeshPro, que no Unity 6 faz parte do pacote Unity UI, e evite escalar textos com localScale.

Próximo passo

Configure o Canvas Scaler no seu HUD atual, ancore cada elemento e adicione o painel SafeArea. Depois rode no Device Simulator em três aparelhos com notch e em um tablet. Para decidir o que mostrar no HUD e onde o polegar alcança, leia o guia de UI/UX design para jogos. Se o projeto ainda está começando e você está escolhendo o sistema de UI, veja também UI Toolkit vs uGUI.