VberAI In-Place Slice: Import Game UI Design Images into Unity / Godot / Cocos in One Click

VberAI Studio (≠ Google AI Studio) unterstützt In-Place-Slicing: Zerlegen Sie ein Vollbild-Game-UI-Designbild in einzelne UI-Elemente, behalten Sie das ursprüngliche Layout und die Größen bei und exportieren Sie dann mit einem Klick nach Unity / Godot / Cocos – ohne manuelles Ausschneiden von PNGs und Neuaufbau der Hierarchie in der Engine.

Traditionelles Slicing vs. In-Place-Slicing

	Traditionelles Slicing	VberAI In-Place-Slicing
Prozess	PNGs per Box-Auswahl ausschneiden → in die Engine ziehen → Position und Hierarchie neu justieren	KI erkennt UI-Elemente → zerlegt an Ort und Stelle → exportiert pro Engine
Ausgabe	Hauptsächlich lose Bilder	Geschichtete Module + importierbare UI-Hierarchie / Prefabs
Positionsdaten	Gehen beim Slicing oft verloren; manuelles Ausrichten in der Engine	Relative Position und Größe bleiben beim Zerlegen erhalten

Was In-Place-Slicing bedeutet

1. In-Place – Zerlegte Buttons, Panels usw. bleiben auf ihren ursprünglichen relativen Koordinaten und Größen.
2. Slice / Split – Die KI erkennt Buttons, Panels, Icons, Titel und Formulare als benennbare, exportierbare Module.
3. Mit einem Klick in die Engine – Wählen Sie Unity / Godot / Cocos Creator und exportieren Sie UI-Hierarchie oder Prefabs (gemäß Studio-Panel).

Wenn Sie bereits geteilte Figma-/PSD-Ebenen haben, importieren und exportieren Sie direkt in die Engine – kein In-Place-Slice-Schritt nötig; siehe Figma→Unity und verwandte Anleitungen. Verwenden Sie diesen Artikel nur für flache Vollbild-Mockups oder KI-UI-Ausgaben.

Schritte

1. Bereiten Sie ein Vollbild-UI-Designbild vor

Die Eingabe kann sein:

• Vollbild-Hauptmenü, HUD, Shop usw., auf der Leinwand generiert
• Kunst-/Design-Mockups, exportiert als PNG
• Andere Vollbild-UI-Designbilder (bevorzugt mit ausreichender Auflösung und klaren Bedienelementkanten)

2. UI-Elemente an Ort und Stelle zerlegen

Führen Sie auf der Leinwand den Split-/Extraktionsbefehl aus:

• Trennen Sie klickbare Bedienelemente von Deko
• Behalten Sie die ursprüngliche relative Position und Größe bei
• Das Ebenen-Panel zeigt lesbare Modulnamen (zum Umbenennen und Verknüpfen)

3. Mit einem Klick in die Ziel-Engine exportieren

Wählen Sie Unity, Godot oder Cocos Creator. Bevorzugen Sie die Ausgabe als UI-Hierarchie / Prefab.

• Unity: Unter Canvas importieren; RectTransform prüfen
• Godot: Unter einem Control-Root anhängen; Anker und Theme prüfen
• Cocos: Widget, Layout und Button prüfen

4. In der Engine abnehmen

1. Öffnen Sie die generierte Prefab-/Szenen-UI-Wurzel
2. Spielen Sie im 16:9-Format und Ihrem Ziel-Hochformat; klicken Sie den Hauptpfad durch
3. Bestätigen Sie: keine globale Drift, klickbare Buttons, keine blockierenden Ebenen
4. Für die Logik-Verdrahtung verwenden Sie Engine MCP von Cursor oder ähnlichen Clients

Weitere Details und MCP-Verdrahtung: Split game UI design images into the engine.

Einschränkungen

• Der erste Export ist selten pixelgenau; Schriftarten, Lokalisierung und Bewegung müssen noch in der Engine poliert werden.
• Die Zerlegequalität hängt von der Quellklarheit ab; unscharfe Kanten oder chaotische Ebenen können einen erneuten Export oder manuelle Korrekturen erfordern.
• In-Place-Slicing packt Struktur – es ersetzt keine Gameplay-Skripte.
• VberAI Studio ≠ Google AI Studio – siehe Vergleich.

Zusammenfassung

Die übliche Verschwendung bei der Game-UI-Übergabe ist das manuelle Ausschneiden eines Vollbild-Mockups und der Neuaufbau in der Engine. VberAI Studio bringt Vollbild-Design → In-Place-Slice → Unity / Godot / Cocos auf eine Leinwand. Produkt: AI Studio.

FAQ

Was ist VberAI In-Place-Slicing? In VberAI Studio erkennt die KI Elemente auf einem Vollbild-Game-UI-Designbild, zerlegt sie an ihren ursprünglichen Positionen, behält Layout und Größe bei und exportiert dann in die Engine.

Kann ich mit einem Klick in Unity / Godot / Cocos importieren? Ja – exportieren oder pushen Sie UI-Hierarchie / Prefabs für die Ziel-Engine (gemäß aktueller Studio-Funktion). Machen Sie nach dem Import einen Smoke-Test im Play-Modus.

Wie unterscheidet sich das vom manuellen Ausschneiden von PNGs? Manuelles Ausschneiden liefert oft lose Bilder ohne Layout-Semantik; In-Place-Slicing erzeugt geschichtete Module und Engine-Struktur und reduziert so die Neuaufbauarbeit.

Ist das dasselbe wie Figma-/PSD-Import? Gleiches AI Studio, andere Eingabe. Wenn Figma / PSD bereits geteilte Ebenen hat, importieren Sie die Designdatei und exportieren Sie direkt in die Engine – kein In-Place-Slice; siehe Figma→Unity, PSD→Unity. Verwenden Sie diesen Artikel nur für flache Vollbild-Kompositionen (ohne Ebenen).