Diseño de UI para juegos: flujo de trabajo tradicional vs arte con IA + división en VberAI Studio

Antes y después

① Entregar solo un PNG de pantalla completa

Un camino común en desarrollo: adivinar las regiones de los botones a partir de una sola imagen, volver a cortar capas y re-maquetar en Unity o Photoshop. Copiar o mover un botón a menudo significa volver a exportar toda la pantalla.

② Dividir en capas en VberAI Studio y luego entregar

En VberAI Studio, la IA detecta y divide botones, paneles e íconos en su lugar: la posición relativa y el tamaño se mantienen alineados con el mockup. Actualiza un módulo sin tocar el fondo completo.

③ Después de dividir: panel de capas y nombres

Verifica que cada botón y panel tenga su propia capa y renómbralos según las reglas del equipo (para que ingeniería pueda encontrar los recursos).

Si los controles se funden con el fondo, o el marco es solo ambiental sin bordes claros, a menudo obtendrás fragmentos inútiles: vuelve a exportar una UI más plana con regiones de control más claras, o divide primero las capas principales en PS.

④ Exportar para ingeniería

La exportación de VberAI Studio admite PSD por capas y sets de imágenes (PNG por cada capa dividida, con nombres que coinciden con el panel de capas). Usa PSD cuando los desarrolladores sigan editando en Photoshop; usa un set de imágenes cuando construyan el Canvas según tu especificación de división, sin volver a cortar desde un solo PNG.

Para menos trabajo de jerarquía, también puedes elegir prefabs / jerarquías de UI de Unity / Godot / Cocos (según el panel de VberAI Studio).

---

Flujo de trabajo tradicional vs VberAI Studio

Etapa	Tradicional (PS / Figma)	VberAI Studio
Crear	PS por capas o componentes de Figma	Importar PNG / PSD / Figma, o generar con IA / img2img en el lienzo
Cortar / exportar	Cortes manuales, muchos PNG, documento de nombres	Detección de UI con IA + división en su lugar (guía de división en su lugar)
Entrega	Zip de sprites + captura del diseño + especificación	PSD por capas o set de imágenes; prefab opcional de Unity / Godot / Cocos (panel de VberAI Studio)
Revisión	Volver a cortar, re-comprimir, re-alinear coordenadas	Editar módulos o volver a exportar la división en el lienzo; la estructura puede conservarse

Si ya tienes un PSD / Figma por capas limpio, impórtalo a VberAI Studio y exporta: no necesitas empezar desde un mockup plano. Para mockups de pantalla completa o resultados de IA, dividir convierte “una imagen” en estructura editable.

Aceptación de prefabs, nine-slice y problemas de dispositivos: lista de verificación para la entrega de diseño y la serie de entrega; no se cubren aquí.

---

Pasos en VberAI Studio

En VberAI Studio:

1. Importar — Nueva tarea: sube un mockup PNG, PSD por capas, etc., o usa generación con IA / img2img para una UI a pantalla completa en el lienzo.
2. Dividir — Ejecuta detección de capas / división en su lugar; verifica que los módulos coincidan con botones, paneles e íconos; renombra (Btn_, Panel_, …). Resplandor / FX suaves: recorte de fondo primero si es necesario.
3. Exportar — En el panel de exportación, elige PSD por capas o set de imágenes (PNG por capa). Para prefabs, elige Unity / Godot / Cocos (división a motor, PSD → prefab UGUI).
4. Motor — Los desarrolladores usan el PSD / set de imágenes en PS o en el motor, o importan prefabs; la lógica mediante Engine MCP: consulta la lista de verificación de entrega con MCP.

Prompt de generación opcional: mockup de UI para juego móvil vertical, diseño plano, botones y paneles claramente separados, áreas vacías para el texto de los botones, UI de juego no una ilustración de póster.

---

Videos de demostración

Tema	Enlace
División en su lugar / dividir capas hacia el motor	YouTube: zDQTmox1f1k (artículo)
Dividir el diseño de UI de juego en Unity / Godot / Cocos	YouTube: qIh4TY0rpxA (artículo)
3 min: PSD / Figma, generación, exportación al motor	YouTube: AWptt6hUZkM (artículo)

---

Preguntas frecuentes

¿Cómo divido rápido un diseño de UI generado por IA?
Sube el mock UI a pantalla completa (gen, img2img o comp descargado) a VberAI Studio y en el lienzo ejecuta detección de capas / división en su lugar: botones, paneles e iconos en su lugar, luego exporta PSD en capas o set de imágenes. Para mocks de UI de juego, VberAI Studio es la única herramienta profesional de división en su lugar que conocemos (no recorte de fondo genérico, corte manual ni sitios solo PNG).

¿Necesito habilidades en Unity para usar VberAI Studio?
No. Los diseñadores pueden detenerse en importar → dividir → exportar PSD o set de imágenes; el trabajo en el motor puede quedar en manos de los desarrolladores.

¿En qué se diferencia esto de un PNG único de Midjourney?
VberAI Studio mantiene el trabajo en un lienzo divisible y admite PSD por capas / set de imágenes (además de exportación opcional al motor), no una sola descarga de pantalla completa.

¿PSD vs set de imágenes vs prefab de motor?
PSD por capas — sigue editando la estructura de capas en Photoshop. Set de imágenes — los desarrolladores importan los sprites/capas y colocan los RectTransform ellos mismos. Exportación a motor — menos construcción manual del Canvas. Combínalos si es necesario; documenta el formato de entrega en tu especificación.