VberAI de bout en bout : AI Studio + Engine MCP pour un mini-jeu jouable
Générez ou importez l'UI dans AI Studio, puis pilotez la logique et le débogage via Cursor avec Godot, Unity ou Cocos MCP. Démo chibi match-3 incluse.
- VberAI
- AI Studio
- Unity MCP
- Godot MCP
- Cocos MCP
- game development workflow
Pour les indépendants et les petites équipes, le goulot d’étranglement n’est rarement pas « savoir écrire une ligne de code ». C’est généralement deux pistes qui avancent en parallèle :
- La structure UI et artistique n’arrive jamais proprement dans le moteur — découpage des maquettes, reconstruction des arborescences Canvas / Control, noms et hiérarchies incohérents
- Le gameplay et les scripts sont coûteux à itérer — rattacher des composants, traquer les erreurs, lancer le mode Play — des heures perdues dans des tâches répétitives de l’éditeur
VberAI répartit ces tâches en deux couches. Il ne prétend pas « un bouton, jeu terminé » :
| Couche | Produit | Rôle |
|---|---|---|
| Canvas → UI moteur | AI Studio | Générer l’UI de jeu à partir du langage naturel, ou importer PSD / Figma ; découper, détourer, éditer, puis synchroniser/exporter vers Unity, Godot, Cocos Creator |
| Moteur ↔ IDE IA | Engine MCP (Unity / Godot / Cocos) | Piloter l’éditeur ouvert depuis Cursor, Claude Code, Codex, et autres clients : logique, scripts, débogage, aperçu |
Le reste de ce guide est un parcours orienté production pour un slice jouable de 0 à 1 et pour les cycles de révision ultérieurs.
Pipeline de bout en bout
Objectif de gameplay / fichier de design / brief UI en langage naturel
│
├─→ AI Studio (générer · importer · découper · détourer · composer · exporter)
│ ↓
│ Hiérarchie UI / prefabs / assets de scène dans le projet moteur
│
└─→ IDE IA + Engine MCP (lire la scène · écrire des scripts · câbler · Play/déboguer)
↓
Slice de gameplay démontrable → retour à Studio ou continuer avec MCP selon le type de changement
Règles de base :
- Obtenir la structure UI correcte sur le canvas avant de câbler en profondeur dans le moteur
- Garder le comportement et les chiffres dans le moteur ; les humains valident les résultats de Play
- Commiter avant les grosses modifications ; garder le pont MCP en localhost uniquement
AI Studio : des assets d’interface prêts pour le moteur
AI Studio est destiné à l’UI / structure d’interface de jeu — pas une boîte de discussion générique, ni un remplaçant pour les machines d’état de combat dans le moteur.
Chemin 1 : UI en langage naturel (pas encore de fichier de design)
Aidez-moi à concevoir un jeu match-3 style chibi
Ensuite, vérifiez sur le canvas : cibles vs décoration, noms que les scripts peuvent lier, disposition sous les résolutions cibles. Démo ci-dessous :
Chemin 2 : Importer PSD / Figma / assets du projet (design existant)
- Importer des compositions en couches ou une UI existante
- Découpage IA en panneaux, éléments de liste, cadres de dialogue
- Bords durs (cheveux, lueurs, semi-transparence) via AI Super Matting si nécessaire, puis retour à Studio
- Composer et synchroniser / exporter vers Unity, Godot, ou Cocos Creator
Démo d’import et de découpage PSD / Figma :
Ce que produit cette étape
| Produit | Ne produit pas |
|---|---|
| Hiérarchie UI montable, textures, structure prefab/scène | Machines d’état de combat complètes, autorité réseau, systèmes de sauvegarde |
Exemple de transfert plus approfondi : Figma vers UI Unity.
Engine MCP : logique pilotée par dialogue et travail d’éditeur
MCP (Model Context Protocol) permet à un IDE IA d’appeler des outils locaux. Les plugins moteur de VberAI exposent l’éditeur ouvert au client : scènes/nœuds, scripts, aides au débogage et à l’aperçu — pas seulement coller des fichiers dans le dépôt.
Choisissez et installez selon le moteur :
- Unity MCP · guide d’installation
- Godot MCP (open source) · guide d’installation
- Cocos 3.x / 2.x · installation 3.x · installation 2.x
Comparaison : Godot MCP vs Unity MCP vs Cocos MCP.
Démo : après l’export Studio, Cursor + Godot MCP livre un match-3 chibi
Poursuivant le Chemin 1 : l’UI est déjà dans Godot depuis AI Studio. Connectez Godot MCP dans Cursor et pilotez l’éditeur en langage naturel—sans écrire une seule ligne de code à la main—pour implémenter le gameplay match-3 chibi et le déboguer jusqu’à un état jouable. Enregistrement ci-dessous :
Bonnes utilisations de MCP
- Slices de gameplay testables : contrôle du joueur, combat simple, états ennemis, câblage de quêtes
- Renommages par lots de la hiérarchie / arborescence de scène, attacher des composants, lier le HUD exporté de Studio aux événements
- Dans les limites du plugin : journaux, contexte de sélection, petites modifications réversibles puis Play
Mauvaises utilisations
- Autorité multijoueur non revue ou réécritures complètes du pipeline de rendu
- « Une invite, livrer un jeu commercial »
- Remplacer la direction artistique et les décisions de ressenti—celles-ci nécessitent toujours des humains en mode Play
Exemples concrets : RPG 3D avec Unity MCP, plateforme 2D avec Godot MCP.
0–1 : un parcours minimal
Visez un slice démontrable en quelques heures, pas une liste de fonctionnalités.
- Délimitez le slice — par ex. « déplacement + un ennemi + un HUD » ou « un niveau de plateforme + redémarrage »
- Installez MCP et test de lecture seule — listez les racines de scène ; confirmez que l’IDE IA est connecté
- UI placeholder ou gameplay d’abord — Labels/Sliders pendant que les systèmes sont inachevés ; ouvrez AI Studio lorsque les menus/HUD doivent avoir l’air finis
- Avancez la logique via MCP — une préoccupation par invite : contrôle → dégâts → ennemi → conditions d’échec/quête
- Peaufinez l’UI si nécessaire — export Studio → MCP lie les boutons et les événements de valeur
- Validation Play — ressenti, collisions, rafraîchissement UI ; si cela échoue, réduisez l’invite et réessayez
Itération rapide : choisissez la boucle selon le type de changement
| Changement | Préférez |
|---|---|
| Ressenti, chiffres, IA, navigation, bugs de script, câblage de nœuds | IDE IA → engine MCP |
| Visuels plein écran, reskin, découpage de calques, ré-export de prefabs | AI Studio (+ détourage si nécessaire) |
| Toujours bloqué sur « les maquettes n’entrent pas dans le moteur » | Structure Studio d’abord, puis MCP |
Le gain attendu est concret : moins de reconstruction d’UI à partir de zéro dans l’éditeur, et moins de clics répétitifs. Cela ne supprime pas le jugement de design ni les tests.
Checklist d’équipe
- Licences : Unity / Cocos MCP suivent l’activation officielle ; Godot MCP peut valider les habitudes via l’open source
- Sécurité : serveur MCP sur
127.0.0.1uniquement - Invites avec critères d’acceptation : chemins, points d’attache, ce que Play doit montrer en ~10 s, refactorisations hors périmètre
- Revue : toujours tester en Play les scripts générés et les modifications de nœuds—MCP réduit le coût opérationnel, pas l’assurance qualité
À retenir
L’histoire utile de VberAI est une répartition des douleurs fréquentes—pas « automatisation totale » :
- AI Studio : langage naturel ou PSD/Figma → structure UI pour Unity / Godot / Cocos
- Engine MCP : langage naturel dans un IDE IA → logique dans l’éditeur, scripts, débogage, aperçu
Utilisez la bonne boucle et les slices 0–1 ainsi que les cycles de révision avancent plus vite. Franchissez la frontière (écrire des machines d’état de combat sur le canvas, découper des packs UI entiers avec MCP) et vous ajoutez du travail. Adoptez une couche ou les deux selon le stade du projet—vous n’avez pas besoin de tous les produits dès le premier jour.
Poursuivre la lecture
D’autres guides qui pourraient vous intéresser
Comment connecter Claude Code à Unity MCP : installation et configuration
Installez Unity MCP et connectez-le via Claude CLI : import Package Manager, activation, démarrage du serveur MCP local (port 6589), commande CLI et vérification.
- unity
- mcp
- claude-code
- tutorial
VberAI Reskin UI en un clic : changez les thèmes du jeu sans déplacer la mise en page
VberAI Studio reskinne en un clic l'interface plein écran avec des préréglages ou des images de référence. La mise en page reste fixe. Exemples gothique→Halloween et cartoon→Noël.
- vberai
- ai-studio
- ui-reskin
- game-ui
Hiérarchie des informations du HUD mobile : quoi afficher en combat, dans le lobby et dans les modales
Visibilité et priorité du HUD selon l'état de jeu ; liens avec la Safe Area, les couches de texte flottant et l'empilement des modales — tableaux plus étapes Play et validation appareil.
- game-ui-design
- game-dev-ai
- ui-to-engine
- hud