Produktionsreife Game-UI in 3 Minuten mit AI Studio erstellen (Video-Anleitung)

Sehen Sie sich das offizielle Tutorial an

Video: Spieleentwickler, das müsst ihr euch ansehen 👀 auf dem VberAI-YouTube-Kanal

Aus der offiziellen Beschreibung:

Erstellen Sie in 3 Minuten eine produktionsreife Game-UI. Kein manuelles Slicing. Kein sich wiederholendes Setup. Keine verschwendeten Stunden. PSD & Figma importieren → Game-UI mit KI generieren → Assets automatisch aufteilen → Direkt nach Unity, Cocos & Godot exportieren.

Was die Demo zeigt

VberAI Studio (Kurzname: AI Studio) behandelt Designdateien als strukturierte Hierarchie, nicht als flache Bilder:

• Links: Ebenen-PSD / Figma
• Mitte: Canvas-Vorschau
• Rechts: Engine-bereiter Export für Unity, Godot oder Cocos Creator

Sie erhalten wiederverwendbare Prefabs / Control-Bäume – ideal für Menüs, HUDs und Shop-Shells, die sich in Ihrem Projekt wiederholen.

Wer sollte zuschauen

Rolle	Vorteil
Designer + Entwickler-Übergabe	Weniger Round-Trips beim Neuaufbau des Layouts in der Engine
Solo-Entwickler	Schnell einen spielbaren UI-Screen liefern
Multi-Engine-Studio	Eine Design-Gewohnheit, mehrere Export-Ziele

Schritt-für-Schritt-Anleitung

1. Designdatei vorbereiten

• Verwenden Sie eine ebenenbasierte PSD oder benannte Figma-Frames – keine einzelne zusammengeführte PNG
• Benennen Sie Gruppen klar (Btn_Start, Panel_HUD)
• Öffnen Sie VberAI Studio auf VberAI (AI Studio)

2. Importieren und prüfen

1. Neuen Import aus PSD oder Figma erstellen
2. Bestätigen Sie, dass die Ebenengruppen im Ebenenbedienfeld den UI-Blöcken entsprechen
3. Scratch-Frames ausblenden; offensichtliche Benennungsprobleme beheben

3. Vorschau und Export

• Überprüfen Sie Abstände und Überlagerungsreihenfolge auf der Canvas
• Ziel-Engine festlegen: Unity, Godot oder Cocos Creator
• UI-Hierarchie / Prefab-Ausgabe wählen – nicht nur Sprites
• Bevorzugen Sie TextMeshPro (Unity) oder die Textkomponente der Engine, wo verfügbar

4. In die Engine importieren

1. Importieren Sie das Paket in Ihren Team-Ordner (Assets/UI/ usw.)
2. Öffnen Sie das generierte Prefab; unter Canvas (Unity) oder Control-Root (Godot) einordnen
3. Testen Sie 16:9 und ein hohes Telefon-Seitenverhältnis

Wenn Sie auch Unity MCP oder Godot MCP verwenden, fordern Sie Ihren KI-Client auf, Knoten nach dem Import umzubenennen oder pressed-Signale zu verdrahten.

Wie dies in den VberAI-Stack passt

Produkt	Rolle
AI Studio	Design → Engine-UI-Struktur
Unity / Godot / Cocos MCP	Editor-Automatisierung nach dem Import
AI Super Matting	Sauberes Icon-Alpha vor dem Export

Das Layout bleibt in den Design-Tools; Verdrahtung und Verhalten bleiben in der Engine. Für einen tieferen Godot-Vergleich lesen Sie Figma zu Godot: Manuell vs. AI Studio.

FAQ

Deckt dieses Video die MCP-Einrichtung ab? Es konzentriert sich auf AI Studio. Für die Cocos-Creator-MCP-Einrichtung siehe So richten Sie Cocos Creator MCP ein (Video-Tutorial).

Welche Engines werden unterstützt? Die Videobeschreibung listet Unity, Cocos und Godot-Export auf.

Ist „3 Minuten“ realistisch? Für eine saubere, einseitige UI mit benannten Ebenen dauert der erste Import + Export oft Minuten – nicht Stunden manueller RectTransform-Arbeit. Themes, Schriftarten und Lokalisierung erfordern weiterhin einen Engine-Durchgang.

Offizielle Video-URL? https://www.youtube.com/watch?v=AWptt6hUZkM – Kanal @vber_ai.

Verwandte Anleitungen

• So importieren Sie PSD zu Unity-UI in 5 Minuten mit AI Studio
• Cocos Creator MCP einrichten (Video-Tutorial)

Abonnieren Sie VberAI auf YouTube, oder öffnen Sie VberAI Studio und probieren Sie denselben Export bei Ihrem nächsten Screen aus.