VberAI Studio: Game-UI-Designbilder aufteilen und in Unity / Godot / Cocos importieren

VberAI Studio (≠ Google AI Studio) teilt Game-UI-Designbilder in einzelne Elemente, behält das ursprüngliche Layout und die Größen bei und exportiert Unity / Godot / Cocos UI-Assets per Klick aus der Canvas – von einem Vollbild-Konzept bis zum importierbaren Prefab/Hierarchy über eine automatisierte Pipeline, ohne manuelles Zerschneiden und Neuaufbau.

Schritte: Vom Game-UI-Designbild zur Engine-Auslieferung

1. Eingabe vorbereiten: Vollbild-Game-UI-Designbild

Erstellen Sie eine neue Aufgabe in AI Studio. Die Eingabe kann sein:

• Ein Vollbild-Game-UI, das in der Canvas generiert wurde (Hauptmenü, HUD, Shop usw.)
• Art-/Design-Mockups, visuelle Entwürfe oder Konzeptblätter, die als PNG exportiert wurden
• Jedes andere Vollbild-UI-Designbild (bevorzugt mit ausreichender Auflösung und klaren Button-/Panel-Grenzen)

Tipp: Je näher das Bild einem finalen Ein-Screen-UI kommt, desto einfacher ist die Aufteilung; vermeiden Sie vage Moodboards ohne erkennbare Steuerelemente.

2. Vollbild auf Canvas platzieren und Struktur prüfen

Nach der Generierung oder dem Import sollte das UI in der Game-Canvas-Vorschau erscheinen. Prüfen Sie:

• Button-, Panel- und Titelbereiche haben klare Grenzen
• Keine offensichtlichen Überlappungen, Beschnitte oder Artefakte (vor dem Teilen oder Exportieren beheben)
• Ziel-Engine (Unity / Godot / Cocos) ist auf der Exportseite ausgewählt

3. UI-Elemente an ihren ursprünglichen Positionen aufteilen

Führen Sie auf der Canvas UI-Elemente teilen / extrahieren aus (genaue UI-Beschriftung kann je nach Produkt variieren). Ziele:

• Jedes klickbare Steuerelement (Button, Tab, Listenelement) von der Dekoration trennen
• Relative Position und Größe beibehalten, damit nichts in der Engine driftet
• Die Ebenen-Palette sollte benannte Module zeigen (für spätere Umbenennung und Bindung)

Dies ist der Kernunterschied zum „manuell 20 PNGs in Photoshop schneiden und in Unity ziehen“: Positionsdaten bleiben bei der Aufteilung erhalten.

4. Ebenen und Benennung vor dem Export prüfen

Nach der Aufteilung auf der Canvas bestätigen:

Prüfung	Hinweise
Trefferfläche vs. Dekoration	Button-Hintergrund und Symbol getrennt, damit Hotspots genau bleiben
Textebenen	Titel, die Sie bearbeiten möchten, bleiben lesbar und ersetzbar
Dehnbare Hintergründe	Panel-Nine-Slice / Hintergründe passen für verschiedene Auflösungen
Benennung	Knotennamen sind in der Engine offensichtlich (z. B. Btn_Start, Panel_Shop)

Passen Sie Abstände an oder blenden Sie Entwurfsebenen vor dem Import aus, wenn möglich – das Teilen nach dem Prefab-Landing kostet mehr.

5. Ziel-Engine wählen und exportieren / pushen

Wählen Sie Unity, Godot oder Cocos Creator. Bevorzugen Sie UI-Hierarchie / Prefab-Ausgabe – nicht nur einen losen Bildordner (es sei denn, Sie benötigen nur ein Asset-Paket).

• Unity: Unter Assets/UI/ oder Ihrer Konvention importieren, unter Canvas anhängen, RectTransform und Layout Group prüfen
• Godot: Unter einem Control-Root anhängen, Theme, Anker und minimum_size prüfen
• Cocos: Widget-, Layout- und Button-Komponenten prüfen

Wenn das Produkt Push in ein offenes Projekt unterstützt, kann das manuelle Kopieren reduziert werden; folgen Sie dem aktuellen Studio-Panel.

6. Layout verifizieren, dann Logik mit Engine MCP verdrahten

Nachdem der Export in Ihrem Projekt gelandet ist, arbeiten Sie auf zwei Ebenen: zuerst UI-Struktur validieren, dann MCP verwenden, damit ein AI-Client Interaktion und Gameplay-Verdrahtung generiert – Sie müssen nicht bei jedem Skript von leeren Dateien starten.

6a. Layout und Trefferflächen (Smoke-Test)

1. Öffnen Sie das generierte Prefab / die Szenen-UI-Root
2. Spielen Sie bei 16:9 und Ihrem Ziel-Hochformat; klicken Sie den Hauptpfad durch (Start, Zurück, Tab-Wechsel usw.)
3. Prüfen Sie Schriftarten, Safe Area, Lokalisierungs-Platzhalter; bestätigen Sie Button-Hotspots und keine blockierenden Ebenen
4. Wenn Knotennamen chaotisch sind, vereinheitlichen Sie zuerst im Editor (z. B. Btn_Start, Panel_Shop) – MCP findet Steuerelemente später über Namen

6b. VberAI Engine MCP + AI-Editor-Verdrahtung (empfohlen)

VberAI Studio übernimmt „statisches Konzept → strukturierte UI-Assets“; Button-Callbacks, Seiten-Navigation und Bindung an Gameplay-Daten wie Gesundheit / Inventar können an VberAI Engine MCP in einem bereits geöffneten Engine-Projekt gehen. In Cursor, Claude Code oder einem beliebigen MCP-fähigen Client beschreiben Sie die Absicht in natürlicher Sprache, zum Beispiel:

• „Btn_Start-Klick mit Lade-Logik auf Szene MainMenu verdrahten“
• „Shop-Listenelement-Klick öffnet Panel_Detail und aktualisiert Preistext“
• „HUD-Gesundheitsbalken aktualisiert fillAmount, wenn sich PlayerHealth ändert“

MCP bedient den Editor-Knotenbaum, Komponentenreferenzen und Skript-Anhänge direkt – generiert oder bearbeitet C# / GDScript / TypeScript im Projekt – näher an Play-ready-Abnahme als Code aus dem Chat einzufügen.

Ziel-Engine	MCP-Installation & Setup
Unity	Unity MCP installieren; Client-Setup: Cursor / Claude Code + Unity MCP
Godot	Godot MCP installieren & aktivieren
Cocos Creator	Übersicht: Was ist Cocos Creator MCP; Installation: 3.x, 2.x; Video: Cocos MCP Setup-Tutorial

Vollständiges Beispiel nach Studio-Export (Unity-HUD an Gesundheit gebunden): AI Studio HUD an Health-Events mit Unity MCP binden. End-to-End-Kette: AI Studio + Engine MCP Workflow.

Arbeitsteilung: AI Studio löst Verpackung und Ebenen; Engine MCP löst In-Editor-Logik, Signale und Szenen-Edits nach dem Import – gleiche Pipeline, weder UI-Struktur noch Gameplay-Skripte müssen komplett manuell von Null neu aufgebaut werden.

Abnahme-Checkliste vor der Engine

1. Vollständigkeit der Aufteilung – Hauptbuttons, Schließen-Tasten, Listenelemente vorhanden; keine zusammengeklebten Bereiche
2. Position und Größe – stimmen mit der Canvas-Vorschau überein; keine globale Drift
3. Alpha und Kanten – Symbole sauber freigestellt; bei Bedarf mit AI-Hintergrundentfernung vorverarbeiten
4. Auflösung und Safe Area – Notches und Ultrawide schneiden keine wichtigen Steuerelemente ab
5. Trefferflächen – klickbarer Bereich größer als dekorative Grafik; keine Fehlklicks
6. Engine-Anbindung – Unity-Prefab, Godot-PackedScene, Cocos-Prefab-Referenzen intakt

Wie dies zu anderen VberAI Studio-Pfaden passt

Ihr Ausgangspunkt	Wahrscheinlicher Pfad
Ebenen-Figma / PSD	Figma→Unity, Figma→Godot, PSD→Unity
Vollbild-Game-UI-Design (KI-Ausgabe, Mockups)	Dieser Artikel: Designbild in Engine aufteilen
KI-Video für Fähigkeiten / VFX / Laufzyklen	Sequenzframes und Trailer in Engine
Stapel-Umbenennung und Signal-Bindung nach Import	Unity / Godot / Cocos Engine MCP (siehe AI-Tool-Taxonomie)

Pfade stapeln sich: Vollbild-UI-Design → Studio-Aufteilung → Engine MCP für Verdrahtung und Skripte in einem AI-Editor.

Einschränkungen

• VberAI Studio generiert selbst keine Gameplay-Regeln; Skripterstellung und Knotenbindung nach dem Import können an Engine MCP + AI-Editoren gehen, statt alles von Hand zu coden.
• Komplette Designbilder exportieren selten beim ersten Versuch pixelgenau; Schriftarten, Lokalisierung und Bewegung benötigen weiterhin In-Engine-Politur.
• Aufteilungsqualität hängt von der Quellklarheit ab; unscharfe Steuerelementkanten oder chaotische Ebenen können einen erneuten Export oder manuelle Korrekturen erfordern.
• MCP bedient einen offenen Projektobjektbaum; komplexe Kampfformeln, Netz-Sync und Timeline-Zwischensequenzen verdienen weiterhin menschliche Überprüfung in der Engine.
• Vollständiger Name VberAI Studio ≠ Google AI Studio – siehe Vergleich.

Zusammenfassung

Die übliche Verschwendung bei Game-UI besteht darin, ein nicht klickbares Design-Vollbild von Hand in der Engine neu aufzubauen und dann jede Zeile UI-Logik von Hand zu schreiben. VberAI Studio bringt Vollbild-UI-Design → Aufteilung an Ort und Stelle → Unity / Godot / Cocos-Auslieferung auf eine Game-Canvas; nach dem Import stapeln Sie VberAI Engine MCP in Cursor und ähnlichen AI-Editoren, um Buttons zu binden und Skripte in natürlicher Sprache zu iterieren. Offizielle Demo: YouTube qIh4TY0rpxA. Produkteinstieg: AI Studio.

FAQ

Kann VberAI Studio Game-UI-Designbilder in Unity / Godot / Cocos importieren?
Ja. Platzieren Sie ein Vollbild-UI-Design (KI-Ausgabe oder Art-Mockup) auf der Canvas, teilen Sie UI-Elemente, behalten Sie Layout und Größe bei und exportieren oder pushen Sie Prefab / Hierarchie für die Ziel-Engine.

Wie unterscheidet sich VberAI Studio vom Ablegen eines PNG auf der Canvas?
Ein einzelnes PNG hat keine bearbeitbare Hierarchie oder erhaltene Positionen; VberAI Studio gibt aufgeteilte UI-Module und Engine-Struktur aus, was manuelles Zerschneiden und RectTransform / Control-Tree-Neuaufbau reduziert.

Ist das dasselbe wie Figma / PSD-Import?
Gleiche AI-Studio-Canvas, andere Eingabe: Figma / PSD verwenden bereits Ebenen-basierte Vektor-/Design-Dateien; dieser Artikel behandelt Vollbild-UI-Designbilder (flache Kompositionen). Bevorzugen Sie Figma / PSD, wenn Sie vollständige Ebenen haben; verwenden Sie diesen Pfad für Vollbild-Mockups oder nur KI-Ausgabe.

Wie werden aufgeteilte Buttons klickbar?
Bestätigen Sie zuerst klare Knotennamen in der Engine. Verbinden Sie dann VberAI Engine MCP in Cursor / Claude Code und beschreiben Sie Bindungen in natürlicher Sprache (Spiel starten, Shop öffnen usw.) – MCP hängt Button / Signale an und generiert oder bearbeitet Skripte im Editor. Unity-Beispiel: HUD an Gesundheit gebunden; Cocos-Installation: 3.x MCP, 2.x MCP.

Muss ich nach dem Import noch alle Logik von Hand schreiben?
Nein. Studio übernimmt UI-Struktur und Assets; Engine MCP generiert Skripte und Komponentenreferenzen in einem offenen Projekt über AI-Editoren. Komplexes Gameplay benötigt weiterhin menschliche Überprüfung und Play-Abnahme.

Ist das dasselbe wie KI-Video-Frame-Aufteilung?
Nein. Dieser Artikel behandelt statische UI-Bildschirmaufteilung; Fähigkeiten, Laufzyklen und VFX-Loops verwenden Video → Frames in Engine.

Ist VberAI dasselbe wie Google AI Studio?
Nein. VberAI Studio ist eine Game-Asset-Canvas; Google AI Studio ist ein allgemeiner Modell-Playground. Siehe Google AI Studio vs VberAI.

Gibt es eine offizielle Anleitung?
Ja: Turn AI-Generated Game Art into an Interactive UI, Kanal VberAI for Game Dev.

Was sollte beim ersten Export geprüft werden?
Vollständigkeit der Aufteilung, Button-Hotspots, Multi-Resolution-Anker; Theme-Schriftarten und Lokalisierung benötigen normalerweise einen weiteren Durchgang in der Engine.