Desarrollo de juegos de punta a punta: VberAI lleva una interfaz hasta Unity

La interfaz de un juego suele cortarse entre herramientas. La imagen está en un programa, el recorte en otro, y la jerarquía hay que rehacerla después de importar. Este recorrido usa un menú principal gótico oscuro para mostrar cuatro pasos de VberAI Studio (no es Google AI Studio): generación de imagen con IA, corte en el lugar, escritura en el motor y una vista previa del movimiento.

Entrada: VberAI Studio.

1. Partir de un menú principal ya compuesto

La fuente es un menú ya maquetado. El personaje queda a la izquierda, STORY y ARENA a la derecha, y el fondo es una noche de luna. La entrada es una pantalla completa, no un montón de iconos sueltos.

Este paso es la generación de imagen. La ilustración y el menú entran como una sola imagen. El corte, la escritura y la vista previa usan después esa misma imagen.

2. Cortar en el lugar y quedarse con el fondo

Tras la separación, los botones, el personaje y los iconos de moneda dejan su sitio. Solo queda el fondo de noche, sin interfaz. Los elementos se recortan con las coordenadas originales y el fondo se guarda aparte.

Exportar los PNG de uno en uno en Photoshop pierde la posición. El corte en el lugar conserva la posición relativa y el tamaño. Después de importar no hace falta alinear las piezas a mano contra la maqueta. Los pasos: corte en el lugar.

3. Engine MCP: escribir en la escena de Unity abierta

Los recursos recortados pasan después al motor. La demo abre el panel Engine MCP. La instrucción en pantalla es la frase en chino 「把图层3写入当前 Unity 工程」. «图层3» es el nombre de archivo de este menú. Primero aparece el resumen y luego cinco comprobaciones:

• importar la ilustración generada
• devolver los elementos recortados a su sitio
• extraer un fondo limpio
• escribir el personaje en la escena
• revisar la escena abierta

Cuando las cinco pasan, el panel indica que la escritura ha terminado.

El destino es la escena de Unity abierta. La maquetación sigue el corte, en lugar de dejar PNG sin nombre en una carpeta. Para seguir conectando botones y valores desde Cursor se usa el mismo Engine MCP. Instalación: instalar Unity MCP.

4. Previsualizar el movimiento en la misma pantalla

La vista previa usa las capas recién recortadas. El fondo es la noche extraída, el personaje la misma ilustración, y STORY y ARENA los botones recortados. Avanza y blande el bastón. Un hechizo sale de la punta y los botones se encienden en su sitio.

La burbuja de chat de la esquina superior izquierda se queda quieta. No sigue al personaje. Es un control fijo de la interfaz.

Las imágenes quietas recortadas pueden volver al mismo fondo: un movimiento que se ve y los botones encendiéndose en su sitio. La navegación de los botones y los valores numéricos todavía hay que conectarlos en Unity, con Engine MCP o con un script.

Qué trabajo manual quita cada paso

Paso	Lo que se ve	Trabajo manual que sustituye
Generación de imagen	Un menú gótico a pantalla completa	Montar una maqueta desde cero
Corte en el lugar	Los elementos se van y solo queda el fondo	Exportar cada botón como PNG en Photoshop
Engine MCP	Las capas entran en la escena de Unity abierta	Rehacer la jerarquía después de importar
Vista previa del movimiento	El mismo personaje y los mismos botones se mueven sobre el fondo original	Preparar una demo con otro material

Límites

• La demo usa solo este menú. La calidad del corte depende de lo nítida que sea la fuente y de si los bordes de los controles se leen bien.
• El panel MCP muestra una escritura terminada y unas comprobaciones superadas. La navegación y el cierre de valores siguen necesitando lógica en la escena de Unity.
• La vista previa usa esta ilustración y los botones recortados. Son las mismas capas que el menú de arriba.

Cierre

Una pantalla puede quedarse en un solo recorrido: generar la imagen, cortarla en el lugar, escribirla en Unity y previsualizar esas mismas capas en movimiento. Entrada: AI Studio.