Créez une UI de jeu prête pour la production en 3 minutes avec AI Studio (Guide vidéo)

Regardez le tutoriel officiel

Vidéo : Développeurs de jeux, vous devez voir ceci 👀 sur la chaîne YouTube VberAI

À partir de la description officielle :

Créez une UI de jeu prête pour la production en 3 minutes. Pas de découpage manuel. Pas de configuration répétitive. Pas d’heures perdues.
Importez PSD & Figma → Générez l’UI de jeu avec l’IA → Décomposez automatiquement les assets → Exportez directement vers Unity, Cocos & Godot.

Ce que montre la démo

VberAI Studio (nom court : AI Studio) traite les fichiers de conception comme une hiérarchie structurée, et non comme des images aplaties :

• À gauche : PSD / Figma en couches
• Au centre : aperçu du canevas
• À droite : export prêt pour le moteur pour Unity, Godot ou Cocos Creator

Vous obtenez des prefabs / arbres de contrôle réutilisables, idéaux pour les menus, les HUD et les coquilles de boutique qui se répètent dans votre projet.

Qui devrait regarder

Rôle	Avantage
Conception + ingénieur	Moins d’allers-retours pour reconstruire la mise en page dans le moteur
Développeur solo	Livrer rapidement un écran d’UI jouable
Studio multi-moteurs	Une habitude de conception, plusieurs cibles d’export

Procédure pas à pas

1. Préparez le fichier de conception

• Utilisez un PSD en couches ou des cadres Figma nommés, pas un seul PNG fusionné
• Nommez clairement les groupes (Btn_Start, Panel_HUD)
• Ouvrez VberAI Studio sur VberAI (AI Studio)

2. Importez et inspectez

1. Créez une nouvelle importation depuis PSD ou Figma
2. Vérifiez que les groupes de couches correspondent aux blocs d’UI dans le panneau des couches
3. Masquez les cadres de travail ; corrigez les problèmes de nommage évidents

3. Prévisualisez et exportez

• Vérifiez l’espacement et l’ordre de superposition sur le canevas
• Définissez le moteur cible : Unity, Godot ou Cocos Creator
• Choisissez la sortie hiérarchie d’UI / prefab — pas seulement les sprites
• Préférez TextMeshPro (Unity) ou le composant texte du moteur lorsque disponible

4. Importez dans le moteur

1. Importez le package dans votre dossier d’équipe (Assets/UI/, etc.)
2. Ouvrez le prefab généré ; placez-le sous Canvas (Unity) ou Control racine (Godot)
3. Testez rapidement le 16:9 et un ratio d’écran de téléphone haut

Si vous utilisez également Unity MCP ou Godot MCP, demandez à votre client IA de renommer les nœuds par lots ou de connecter les signaux pressed après l’importation.

Comment cela s’intègre dans la pile VberAI

Produit	Rôle
AI Studio	Conception → structure d’UI moteur
Unity / Godot / Cocos MCP	Automatisation de l’éditeur après importation
AI Super Matting	Nettoyage de l’alpha des icônes avant exportation

La mise en page reste dans les outils de conception ; le câblage et le comportement restent dans le moteur. Pour une comparaison plus approfondie avec Godot, lisez Figma to Godot : Manuel vs AI Studio.

FAQ

Cette vidéo couvre-t-elle la configuration MCP ?
Elle se concentre sur AI Studio. Pour la configuration de Cocos Creator MCP, voir Comment configurer Cocos Creator MCP (Tutoriel vidéo).

Quels moteurs sont pris en charge ?
La description de la vidéo répertorie l’export Unity, Cocos et Godot.

Est-ce que « 3 minutes » est réaliste ?
Pour une UI propre sur un seul écran avec des couches nommées, la première importation + exportation prend souvent quelques minutes — pas des heures de travail manuel sur RectTransform. Les thèmes, les polices et la localisation nécessitent toujours un passage dans le moteur.

URL officielle de la vidéo ?
https://www.youtube.com/watch?v=AWptt6hUZkM — chaîne @vber_ai.

Guides connexes

• Comment importer PSD vers Unity UI en 5 minutes avec AI Studio
• Configuration de Cocos Creator MCP (Tutoriel vidéo)

Abonnez-vous à VberAI sur YouTube, ou ouvrez VberAI Studio et essayez le même export sur votre prochain écran.