Área segura de la interfaz de juego y QA de dispositivos: orden de depuración y correcciones de Prefabs

El informe más común: la vista Game se ve bien, pero en un teléfono alto el HUD queda bajo el notch, o los botones parecen pulsables pero los toques fallan. El Área segura no es “ajustar el Anchor”—es política del Canvas raíz, fondo a sangre completa vs contenido con inset, y si el safeArea en tiempo de ejecución coincide con el canal.

clases de fallo, orden de depuración de Unity UGUI, reglas de corrección de Prefabs y advertencias de canal/mini-juego. Las marcas de zona segura del punto 7 del handoff de diseño se resumen en “qué debe entregar diseño”; el alcance de dispositivos del punto 1 de pre-lanzamiento se amplía aquí—no es una repetición del checklist de motor + MCP de Raycast / primer Play.

Godot / Cocos: Mapear a DisplayServer.get_display_safe_area() / widgets SafeArea del motor; mismo orden de pasos que Unity a continuación.

Criterios de fallo (cualquiera = no aprobado): interfaz legible principal o botones requeridos bajo oclusión del sistema (notch, indicador de inicio, esquinas redondeadas); desfase evidente entre visual y área de toque; Editor solo en 16:9 sin aspecto objetivo en dispositivo; comportamiento de Área segura distinto entre Dev y Release sin especificación.

---

Clasifica primero: recorte, desfase o solo fondo

Síntoma	Sospechoso primero	Acción de ingeniería
Recorte visual (texto/iconos en el notch)	Contenido sin inset; raíz tratada como pantalla completa	Verificar safeArea vs rects de contenido
Desfase de toque (se ve bien, falla)	Modo de escala del Canvas, múltiples Canvas, desajuste de cámara	Raycast del EventSystem + renderMode del Canvas
Fondo recortado, botones OK	Fondo a sangre completa por diseño, contenido con inset	No es un fallo si la especificación lo permite
Incorrecto tras rotación	Sin listener para cambio de orientación / safeArea	Recalcular inset al rotar
Solo compilación de un canal	El SDK cambia safeArea o resolución	Prueba de humo en esa compilación; no confiar solo en Android genérico

---

Unity UGUI: orden de depuración recomendado (6 pasos)

1. Bloquear la reproducción

Registrar dispositivo, SO, Dev/Release, orientación, resolución de la vista Game. Punto 5 de pre-lanzamiento: ejecutar el HUD principal en Dev y Release.

2. Registrar safeArea y resolución de referencia

Tras cargar la interfaz principal, registrar:

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

Lectura: safeArea menor que la pantalla → se requiere inset de contenido. En el Editor safeArea a menudo equivale a pantalla completa → no sustituye al dispositivo.

3. Raíz del Canvas y Canvas Scaler

Verificación	Error típico	Dirección de corrección
Render Mode raíz	Screen Space / Camera UI mezclados → desfase de raycast	Un solo modo para la interfaz
Canvas Scaler	Resolución de referencia ≠ línea base vertical del proyecto	Coincidir con el checklist de motor punto 1
Match width/height	Aspecto largo escala mal; widgets de borde se desplazan	Acordar Match con diseño/producción; corregir Prefab no solo Scene
Orden de múltiples Canvas	Los toques van a la capa equivocada	Alinear sortingOrder y objetivos de raycast

4. Capa: fondo a sangre completa vs contenido seguro

Jerarquía de Prefab sugerida:

Canvas
├── Background_FullBleed   (anchor completo, puede entrar en el notch, sin input)
└── SafeRoot               (componente Safe Area o padding guiado por safeArea)
    ├── HUD_Content
    └── Popups

Usar el Safe Area de Unity (o código del proyecto que ajuste offsetMin/Max desde Screen.safeArea). No estirar botones interactivos a pantalla completa sin inset.

Exportaciones de AI Studio con una sola capa plana: ver nine-slice / reexportación estructurada y canvas → Prefab.

5. Verificación puntual de toques en dispositivo

3–5 botones críticos en el flujo principal; comparar centro visual con el dedo. Desfase solo en un popup → revisar Canvas anidado o doble Scaler.

6. Confirmar Prefab en el repositorio

Los criterios de aprobación viven en el Prefab versionado, no en overrides de Scene de prueba (punto 6 de pre-lanzamiento). Tras cambios de Anchor, ejecutar prueba de humo de desbordamiento de idioma en idiomas de estrés.

---

Canal / mini-juego (ingeniería)

Escenario	Nota
App nativa	Screen.safeArea + dispositivos reales
Algunos mini-juegos / apps rápidas	safeArea / systemInfo del contenedor ≠ simulación del Editor
Cutouts de Android	cutout vs safeArea pueden diferir
PC / deck	safeArea a menudo pantalla completa

Patrón: ISafeAreaProvider (o equivalente); inyectar por plataforma—evitar #if en Prefabs de HUD.

---

Enrutamiento de correcciones

Síntoma	Causa probable	Acción	Responsable
Recorte en dispositivo, Editor OK	Sin SafeRoot / sin driver de safeArea	Capa de Prefab + Safe Area; reprobar en dispositivo	Ingeniería
Fondo OK, botones recortados	Botones bajo capa de sangrado	Mover a SafeRoot; reexportar capas desde AI Studio	Ingeniería + Diseño
Desfase de toque	Multi Canvas / cámara UI / Scaler anidado	Fusionar Canvas o unificar cámara de raycast	Ingeniería
Deriva al cambiar resolución	Solo anchors fijos	Corregir anchors; punto 6 de motor	Ingeniería
Diseño sin marco seguro	Falta punto 7 de handoff	Diseño añade referencias de notch/home; reexportar	Diseño
Exportación plana de AI Studio	BG + HUD no separados	División in-place y reexportar	Ingeniería + Diseño

---

Qué entrega diseño (secundario)

Entrega	Uso en ingeniería
Resolución objetivo + referencia segura (notch / barra de inicio)	Resolución de referencia y expectativas de inset
Capas nombradas a sangre completa vs HUD	Prefab Background_* / SafeRoot
Pestañas de borde dentro de zona segura o sangrado intencional	Estrategia de Anchor

Los diseñadores no necesitan escribir scripts—marcas claras reducen los px de inset adivinados.

---

Preguntas frecuentes

¿Basta con la resolución de iPhone en la vista Game?
Solo prueba de humo en Dev; el lanzamiento requiere dispositivos objetivo (punto 1 de pre-lanzamiento). El safeArea del Editor a menudo difiere.

¿Componente Safe Area vs offset manual?
Elección del equipo; el manual debe refrescarse ante cambios de safeArea/orientación—evitar lógica duplicada.

¿Corregir el recorte solo con Canvas Scaler?
El Scaler escala; el inset es aparte. El recorte es el rect de contenido; el Scaler es escala global.

¿Puede ayudar MCP/Cursor?
Bueno para renombrar Prefabs, adjuntar Safe Area, prueba de humo en Play—los números siguen viniendo de los logs del dispositivo. Checklist de motor + MCP.

¿Safe Area más desbordamiento de idioma?
Corregir primero el layout de SafeRoot, luego los idiomas de estrés—el inset reduce el ancho.

¿VberAI Studio vs Google AI Studio?
No. Ver comparación.