UI Frontend para Juegos
Resumen
Usa este skill cada vez que el juego necesite una capa de interfaz visible. La tarea no es producir una UI genérica de panel de control. La tarea es producir una interfaz legible y temática para juegos de navegador que respalde la experiencia de juego.
Suposición predeterminada: construye el mundo del juego en canvas o WebGL, y la UI con mucho texto en DOM.
Estándares Frontend
- Establece la dirección visual antes de codificar.
- Género y fantasía
- Lenguaje material
- Tipografía
- Paleta
- Tono de movimiento
- Usa variables CSS para el tema de la UI.
- Construye una jerarquía clara.
- Información crítica de combate o supervivencia primero
- Herramientas secundarias después
- Configuraciones de uso poco frecuente detrás de menús o cajones
- Protege el área de juego primero, especialmente en 3D.
- La pantalla inicial debe sentirse jugable en pocos segundos.
- Por defecto, un clúster HUD principal persistente y, como máximo, un clúster secundario pequeño.
- Mantén el centro del área de juego despejado durante el juego normal.
- Mantén la parte central inferior del área de juego mayormente despejada durante el juego normal.
- Coloca la historia, notas de campo, detalles de misiones y listas de control largas detrás de cajones, alternadores o superficies de pausa.
- Prefiere indicaciones contextuales y sugerencias transitorias sobre paneles en caja permanentes.
- Mantén las superposiciones legibles sobre el movimiento.
- Usa paneles de respaldo, tratamiento de bordes, contraste y desenfoque moderado cuando sea necesario.
- Diseña tanto para escritorio como para dispositivos móviles desde el principio.
- Diseña la UI 3D en torno a los límites de la cámara y la entrada de control.
- Pausa o bloquea la entrada de control de la cámara cuando los menús, diálogos o la UI basada en puntero estén activos.
- Mantén explícitos los estados de bloqueo de puntero, arrastrar para mirar e interacción con menús.
Valores Predeterminados para Inicio en 3D
Para andamios de exploración, desplazamiento o tercera persona, prefiere este presupuesto de UI:
- un chip de objetivo compacto o tira de estado en el borde
- una sugerencia de controles transitoria o indicación de interacción
- una superficie secundaria opcional colapsable, como un diario, mapa o registro de misiones
No abras todas las superficies informativas en la primera carga. La escena debe ser legible antes de que el usuario abra cualquier UI más profunda.
Como restricción de implementación predeterminada para juegos 3D en navegador:
- sin diseño de encabezado de ancho completo, cuerpo con varias tarjetas y pie de página de ancho completo siempre visibles
- sin superposiciones grandes en el centro de la pantalla o en la parte central inferior durante el movimiento normal
- no más de aproximadamente el 20-25% del viewport cubierto por HUD persistente en escritorio, a menos que el usuario solicite explícitamente un diseño más denso
- en móvil, colapsa a una pila estrecha o chips contextuales antes de cubrir el área de juego con paneles más grandes
Reglas de Indicaciones
Al pedirle al modelo que diseñe o implemente la UI del juego, incluye:
- la fantasía del juego
- la cámara o punto de vista
- los verbos del jugador
- las capas del HUD
- la cámara o modo de control cuando el juego es 3D
- el tono de movimiento
- las expectativas de escritorio y móvil
- la estrategia de protección y divulgación del área de juego
- los anti-patrones explícitos a evitar
Usa ../../references/frontend-prompts.md para formas concretas de indicaciones.
Reglas de Movimiento
- Prefiere unas pocas transiciones significativas sobre la microanimación constante.
- Reserva el movimiento fuerte para cambios de estado, recompensas, peligros e incorporación.
- Respeta la configuración de movimiento reducido para animaciones no esenciales.
- Evita que el movimiento del HUD 3D compita con el movimiento de la cámara.
Cómo se Ve un Buen Resultado
- Los elementos del HUD son legibles sin aplanar la escena.
- Los menús se sienten nativos del mundo del juego, no como un panel de administración SaaS.
- El diseño se adapta limpiamente a través de los puntos de interrupción.
- La retroalimentación del puntero, teclado y estado del juego es obvia.
- En juegos 3D, los estados del menú y HUD no luchan contra el control de la cámara o el bloqueo del puntero.
- En juegos 3D, la primera vista jugable mantiene la mayor parte del viewport disponible para movimiento, puntería y lectura espacial.
- La densidad de información persistente es lo suficientemente baja como para que las capturas de pantalla sigan leyéndose como escenas de juego, no como composiciones de UI.
Anti-Patrones
- Diseños genéricos de panel de control de aplicaciones
- Estilo plano de marcador de posición sin tema
- Pilas de fuentes predeterminadas sin intención
- Superposiciones densas que oscurecen el área de juego
- Grandes tarjetas de título o notas de varios párrafos superpuestas a una escena de juego viva
- Paneles en caja de igual peso distribuidos alrededor de cada borde del viewport
- Controles, objetivos, notas e historia expandidos todos a la vez en la primera carga
- Cromo superior e inferior de ancho completo con paneles de centro o cuerpo grandes y siempre visibles en juego 3D
- Movimiento excesivo en cada elemento
- UI solo en canvas cuando DOM sería más claro y económico
- Forzar controles del HUD en la escena 3D cuando el DOM estándar sería más claro
- Permitir que la entrada de la cámara permanezca activa debajo de modales o paneles de inventario
Referencias
- Arquitectura compartida:
../web-game-foundations/SKILL.md - Recetas de indicaciones:
../../references/frontend-prompts.md - Patrones de diseño 3D de bajo cromo:
../../references/three-hud-layout-patterns.md - Contexto de UI 3D alojado en React:
../react-three-fiber-game/SKILL.md - Revisión de pruebas de juego:
../../references/playtest-checklist.md