Safe Area da UI de Jogo e QA de Dispositivos: Ordem de Debug e Correções em Prefabs

O relatório mais comum: a Game view parece certa, mas em um celular alto o HUD fica sob o notch, ou os botões parecem tocáveis mas os toques erram. Safe Area não é “ajustar a âncora”—é política do Canvas raiz, fundo full-bleed vs conteúdo com inset, e se o safeArea em runtime corresponde ao canal.

classes de falha, ordem de debug do Unity UGUI, regras de correção em Prefabs e ressalvas de canal/mini-game. As marcas de safe-zone do item 7 do handoff de design estão resumidas em “o que o design deve fornecer”; o escopo de dispositivos do item 1 de pré-lançamento é expandido aqui—não é uma repetição do checklist de engine + MCP de Raycast / primeiro Play.

Godot / Cocos: Mapeie para DisplayServer.get_display_safe_area() / widgets SafeArea da engine; mesma ordem de passos do Unity abaixo.

Critérios de falha (qualquer um = não aprovado): UI principal legível ou botões obrigatórios sob oclusão do sistema (notch, indicador home, cantos arredondados); deslocamento óbvio entre visual e área de toque; Editor apenas em 16:9 sem proporção-alvo no dispositivo; comportamento de Safe Area diferente entre Dev e Release sem especificação.

---

Classifique primeiro: clip, offset ou apenas fundo

Sintoma	Suspeito primeiro	Ação de engenharia
Clip visual (texto/ícones no notch)	Conteúdo sem inset; raiz tratada como tela cheia	Verifique safeArea vs retângulos de conteúdo
Offset de toque (parece certo, erra)	Modo de escala do Canvas, múltiplos Canvases, câmera incompatível	Raycast do EventSystem + renderMode do Canvas
Fundo cortado, botões OK	Fundo full-bleed por design, conteúdo com inset	Não é falha se a especificação permitir
Errado após rotação	Sem listener para mudança de orientação / safeArea	Recalcule o inset ao rotacionar
Apenas um build de canal	SDK altera safeArea ou resolução	Faça smoke desse build; não confie apenas no Android genérico

---

Unity UGUI: ordem de debug recomendada (6 passos)

1. Trave a reprodução

Registre dispositivo, SO, Dev/Release, orientação, resolução da Game view. Item 5 de pré-lançamento: rode o HUD principal em Dev e Release.

2. Logue safeArea e resolução de referência

Após o carregamento da UI principal, logue:

• Screen.width / Screen.height
• Screen.safeArea
• Display.cutouts (Android 11+ se usado)

Leitura: safeArea menor que a tela → inset de conteúdo necessário. No Editor o safeArea frequentemente equivale à tela cheia → não substitui o dispositivo.

3. Canvas raiz e Canvas Scaler

Verificação	Erro típico	Direção da correção
Render Mode da raiz	Screen Space / Camera UI misturados → offset de ray	Um modo para a UI
Canvas Scaler	Resolução de referência ≠ baseline retrato do projeto	Combine com o checklist de engine item 1
Match width/height	Proporção longa escala errado; widgets de borda desviam	Acorde o Match com design/prod; corrija o Prefab, não só a Scene
Ordem de múltiplos Canvas	Toques vão para a camada errada	Alinhe sortingOrder e alvos de raycast

4. Camadas: fundo full-bleed vs conteúdo seguro

Hierarquia de Prefab sugerida:

Canvas
├── Background_FullBleed   (âncora cheia, pode entrar no notch, sem input)
└── SafeRoot               (componente Safe Area ou padding guiado por safeArea)
    ├── HUD_Content
    └── Popups

Use o Safe Area do Unity (ou código do projeto definindo offsetMin/Max a partir de Screen.safeArea). Não estique botões interativos em tela cheia sem inset.

Exportações do Studio com uma camada plana: veja nine-slice / reexportação estruturada e canvas → Prefab.

5. Verificação pontual de toque no dispositivo

3–5 botões críticos no fluxo principal; compare o centro visual com o dedo. Offset apenas em um popup → verifique Canvas aninhado ou Scaler duplicado.

6. Faça commit do Prefab no repositório

Os critérios de aprovação vivem no Prefab versionado, não em overrides de Scene de teste (item 6 de pré-lançamento). Após mudanças de âncora, rode o smoke de overflow de locale nos idiomas de estresse.

---

Canal / mini-game (engenharia)

Cenário	Observação
App nativo	Screen.safeArea + dispositivos reais
Alguns mini-games / quick apps	safeArea / systemInfo do contêiner ≠ simulação do Editor
Cutouts Android	cutout vs safeArea podem diferir
PC / deck	safeArea frequentemente tela cheia

Padrão: ISafeAreaProvider (ou equivalente); injete por plataforma—evite #if nos Prefabs de HUD.

---

Roteamento de correções

Sintoma	Causa provável	Ação	Responsável
Clip no dispositivo, Editor OK	Sem SafeRoot / sem driver de safeArea	Camadas no Prefab + Safe Area; reteste no dispositivo	Engenharia
Fundo OK, botões cortados	Botões sob a camada de sangria	Mova para SafeRoot; reexporte camadas do Studio	Engenharia + Design
Offset de toque	Múltiplos Canvas / camera UI / Scaler aninhado	Una o Canvas ou unifique a câmera de raycast	Engenharia
Desvio ao mudar resolução	Apenas âncoras fixas	Corrija âncoras; item 6 de engine	Engenharia
Design sem safe frame	Falta o item 7 de handoff	Design adiciona refs de notch/home; reexporta	Design
Export plano do Studio	BG + HUD não separados	Split in-place e reexporte	Engenharia + Design

---

O que o design fornece (secundário)

Entrega	Uso pela engenharia
Resolução-alvo + referência segura (notch / home bar)	Reference Resolution e expectativas de inset
Camadas nomeadas full-bleed vs HUD	Prefab Background_* / SafeRoot
Abas de borda dentro do seguro ou sangria intencional	Estratégia de âncora

Designers não precisam escrever scripts—marcas claras reduzem px de inset adivinhados.

---

Perguntas frequentes

A resolução de iPhone na Game view basta?
Apenas smoke em Dev; o envio exige dispositivos-alvo (item 1 de pré-lançamento). O safeArea do Editor frequentemente difere.

Componente Safe Area vs offset manual?
Escolha do time; o manual deve atualizar em mudanças de safeArea/orientação—evite lógica duplicada.

Corrigir clip só com Canvas Scaler?
O Scaler escala; o inset é separado. Clip é retângulo de conteúdo; Scaler é escala global.

MCP/Cursor ajudam?
Bom para renomear Prefabs, anexar Safe Area, smoke de Play—os números ainda vêm dos logs do dispositivo. Checklist de engine + MCP.

Safe Area mais overflow de locale?
Corrija o layout do SafeRoot primeiro, depois locales de estresse—o inset reduz a largura.

VberAI Studio vs Google AI Studio?
Não. Veja a comparação.