VberAI In-Place Slice: Importa imágenes de diseño de UI de juegos a Unity / Godot / Cocos con un clic

VberAI Studio (≠ Google AI Studio) admite corte en el lugar: divide una imagen de diseño de UI de juego a pantalla completa en elementos de UI separados, mantiene el diseño y el tamaño originales, y luego exporta a Unity / Godot / Cocos con un clic—sin cortar manualmente PNGs sueltos y reconstruir la jerarquía en el motor.

Corte tradicional vs. corte en el lugar

	Corte tradicional	Corte en el lugar de VberAI
Proceso	Seleccionar PNGs con recuadro → arrastrar al motor → reajustar posición y jerarquía	La IA detecta elementos de UI → divide en el lugar → exporta por motor
Salida	Principalmente imágenes sueltas	Módulos en capas + jerarquía de UI / prefabs importables
Datos de posición	A menudo se pierden después del corte; alinear manualmente en el motor	La posición y el tamaño relativos se mantienen con la división

Qué significa el corte en el lugar

1. En el lugar — Los botones, paneles, etc. divididos permanecen en sus coordenadas y tamaños relativos originales.
2. Cortar / dividir — La IA detecta botones, paneles, iconos, títulos y formularios como módulos con nombre y exportables.
3. Un clic al motor — Elige Unity / Godot / Cocos Creator y exporta la jerarquía de UI o prefabs (según el panel del Studio).

Cuando ya tienes capas divididas de Figma / PSD, importa y exporta al motor directamente—sin necesidad de corte en el lugar; consulta Figma→Unity y guías relacionadas. Usa este artículo solo para maquetas planas a pantalla completa o salida de IA de UI.

Pasos

1. Prepara una imagen de diseño de UI a pantalla completa

La entrada puede ser:

• Menú principal, HUD, tienda, etc. a pantalla completa generados en el lienzo
• Maquetas de arte / diseño exportadas como PNG
• Otras imágenes de diseño de UI a pantalla completa (preferiblemente con suficiente resolución y bordes de controles claros)

2. Divide los elementos de UI en el lugar

En el lienzo, ejecuta dividir / extraer:

• Separa los controles clicables de la decoración
• Mantén la posición y el tamaño relativos originales
• El panel de capas muestra nombres de módulos legibles (para renombrar y vincular)

3. Exporta al motor de destino con un clic

Elige Unity, Godot o Cocos Creator. Prefiere la salida de jerarquía de UI / prefab.

• Unity: Importa bajo Canvas; verifica RectTransform
• Godot: Adjunta bajo una raíz Control; verifica anclas y Theme
• Cocos: Verifica Widget, Layout y Button

4. Acepta en el motor

1. Abre el prefab / raíz de UI de escena generado
2. Reproduce en 16:9 y en tu proporción de retrato objetivo; haz clic a través de la ruta principal
3. Confirma que no hay desviación global, botones clicables y que no hay capas bloqueantes
4. Para el cableado de lógica, usa Engine MCP desde Cursor o clientes similares

Más detalles y cableado MCP: Divide imágenes de diseño de UI de juegos en el motor.

Limitaciones

• La primera exportación rara vez es perfecta a nivel de píxeles; las fuentes, la localización y el movimiento aún necesitan pulido en el motor.
• La calidad de la división depende de la claridad de la fuente; los bordes borrosos o las capas caóticas pueden requerir reexportación o corrección manual.
• El corte en el lugar empaqueta la estructura—no reemplaza los scripts de jugabilidad.
• VberAI Studio ≠ Google AI Studio — consulta la comparación.

Resumen

El desperdicio habitual en la entrega de UI de juegos es cortar manualmente una maqueta a pantalla completa y reconstruirla en el motor. VberAI Studio pone diseño a pantalla completa → corte en el lugar → Unity / Godot / Cocos en un solo lienzo. Producto: AI Studio.

Preguntas frecuentes

¿Qué es el corte en el lugar de VberAI? En VberAI Studio, la IA detecta elementos en una imagen de diseño de UI de juego a pantalla completa, los divide en sus posiciones originales, mantiene el diseño y el tamaño, y luego exporta al motor.

¿Puedo importar con un clic a Unity / Godot / Cocos? Sí—exporta o envía la jerarquía de UI / prefabs para el motor de destino (según la capacidad actual del Studio). Haz una prueba de humo en Play después de la importación.

¿En qué se diferencia de cortar PNGs manualmente? El corte manual a menudo produce imágenes sueltas sin semántica de diseño; el corte en el lugar genera módulos en capas y estructura de motor, reduciendo el trabajo de reconstrucción.

¿Es lo mismo que la importación de Figma / PSD? Mismo AI Studio, diferente entrada. Si Figma / PSD ya tiene capas divididas, importa el archivo de diseño y exporta al motor directamente—sin corte en el lugar; consulta Figma→Unity, PSD→Unity. Usa este artículo solo para composiciones planas a pantalla completa (sin capas).