Spieleentwicklung aus einer Hand: VberAI bringt ein UI-Bild bis in die Unity-Szene

Spieloberflächen reißen oft zwischen den Werkzeugen ab. Das Bild liegt in einem Programm, der Zuschnitt in einem anderen, und nach dem Import muss die Hierarchie neu aufgebaut werden. Dieser Durchgang nimmt ein dunkel-gotisches Hauptmenü und zeigt vier Schritte in VberAI Studio (nicht Google AI Studio): KI-Bilderzeugung, In-Place-Slice, Schreiben in die Engine und eine Bewegungsvorschau.

Einstieg: VberAI Studio.

1. Von einem fertigen Hauptmenü ausgehen

Die Vorlage ist ein bereits gesetztes Hauptmenü. Links steht die Figur, rechts liegen STORY, ARENA und weitere Einstiege, dahinter eine Mondnacht. Die Eingabe ist ein ganzer Bildschirm, kein Stapel loser Icons.

Dieser Schritt ist die KI-Bilderzeugung. Charakterzeichnung und Hauptmenü kommen als ein Bild in den Ablauf. Zuschnitt, Schreiben und Vorschau verwenden danach dasselbe Bild.

2. Vor Ort zerlegen und den Hintergrund behalten

Nach dem Split verlassen Schaltflächen, Figur und Währungsicons ihre Positionen. Übrig bleibt der mondhelle Hintergrund ohne UI. Die Elemente werden an den ursprünglichen Koordinaten ausgeschnitten, der Hintergrund bleibt für sich.

Wer in Photoshop PNG für PNG exportiert, verliert die Positionsdaten. Der In-Place-Slice behält relative Position und Größe. Nach dem Import müssen die Teile nicht von Hand am Mockup ausgerichtet werden. Die Schritte stehen unter In-Place-Slice.

3. Engine MCP: in die aktuelle Unity-Szene schreiben

Die geschnittenen Assets gehen als Nächstes in die Engine. Die Demo öffnet das Panel Engine MCP. Die Anweisung auf dem Bildschirm ist der chinesische Satz 「把图层3写入当前 Unity 工程」. „图层3“ ist der Dateiname dieses Hauptmenüs. Zuerst erscheint das Ergebnis, danach fünf Prüfungen:

• Die erzeugte Vorlage importieren
• Die geschnittenen Elemente zurücksetzen
• Einen sauberen Hintergrund extrahieren
• Die Figur in die Szene schreiben
• Die aktuelle Szene prüfen

Wenn alle fünf durch sind, meldet das Panel den Abschluss.

Ziel ist die aktuelle Unity-Szene. Das Layout folgt dem Slice, statt unbenannte PNGs in einen Ordner zu legen. Schaltflächen und Werte lassen sich aus Cursor über dasselbe Engine MCP weiter verdrahten. Installation: Unity MCP installieren.

4. Bewegung auf demselben Bildschirm prüfen

Die Vorschau nutzt die gerade geschnittenen Ebenen. Der Hintergrund ist die extrahierte Mondnacht, die Figur dieselbe Zeichnung, STORY und ARENA die geschnittenen Schaltflächen. Sie tritt vor und schwingt den Stab. Ein Zauber läuft von der Spitze, die Schaltflächen leuchten an ihrer Stelle auf.

Die Sprechblase oben links bleibt liegen. Sie folgt der Figur nicht. Sie ist ein festes UI-Element.

Geschnittene Standbilder können auf denselben Hintergrund zurück und werden zur Vorschau: Bewegung zum Ansehen, Schaltflächen, die an ihrem Platz aufleuchten. Sprünge und Zahlenwerte müssen in Unity noch über Engine MCP oder ein Skript verbunden werden.

Welche Handarbeit jeder Schritt ersetzt

Schritt	Was zu sehen ist	Ersetzte Handarbeit
KI-Bilderzeugung	Ein gotisches Hauptmenü im Vollbild	Ein Mockup von Grund auf setzen
In-Place-Slice	Elemente verlassen den Platz, nur der Hintergrund bleibt	Jede Schaltfläche in Photoshop als PNG exportieren
Engine MCP	Ebenen in der aktuellen Unity-Szene	Die Hierarchie nach dem Import neu aufbauen
Bewegungsvorschau	Dieselbe Figur und dieselben Schaltflächen bewegen sich auf dem Originalhintergrund	Eine eigene Demo aus anderem Bildmaterial bauen

Grenzen

• Die Demo verwendet nur dieses eine Hauptmenü. Die Slice-Qualität hängt davon ab, wie klar die Vorlage ist und ob die Kanten der Steuerelemente lesbar sind.
• Das MCP-Panel zeigt einen abgeschlossenen Schreibvorgang und bestandene Prüfungen. Navigation und Wertabrechnung brauchen noch Logik in der Unity-Szene.
• Die Bewegungsvorschau nutzt diese Zeichnung und die geschnittenen Schaltflächen. Es sind dieselben Ebenen wie im Hauptmenü oben.

Kurz

Ein Bildschirm kann in einem Ablauf bleiben: Bild erzeugen, vor Ort zerlegen, nach Unity schreiben und dieselben Ebenen in Bewegung prüfen. Einstieg: AI Studio.