Sviluppo di giochi in un unico flusso: VberAI porta una UI fino a Unity

L’interfaccia di un gioco si spezza spesso tra gli strumenti. L’immagine sta in un programma, il ritaglio in un altro, e dopo l’import la gerarchia va ricostruita. Questo percorso usa un menu principale gotico scuro per mostrare quattro passi di VberAI Studio (non è Google AI Studio): generazione dell’immagine con IA, taglio sul posto, scrittura nel motore e un’anteprima del movimento.

Ingresso: VberAI Studio.

1. Partire da un menu principale già composto

La fonte è un menu già impaginato. Il personaggio sta a sinistra, STORY e ARENA a destra, e lo sfondo è una notte di luna. L’ingresso è una schermata intera, non un mucchio di icone sciolte.

Questo passo è la generazione dell’immagine. L’illustrazione e il menu entrano come una sola immagine. Il taglio, la scrittura e l’anteprima usano poi quella stessa immagine.

2. Tagliare sul posto e tenere lo sfondo

Dopo la separazione, pulsanti, personaggio e icone della valuta lasciano il loro posto. Resta solo lo sfondo notturno, senza interfaccia. Gli elementi si ritagliano sulle coordinate originali e lo sfondo si conserva a parte.

Esportare i PNG uno per uno in Photoshop fa perdere la posizione. Il taglio sul posto conserva posizione relativa e dimensioni. Dopo l’import non serve allineare i pezzi a mano sul mockup. I passi: taglio sul posto.

3. Engine MCP: scrivere nella scena Unity aperta

Le risorse tagliate passano poi nel motore. La demo apre il pannello Engine MCP. L’istruzione a schermo è la frase cinese 「把图层3写入当前 Unity 工程」. «图层3» è il nome del file di questo menu. Prima compare il riepilogo, poi cinque controlli:

• importare l’illustrazione generata
• rimettere al loro posto gli elementi tagliati
• estrarre uno sfondo pulito
• scrivere il personaggio nella scena
• controllare la scena aperta

Quando tutti e cinque passano, il pannello segnala che la scrittura è conclusa.

La destinazione è la scena Unity aperta. Il layout segue il taglio, invece di lasciare PNG senza nome in una cartella. Per collegare pulsanti e valori da Cursor si usa lo stesso Engine MCP. Installazione: installare Unity MCP.

4. Vedere il movimento sulla stessa schermata

L’anteprima usa i livelli appena tagliati. Lo sfondo è la notte estratta, il personaggio la stessa illustrazione, STORY e ARENA i pulsanti tagliati. Avanza e cala il bastone. Un incantesimo parte dalla punta e i pulsanti si accendono al loro posto.

La nuvoletta in alto a sinistra resta ferma. Non segue il personaggio. È un controllo fisso dell’interfaccia.

Le immagini ferme, una volta tagliate, possono tornare sullo stesso sfondo: un movimento da guardare e i pulsanti che si accendono al loro posto. La navigazione dei pulsanti e i valori numerici vanno ancora collegati in Unity, con Engine MCP o con uno script.

Quale lavoro manuale toglie ogni passo

Passo	Cosa si vede	Lavoro manuale sostituito
Generazione dell’immagine	Un menu gotico a schermo intero	Comporre un mockup da zero
Taglio sul posto	Gli elementi escono e resta solo lo sfondo	Esportare ogni pulsante come PNG in Photoshop
Engine MCP	I livelli entrano nella scena Unity aperta	Ricostruire la gerarchia dopo l’import
Anteprima del movimento	Lo stesso personaggio e gli stessi pulsanti si muovono sullo sfondo originale	Preparare una demo con altro materiale

Limiti

• La demo usa solo questo menu. La qualità del taglio dipende da quanto è nitida la fonte e da quanto sono leggibili i bordi dei controlli.
• Il pannello MCP mostra una scrittura conclusa e controlli superati. Navigazione e chiusura dei valori hanno ancora bisogno di logica nella scena Unity.
• L’anteprima usa questa illustrazione e i pulsanti tagliati. Sono gli stessi livelli del menu sopra.

In breve

Una schermata può restare in un solo percorso: generare l’immagine, tagliarla sul posto, scriverla in Unity e vedere in anteprima quegli stessi livelli in movimento. Ingresso: AI Studio.