Hierarquia de Informações do HUD Mobile: O Que Mostrar em Combate, Lobby e Modais

Falhas de HUD raramente são “esquecemos a barra de vida” — elas são elementos demais com a mesma prioridade em uma única tela: abas de lobby durante o combate, uma loja tocável sobre uma cinemática, ou HUD subjacente ainda consumindo toques quando um modal está aberto. Mocks de design costumam ser de quadro único e nunca marcam “ocultar moeda em combate” — você precisa de uma especificação de estado × camada para que a engenharia consiga entregar visibilidade, bloqueio de input e ordem de desenho.

Abaixo usamos Unity UGUI (Prefab, Canvas.sortingOrder, raycasts de Graphic) como terminologia principal. Godot: CanvasLayer layer + Control mouse_filter; Cocos: ordem de desenho de nós + BlockInputEvents / bloqueadores de tela cheia — mesmos critérios e tabelas. Detalhes de Safe Area, texto flutuante e ordenação de Canvas: Safe Area, números de dano flutuantes. Dispositivo, todos os idiomas e builds Release: checklist pré-lançamento itens 1, 2 e 5.

Critérios de falha (qualquer um = não aprovado): durante fluxos de modal / cinemática / pagamento, HUD subjacente ainda interativo (a menos que a especificação diga “meia tela ainda operável”); em combate, promoção não relacionada ao combate que não pode ser dispensada bloqueia a área de jogo; a mesma informação mostrada duas vezes (ex.: moedas na barra superior mais UI grande de moedas em combate) sem nota de produto; controles do estado anterior permanecem (visíveis ou ainda bloqueando raycasts); com idiomas de estresse multilíngue, o layout mínimo de combate ainda corta textos longos (DE/ES, etc.).

---

Defina os estados primeiro, depois os controles

Estado de jogo (exemplos)	Objetivo do HUD	Geralmente mostrar	Geralmente ocultar / degradar
Lobby / home	Navegação + recursos + eventos	Moeda no topo, abas inferiores, entrada de evento	Habilidades de combate, mira
Combate / em fase	Ações + informação de sobrevivência	Vida, habilidades, pausa	Abas de lobby, banners de evento em tela cheia
Cinemática / CG	Sem input ou apenas pular	Botão de pular	Quase todo o HUD (ou apenas pular)
Modal (loja, configurações)	Foco no diálogo	Controles dentro do modal	HUD subjacente com raycasts desligados ou camada inteira oculta
Pagamento / conformidade	Concluir o fluxo	Termos, confirmar	Sobreposições de promoção no jogo

Acorde o enum de estados com design + engenharia (ex.: GameUIState.Lobby | Combat | Cinematic | Modal). As raízes de UI assinam a máquina de estados (grupos de Prefab na Unity / ramos de cena no Godot / prefabs no Cocos) — evite SetActive / visible espalhados em cada script de botão.

---

Camadas e ordem de classificação (especificação neutra de engine)

Documente de baixo para cima (número maior = na frente):

Camada	Conteúdo	Input
L0	Fundo em tela cheia / sangramento de UI de cena	Nenhum
L1	HUD de combate (vida, placeholder de joystick)	Sim
L2	Texto flutuante / dicas de combate	Sem raycasts (números de dano flutuantes)
L3	Toast de sistema / letreiro	Geralmente nenhum
L4	Modal / diálogo em tela cheia	Sim; bloqueia toques de L1–L3
L5	Queda de rede, atualização forçada	Sim; bloqueia tudo

Unity: sortingOrder / múltiplos Canvases; Godot: CanvasLayer layer; Cocos: ordem de irmãos sob um Canvas ou Canvas em camadas + máscara. Quando um modal abre, eleve L4 e desative raycasts de L1 / mouse_filter / BlockInput — não apenas “desenhado por cima mas os toques passam através”.

---

Prioridade de informação (exemplo de combate)

Se o combate só pode manter N blocos legíveis em telas pequenas, limites padrão:

Prioridade	Bloco	Estratégia de degradação
P0	Vida / relacionado à condição de falha	Não ocultar
P0	Pausa / sair do combate	Não ocultar
P1	Habilidades / ações primárias	Mesclar em menos botões
P2	Texto curto de objetivo	Ícone + detalhe por toque longo
P3	Moeda, entrada de evento	Oculto em combate por padrão ou no menu de pausa
P3	Entrada de chat	Recolher para ícone

Degradações devem permanecer legíveis em idiomas de estresse multilíngue (DE/ES, etc.) — não testes de encolhimento apenas em inglês.

---

Aceitação (5 passos)

1. Liste os estados — A partir do fluxo principal, enumere as transições (entrar na fase, abrir loja, CG, reconectar).
2. Captura de tela por estado — Editor Play e dispositivo Release cada um (itens 1 e 5 do pré-lançamento); verifique se nós com SetActive(false) / visible=false ainda bloqueiam input.
3. Verificação pontual de modal — Com loja / configurações / pagamento abertos, toques em antigos botões do HUD não devem fazer nada (raycast transparente em tela cheia ou máscara BlockInput).

4. Cruze com Safe Area — Controles P0 de combate dentro do inset seguro (Safe Area).
5. Versione os assets — A tabela de estados guia a visibilidade (Unity ScriptableObject / Godot Resource / config do Cocos) — não ocultações temporárias apenas na Scene.

---

O que o design deve adicionar

Entregável	Propósito
Wireframes por estado (pelo menos Lobby / Combate / Modal)	Engenharia configura a visibilidade
Lista de “pode ocultar” em combate no mock	Evitar pintar cada elemento em um único quadro
Especificação de modal: fundo escurecido, toque através permitido?	Define a política de raycast
Ordem z da camada de promoção / evento	Alinhar com L4/L5

Designers não precisam escrever a máquina de estados — tabelas + anotações reduzem suposições.

---

Roteamento de correções

Sintoma	Causa provável	Ação	Responsável
Ainda dá para tocar no combate após o diálogo	Raycasts subjacentes ligados	Desativar raycast de Graphic na camada do modal / máscara em tela cheia	Engenharia
Evento em tela cheia em combate	Sem tabela de estados	Ocultar P3 em combate; aprovação do design	Engenharia + design
HUD permanece após cinemática	Sem hook de estado Cinematic	Máquina de estados oculta o HUD uniformemente	Engenharia
Duas exibições de moeda	Barra de lobby não desligada em combate	Ocultar barra superior em Combate ou mesclar fonte de dados	Engenharia + design
Idioma longo corta no layout mínimo de combate	DE/ES não testados	Caminho de overflow de idioma	Design + engenharia

---

FAQ

Dois Canvases para lobby e combate?
Tudo bem — ou um Canvas com grupos. O que importa é visibilidade por estado + raycasts, não a quantidade de Canvases.

Loja de meia tela — isso é um modal?
Sim. Especifique se o subjacente é tocável e se a lógica de combate pausa.

Conflita com a UX de “menos é mais”?
A tabela de hierarquia é uma regra de produto, não estética; P3 pode reabrir para eventos via flags da máquina de estados.

Barras de status em world-space no 3D?
Elas são informação de combate, gerenciadas com L1; Regras de ordenação em world-space alinham-se com números de dano flutuantes e Safe Area.