Game UI Frontend
Visão Geral
Use esta skill sempre que o jogo precisar de uma camada de interface visível. O objetivo não é produzir UI de dashboard genérica. O objetivo é produzir uma interface de jogo legível, temática e que suporte a experiência de jogo.
Suposição padrão: construa o mundo do jogo em canvas ou WebGL, e construa a UI com muito texto em DOM.
Padrões de Frontend
- Estabeleça direção visual antes de codificar.
- Gênero e fantasia
- Linguagem material
- Tipografia
- Paleta
- Tom de movimento
- Use variáveis CSS para o tema da UI.
- Construa hierarquia clara.
- Informações críticas de combate ou sobrevivência primeiro
- Ferramentas secundárias em segundo lugar
- Configurações raramente usadas atrás de menus ou gavetas
- Proteja a área de jogo primeiro, especialmente em 3D.
- A tela inicial deve parecer jogável em poucos segundos.
- Padrão: um cluster primário de HUD persistente e no máximo um pequeno cluster secundário.
- Mantenha o centro da área de jogo livre durante o jogo normal.
- Mantenha a parte central inferior da área de jogo principalmente livre durante o jogo normal.
- Coloque lore, notas de campo, detalhes de missões e longas listas de controle atrás de gavetas, alternadores ou superfícies de pausa.
- Prefira prompts contextuais e dicas transitórias em vez de painéis com caixas permanentes.
- Mantenha as sobreposições legíveis sobre movimento.
- Use painéis de fundo, tratamento de borda, contraste e desfoque controlado onde necessário.
- Projete para desktop e mobile desde o início.
- Projete UI 3D em torno dos limites de câmera e controle de entrada.
- Pause ou bloqueie a entrada de controle de câmera quando menus, diálogos ou UI baseada em ponteiro estiverem ativos.
- Mantenha os estados de bloqueio de ponteiro, arrastar para olhar e interação com menus explícitos.
Padrões Iniciais para 3D
Para scaffolds iniciais de exploração, travessia ou terceira pessoa, prefira este orçamento de UI:
- um chip de objetivo compacto ou faixa de status na borda
- uma dica de controles transitória ou prompt de interação
- uma superfície secundária opcional colapsável, como um diário, mapa ou registro de missões
Não abra todas as superfícies informativas no primeiro carregamento. A cena deve ser legível antes que o usuário abra qualquer UI mais profunda.
Como uma restrição de implementação padrão para jogos 3D no navegador:
- nenhum layout sempre ativo de cabeçalho em largura total + corpo com vários cartões + rodapé em largura total
- nenhuma sobreposição grande no centro da tela ou na parte central inferior durante o movimento normal
- não mais do que aproximadamente 20-25% da janela de visualização coberta por HUD persistente no desktop, a menos que o usuário solicite explicitamente um layout mais denso
- no mobile, colapse em uma pilha estreita ou chips contextuais antes de cobrir a área de jogo com painéis maiores
Regras de Prompt
Ao pedir ao modelo para projetar ou implementar UI de jogo, inclua:
- a fantasia do jogo
- a câmera ou ponto de vista
- os verbos do jogador
- as camadas de HUD
- o modo de câmera ou controle quando o jogo é 3D
- o tom de movimento
- expectativas para desktop e mobile
- estratégia de proteção e revelação da área de jogo
- anti-padrões explícitos a evitar
Use ../../references/frontend-prompts.md para formatos concretos de prompt.
Regras de Movimento
- Prefira algumas transições significativas em vez de micro-animação constante.
- Reserve movimentos fortes para mudança de estado, recompensa, perigo e integração.
- Respeite as configurações de movimento reduzido para animações não essenciais.
- Evite que o movimento do HUD 3D entre em conflito com o movimento da câmera.
O que Parece Bom
- Elementos de HUD são legíveis sem achatar a cena.
- Menus parecem nativos do mundo do jogo, não como um painel administrativo de SaaS.
- O layout se adapta perfeitamente entre pontos de interrupção.
- Feedback de ponteiro, teclado e estado do jogo são óbvios.
- Em jogos 3D, os estados de menu e HUD não competem com o controle da câmera ou bloqueio de ponteiro.
- Em jogos 3D, a primeira visão jogável mantém a maior parte da janela de visualização disponível para movimento, mira e leitura espacial.
- A densidade de informações persistentes é baixa o suficiente para que capturas de tela ainda pareçam cenas de jogo, não composições de UI.
Anti-Padrões
- Layouts genéricos de dashboard de aplicativo
- Estilo simples de espaço reservado sem tema
- Pilhas de fontes padrão sem intenção
- Sobreposições densas que obscurecem a área de jogo
- Grandes cartões de título ou notas de vários parágrafos sobre uma cena jogável ao vivo
- Painéis com caixas de peso igual distribuídos em cada borda da janela de visualização
- Controles, objetivos, notas e lore todos expandidos ao mesmo tempo no primeiro carregamento
- Chrome de topo e fundo em largura total com grandes painéis sempre ativos no centro ou corpo em jogos 3D
- Movimento excessivo em cada elemento
- UI apenas em canvas quando DOM seria mais claro e barato
- Forçar controles de HUD para a cena 3D quando DOM padrão seria mais claro
- Deixar a entrada da câmera ativa sob modais ou painéis de inventário
Referências
- Arquitetura compartilhada:
../web-game-foundations/SKILL.md - Receitas de prompt:
../../references/frontend-prompts.md - Padrões de layout 3D com pouco chrome:
../../references/three-hud-layout-patterns.md - Contexto de UI 3D hospedada em React:
../react-three-fiber-game/SKILL.md - Revisão de playtest:
../../references/playtest-checklist.md