← Retour au blog

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.

Publié le
  • 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 :

  1. 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
  2. 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é » :

CoucheProduitRôle
Canvas → UI moteurAI StudioGé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 IAEngine 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 :

Regarder sur YouTube — Chemin 1 : UI match-3 chibi en langage naturel

Chemin 2 : Importer PSD / Figma / assets du projet (design existant)

  1. Importer des compositions en couches ou une UI existante
  2. Découpage IA en panneaux, éléments de liste, cadres de dialogue
  3. Bords durs (cheveux, lueurs, semi-transparence) via AI Super Matting si nécessaire, puis retour à Studio
  4. Composer et synchroniser / exporter vers Unity, Godot, ou Cocos Creator

Démo d’import et de découpage PSD / Figma :

Regarder sur YouTube — Chemin 2 : importer PSD / Figma, puis synchroniser vers le moteur

Ce que produit cette étape

ProduitNe produit pas
Hiérarchie UI montable, textures, structure prefab/scèneMachines 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 :

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 :

Regarder sur YouTube — Export UI Studio → Cursor + Godot MCP construit et débogue un match-3 chibi (sans code écrit à la main)

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.

  1. Délimitez le slice — par ex. « déplacement + un ennemi + un HUD » ou « un niveau de plateforme + redémarrage »
  2. Installez MCP et test de lecture seule — listez les racines de scène ; confirmez que l’IDE IA est connecté
  3. 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
  4. Avancez la logique via MCP — une préoccupation par invite : contrôle → dégâts → ennemi → conditions d’échec/quête
  5. Peaufinez l’UI si nécessaire — export Studio → MCP lie les boutons et les événements de valeur
  6. 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

ChangementPréférez
Ressenti, chiffres, IA, navigation, bugs de script, câblage de nœudsIDE IA → engine MCP
Visuels plein écran, reskin, découpage de calques, ré-export de prefabsAI 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.1 uniquement
  • 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.

D’autres guides qui pourraient vous intéresser