Développement de jeu de bout en bout : VberAI mène un écran d’UI jusqu’à Unity

L’interface d’un jeu se coupe souvent entre les outils. L’image est dans un logiciel, le découpage dans un autre, et la hiérarchie est à refaire après l’import. Ce parcours prend un menu principal gothique sombre pour montrer quatre étapes dans VberAI Studio (à ne pas confondre avec Google AI Studio) : génération d’image par IA, découpage sur place, écriture dans le moteur, prévisualisation du mouvement.

Entrée : VberAI Studio.

1. Partir d’un menu principal déjà composé

La source est un menu déjà mis en page. Le personnage est à gauche, STORY et ARENA à droite, et une nuit de lune sert de fond. L’entrée est un écran entier, pas un tas d’icônes séparées.

Cette étape est la génération d’image. L’illustration et le menu entrent comme une seule image. Le découpage, l’écriture et la prévisualisation réutilisent ensuite cette même image.

2. Découper sur place et garder le fond

Après la séparation, les boutons, le personnage et les icônes de monnaie quittent leur place. Il ne reste que le fond de nuit, sans interface. Les éléments sont découpés selon les coordonnées d’origine, et le fond est conservé à part.

Exporter les PNG un par un dans Photoshop fait perdre la position. Le découpage sur place conserve la position relative et la taille. Après l’import, il n’est plus nécessaire d’aligner les pièces à la main sur la maquette. Les étapes : découpage sur place.

3. Engine MCP : écrire dans la scène Unity ouverte

Les éléments découpés passent ensuite dans le moteur. La démo ouvre le panneau Engine MCP. L’instruction à l’écran est la phrase chinoise 「把图层3写入当前 Unity 工程」. « 图层3 » est le nom de fichier de ce menu. Le résumé s’affiche d’abord, puis cinq contrôles :

• importer l’illustration générée
• replacer les éléments découpés
• extraire un fond propre
• écrire le personnage dans la scène
• vérifier la scène ouverte

Quand les cinq contrôles passent, le panneau indique que l’écriture est terminée.

La cible est la scène Unity ouverte. La mise en page suit le découpage, au lieu de déposer des PNG sans nom dans un dossier. Pour relier boutons et valeurs depuis Cursor, on utilise le même Engine MCP. Installation : installer Unity MCP.

4. Prévisualiser le mouvement sur le même écran

La prévisualisation reprend les calques qui viennent d’être découpés. Le fond est la nuit extraite, le personnage la même illustration, STORY et ARENA les boutons découpés. Elle avance et abat son bâton. Un sort part de la pointe, et les boutons s’allument à leur place.

La bulle de dialogue en haut à gauche reste en place. Elle ne suit pas le personnage. C’est un contrôle fixe de l’interface.

Les images figées découpées peuvent revenir sur le même fond : un mouvement à regarder, et les boutons qui s’allument à leur place. La navigation des boutons et les valeurs numériques doivent encore être reliées dans Unity, par Engine MCP ou par un script.

Ce que chaque étape retire du travail manuel

Étape	Ce qui apparaît	Travail manuel évité
Génération d’image	Un menu gothique plein écran	Monter une maquette à partir de rien
Découpage sur place	Les éléments partent, seul le fond reste	Exporter chaque bouton en PNG dans Photoshop
Engine MCP	Les calques entrent dans la scène Unity ouverte	Reconstruire la hiérarchie après l’import
Prévisualisation	Le même personnage et les mêmes boutons bougent sur le fond d’origine	Fabriquer une démo avec d’autres visuels

Limites

• La démo n’utilise que ce menu. La qualité du découpage dépend de la netteté de la source et de la lisibilité des bords des contrôles.
• Le panneau MCP montre une écriture terminée et des contrôles réussis. La navigation et le règlement des valeurs demandent encore de la logique dans la scène Unity.
• La prévisualisation utilise cette illustration et les boutons découpés. Ce sont les mêmes calques que le menu ci-dessus.

En bref

Un écran peut rester dans un seul parcours : générer l’image, la découper sur place, l’écrire dans Unity, puis prévisualiser ces mêmes calques en mouvement. Entrée : AI Studio.