Jerarquía de información del HUD móvil: qué mostrar en combate, lobby y modales

Los fallos del HUD rara vez son «olvidamos la barra de vida»: son demasiados elementos con la misma prioridad en una sola pantalla: pestañas del lobby durante el combate, una tienda táctil sobre una cinemática, o el HUD subyacente que sigue capturando toques cuando hay un modal abierto. Los mockups de diseño suelen ser de un solo fotograma y nunca marcan «ocultar moneda en combate»; necesitas una especificación de estado × capa para que ingeniería pueda implementar visibilidad, bloqueo de entrada y orden de dibujo.

A continuación se usa Unity UGUI (Prefab, Canvas.sortingOrder, raycasts de Graphic) como terminología principal. Godot: CanvasLayer layer + Control mouse_filter; Cocos: orden de dibujo de nodos + BlockInputEvents / bloqueadores a pantalla completa—mismos criterios y tablas. Detalles de Safe Area, texto flotante y orden de Canvas: Safe Area, números de daño flotantes. Dispositivo, todos los idiomas y builds Release: checklist previo al lanzamiento puntos 1, 2 y 5.

Criterios de fallo (cualquiera = no aprobado): durante flujos de modal / cinemática / pago, el HUD subyacente sigue siendo interactivo (salvo que la especificación diga «media pantalla aún operable»); en combate, un promo no relacionado con el combate que no se puede cerrar bloquea el área de juego; la misma información mostrada dos veces (p. ej., monedas en la barra superior más una gran UI de monedas en combate) sin nota de producto; controles del estado anterior que permanecen (visibles o aún bloqueando raycasts); con locales de estrés multilingües, el layout mínimo de combate aún recorta textos largos (DE/ES, etc.).

---

Define primero los estados, luego los controles

Estado de juego (ejemplos)	Objetivo del HUD	Normalmente mostrar	Normalmente ocultar / degradar
Lobby / inicio	Navegación + recursos + eventos	Moneda superior, pestañas inferiores, entrada de eventos	Habilidades de combate, mira
Combate / en nivel	Acciones + información de supervivencia	Vida, habilidades, pausa	Pestañas del lobby, banners de eventos a pantalla completa
Cinemática / CG	Sin entrada o solo saltar	Botón de saltar	Casi todo el HUD (o solo saltar)
Modal (tienda, ajustes)	Enfoque en el diálogo	Controles dentro del modal	HUD subyacente con raycasts desactivados o capa entera oculta
Pago / cumplimiento	Completar el flujo	Términos, confirmar	Superposiciones promocionales del juego

Acuerda el enum de estados con diseño + ingeniería (p. ej., GameUIState.Lobby | Combat | Cinematic | Modal). Las raíces de UI se suscriben a la máquina de estados (grupos de Prefab en Unity / ramas de escena en Godot / prefabs en Cocos)—evita SetActive / visible dispersos en cada script de botón.

---

Capas y orden de clasificación (especificación neutral respecto al motor)

Documenta de abajo hacia arriba (número mayor = más al frente):

Capa	Contenido	Entrada
L0	Fondo a pantalla completa / sangrado de UI de escena	Ninguna
L1	HUD de combate (vida, marcador de joystick)	Sí
L2	Texto flotante / consejos de combate	Sin raycasts (números de daño flotantes)
L3	Toast del sistema / marquesina	Normalmente ninguna
L4	Modal / diálogo a pantalla completa	Sí; bloquea toques de L1–L3
L5	Caída de red, actualización forzada	Sí; bloquea todo

Unity: sortingOrder / múltiples Canvas; Godot: CanvasLayer layer; Cocos: orden de hermanos bajo un Canvas o Canvas en capas + máscara. Cuando se abre un modal, sube L4 y desactiva los raycasts de L1 / mouse_filter / BlockInput—no solo «dibujado encima pero los toques pasan a través».

---

Prioridad de la información (ejemplo de combate)

Si el combate solo puede mantener N bloques legibles en pantallas pequeñas, límites predeterminados:

Prioridad	Bloque	Estrategia de degradación
P0	Vida / relacionado con condición de fallo	No ocultar
P0	Pausa / salir del combate	No ocultar
P1	Habilidades / acciones principales	Fusionar en menos botones
P2	Texto corto de objetivo	Icono + detalle con pulsación larga
P3	Moneda, entrada de eventos	Ocultos en combate por defecto o en el menú de pausa
P3	Entrada de chat	Contraer a icono

Las degradaciones deben seguir siendo legibles en locales de estrés multilingües (DE/ES, etc.)—no pruebas de reducción solo en inglés.

---

Aceptación (5 pasos)

1. Lista los estados — Desde el flujo principal, enumera las transiciones (entrar al nivel, abrir tienda, CG, reconexión).
2. Captura por estado — Editor Play y dispositivo Release cada uno (puntos 1 y 5 previos al lanzamiento); verifica que los nodos con SetActive(false) / visible=false sigan bloqueando la entrada.
3. Verificación puntual del modal — Con tienda / ajustes / pago abiertos, los toques en los antiguos botones del HUD no deben hacer nada (raycast transparente a pantalla completa o máscara BlockInput).

4. Cruzar con Safe Area — Controles P0 de combate dentro del inset seguro (Safe Area).
5. Commitear assets versionados — La tabla de estados dirige la visibilidad (ScriptableObject de Unity / Resource de Godot / configuración de Cocos)—no ocultamientos temporales solo en la escena.

---

Qué debería añadir diseño

Entregable	Propósito
Wireframes por estado (al menos Lobby / Combate / Modal)	Ingeniería configura la visibilidad
Lista de «puede ocultarse» en combate sobre el mockup	Evitar pintar cada elemento en un solo fotograma
Especificación del modal: fondo atenuado, ¿se permite toque a través?	Define la política de raycast
Orden z de la capa de promo / evento	Alinear con L4/L5

Los diseñadores no necesitan escribir la máquina de estados—tablas + anotaciones reducen las conjeturas.

---

Enrutamiento de correcciones

Síntoma	Causa probable	Acción	Responsable
Aún se puede tocar el combate tras el diálogo	Raycasts subyacentes activados	Desactivar raycast de Graphic en la capa del modal / máscara a pantalla completa	Ingeniería
Evento a pantalla completa en combate	Sin tabla de estados	Ocultar P3 en combate; aprobación de diseño	Ingeniería + diseño
HUD permanece tras la cinemática	Sin hook del estado Cinematic	La máquina de estados oculta el HUD de forma uniforme	Ingeniería
Dos visualizaciones de moneda	Barra del lobby no desactivada en combate	Ocultar la barra superior en Combate o fusionar la fuente de datos	Ingeniería + diseño
Locale largo se recorta en el layout mínimo de combate	DE/ES no probados	Ruta de desbordamiento de locale	Diseño + ingeniería

---

FAQ

¿Dos Canvas para lobby y combate?
Está bien—o un Canvas con grupos. Lo que importa es la visibilidad por estado + los raycasts, no la cantidad de Canvas.

Tienda a media pantalla, ¿es un modal?
Sí. Especifica si lo subyacente es táctil y si la lógica de combate se pausa.

¿Conflictos con la UX de «menos es más»?
La tabla de jerarquía es una regla de producto, no estética; P3 puede reabrirse para eventos mediante flags de la máquina de estados.

¿Barras sobre la cabeza en world-space en 3D?
Son información de combate, gestionadas con L1; Las reglas de orden en world-space se alinean con números de daño flotantes y Safe Area.