Nine-Slice de UI en Juegos y Paneles Escalables: Marcas en Figma / PSD y QA de Sliced en Motores

Cuando un panel se estira más ancho, esquinas borrosas, textura central repetida o esquinas ovaladas normalmente significan que el nine-slice (9-slice / insets de cap) no se especificó en la entrega, o que el motor usa escala Simple en todo el sprite. Ajustar Image Type y los bordes en el Editor de Unity puede salvar una pantalla, pero la siguiente entrega de diseño lo sobrescribe—si los bordes no coinciden con la escala de exportación, se repiten los ciclos de retrabajo.

Los ejemplos a continuación se centran en Image de Unity UGUI (Sliced / Tiled). StyleBoxTexture de Godot y el nine-slice de sprites de Cocos se corresponden con las mismas ideas, incluido el padding de contenido. Anclas y Safe Area: checklist de motor + MCP punto 6. Padding de región de estiramiento con locales: desbordamiento de locales verificación de diseño 7.

El checklist de entrega de diseño punto 6 requiere regiones de nine-slice / estiramiento claras. Este artículo cubre cuándo hacer slice, marcas en Figma/PSD, aceptación en tres motores y ruta de canvas a pantalla completa, además de una tabla de correcciones.

Criterios de fallo (cualquiera = no aprobado): el arte de esquina se deforma al estirar; repetición no intencionada o costuras en la región de estiramiento; el radio de esquina cambia con el tamaño del panel; fondo escalable escalado junto con iconos/avatares fijos; la escala de exportación no coincide con los píxeles de borde del motor (huecos de 1px o bordes suaves).

---

Cuándo se requiere nine-slice vs estiramiento duro prohibido

Tipo de asset	Hacer	No hacer
Fondo de diálogo / panel de ajustes	Nine-slice + padding de contenido	Un solo sprite Simple a sangre completa
Contenedores de input / barra	Nine-slice o cap L/R + repetición central	Aplastar altura sin reglas de arte
Botones primarios (tamaño fijo)	Sprite fijo o nine-slice + ancho mínimo	Botón redondeado infinitamente ancho como un solo estiramiento
Iconos, avatares, marcos de habilidad	Tamaño fijo, sin nine-slice	Fusionar con el fondo del panel en una sola imagen estirada
Fondo a pantalla completa (sin caja enmarcada)	Imagen completa o estrategia de tile en la spec	Reutilizar bordes de panel en sangre completa

Regla: Si el ancho o la altura cambian con la resolución, el texto o el contenido de la lista y las esquinas deben mantener su forma → nine-slice o equivalente del motor. Controles de tamaño fijo → sprite fijo + restricciones de layout.

---

Marcas de entrega en Figma / PSD (lista de verificación)

#	Verificación	Estándar de aprobación
1	Capa de estiramiento separada de decoración / iconos / texto	Reskin del fondo del panel + slice; iconos no escalados con el fondo
2	Inset de borde / cap en px (cuatro lados)	Coincide con @1x o la escala de exportación del equipo en las notas de entrega
3	Escala de exportación fija (@1x/@2x o baseline 1080)	Ingeniería no adivina las matemáticas del borde
4	Radio de esquina fuera de la región de estiramiento o la spec permite esquinas no estirables	Sin aprobar “las esquinas se convierten en cápsulas”
5	Región de estiramiento apta para tile o sólida	Repetición central sin desalineación evidente
6	Nombres semánticos	p. ej. Panel_Shop_9s, Input_Field_9s
7	Multi-estado (normal / deshabilitado) mismo borde	Insets coinciden; solo cambia color/skin
8	Notas de slice de PSD o exportación de Figma con padding transparente	No contar la sombra en el borde salvo que la spec lo indique
9	Entregar con punto 5 de entrega estados de botón	No parchear estados faltantes con arte 9s incorrecto
10	El reskin de evento cambia solo el arte, borde sin cambios	Ver spec de reskin

Figma: coloca el inset de cap en la documentación del componente al usar frames redimensionables o plugins de slice. PSD: alinea los slices con PSD a Unity en 5 minutos.

---

Tres motores: componentes y aceptación

Ítem	Unity UGUI	Godot 4 Control	Cocos UI
Componente	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Origen del borde	Border del Sprite Editor (L/T/R/B px)	content_margin / patch	Insets de cap (LTRB)
Área de contenido	RectTransform + padding de hijos	MarginContainer + Theme	Padding de Widget / layout
Fallo típico	Mal uso de Simple; borde con escala incorrecta	Desajuste entre patch y tamaño de textura	La rotación del atlas rompe el inset
Aprobación	Al 150% / 200% de ancho: esquinas nítidas, centro limpio	Igual; la vista previa del Theme coincide con Play	Igual; verificación puntual en dispositivo con lista larga

Aceptación en el Editor de Unity (mapear a otros motores):

1. Establece el Image del Prefab en Sliced con bordes que coincidan con el diseño.
2. Arrastra el RectTransform del panel a los anchos mínimo y máximo de diseño.
3. Compara esquinas, bordes y centro con la captura de Figma/PSD.
4. Si el modo Play está bien → una pasada en dispositivo según el checklist pre-lanzamiento.

---

Concepto a pantalla completa: división de canvas y reexportación

Con solo arte a pantalla completa en PNG o IA, el borde no se puede inferir. Ruta: VberAI Studio (AI Studio, ≠ Google AI Studio) división in-place → marcar paneles escalables → exportar Prefab (determinista, no YAML de LLM).

Paso	Acción	Aceptación
1	Pantalla completa en el canvas; dividir Panel_* e iconos fijos	Jerarquía con nombres
2	Confirmar la intención de 9-slice del panel en el canvas o antes de exportar	Responsable del inset documentado
3	Exportar Prefab de Unity / Godot / Cocos	QA de Sliced según la tabla anterior
4	Tras reskin / locales, reexportación del árbol completo	Si la spec de borde no cambia, los insets no cambian

Figma/PSD en capas: prefiere Figma → Unity o PSD a UGUI, luego ajustes menores de borde en el motor—evita reexportar 20 PNG sueltos en cada evento.

---

Enrutamiento de correcciones

Síntoma	Causa probable	Acción	Responsable
Esquinas borrosas	Escala Simple en toda la imagen	Sliced + borde correcto; diseño añade marca de inset	Ingeniería + Diseño
Costura central / bloques repetidos	inset desviado 1–2px; desajuste de escala	Igualar px del diseño; reimportar sprite	Ingeniería
Esquinas estiradas ovaladas	El arte no debería usar nine-slice	Tamaño fijo o nuevo arte de esquina	Diseño
El borde cambia tras reskin	Nuevo tamaño de arte o padding	Bloquear tamaño de canvas en la spec de reskin; re-QA tras reskin	Diseño
El fondo de fila de lista se deforma	Fondo de fila estirado como panel completo	9s específico de fila o altura fija	Diseño
Falla solo en cierta resolución	Escala no entera del Canvas Scaler	Checklist de motor Anchor/Scaler	Ingeniería

Regla: Si el borde ≠ diseño → corrige primero las marcas o el sprite fuente, luego el Prefab. Correcciones solo en el Inspector sin actualizar la entrega → se pierden en la siguiente exportación.

---

vs entrega de “solo pack PNG”

Enfoque	Encaja	No encaja
Exportación manual + ingeniería rellena el borde	Pocos paneles, demo	Reskin frecuente, muchas pantallas
Figma/PSD + exportación estructurada de VberAI Studio	Multi-pantalla, multi-motor, eventos	Reemplazar marcas de inset y QA
Sliced temporal en el motor	Hotfix de una pantalla	Largo plazo sin fuente de diseño

Recomendado: marcas de inset en diseño → exportación estructurada de Prefab → Sliced en el Editor de Unity a dos anchos → MCP para lógica. Raycast y binding: checklist de motor + MCP.

---

Preguntas frecuentes

¿Los paneles redondeados pueden usar nine-slice?
Sí, pero los insets deben situarse en bordes rectos estirables; las esquinas permanecen en tiles de esquina no estirables. Si el radio de esquina crece con el tamaño del panel → fallo; corrige el arte o limita el tamaño máximo.

¿Las sombras cuentan en el borde?
Lo decide la spec del producto. Si la sombra no se estira, separa capas o marca el inset en el rect sólido sin el glow exterior.

¿Tiled vs Sliced?
Sliced para paneles enmarcados; Tiled (o arte central apto para tile) para textura central repetida. Escríbelo en la spec—no dejes que ingeniería lo adivine.

¿Slices separados para Godot / Cocos?
Una semántica de inset; cambia el objetivo de exportación vía exportación multi-motor de canvas y verifica patch/cap según la tabla.

¿VberAI Studio rellena bordes automáticamente?
Depende de la exportación y los assets; la aceptación siempre es Sliced/StyleBox en el motor. Sin inset en el diseño → ingeniería establece los bordes en el Editor y los registra en la spec.

¿VberAI Studio es lo mismo que Google AI Studio?
No. Ver comparación.