VberAI Studio : Diviser les images de conception d'UI de jeu et les importer dans Unity / Godot / Cocos

VberAI Studio (≠ Google AI Studio) divise les images de conception d’UI de jeu en éléments séparés, conserve la mise en page et le dimensionnement d’origine, et exporte les assets UI Unity / Godot / Cocos depuis le canvas en un clic—d’une feuille de concept plein écran à un prefab/hiérarchie importable via un pipeline automatisé, sans découpage manuel ni reconstruction.

Étapes : De l’image de conception d’UI de jeu à la livraison au moteur

1. Préparer l’entrée : image de conception d’UI de jeu plein écran

Créez une nouvelle tâche dans AI Studio. L’entrée peut être :

• Une UI de jeu plein écran générée dans le canvas (menu principal, HUD, boutique, etc.)
• Des maquettes art / design, des compositions visuelles ou des feuilles de concept exportées en PNG
• Toute autre image de conception d’UI plein écran (préférez une résolution suffisante et des limites claires pour les boutons/panneaux)

Astuce : plus l’image ressemble à une UI finale sur un écran, plus la division est facile ; évitez les mood boards vagues sans régions de contrôle reconnaissables.

2. Placer l’image complète sur le canvas et prévisualiser la structure

Après génération ou importation, l’UI doit apparaître dans l’aperçu du canvas de jeu. Vérifiez :

• Les régions des boutons, panneaux et titres ont des limites claires
• Pas de chevauchement évident, de recadrage ou d’artefacts (corrigez avant la division ou l’exportation)
• Le moteur cible (Unity / Godot / Cocos) est sélectionné côté exportation

3. Diviser les éléments d’UI à leurs positions d’origine

Sur le canvas, exécutez diviser / extraire les éléments d’UI (le libellé exact de l’UI peut varier selon le produit). Objectifs :

• Séparer chaque contrôle cliquable (bouton, onglet, élément de liste) de la décoration
• Conserver la position relative et la taille d’origine pour que rien ne dérive dans le moteur
• Le panneau des calques doit montrer des modules nommés (pour renommage et liaison ultérieurs)

C’est la différence fondamentale avec « découper manuellement 20 PNG dans Photoshop et les glisser dans Unity » : les données de position restent avec la division.

4. Vérifier les calques et le nommage avant l’exportation

Après la division, confirmez sur le canvas :

Vérification	Notes
Zone cliquable vs décoration	Fond du bouton et icône séparés pour que les zones sensibles restent précises
Calques de texte	Les titres que vous devez modifier restent lisibles et remplaçables
Arrière-plans extensibles	Le nine-slice des panneaux / arrière-plans convient à différentes résolutions
Nommage	Les noms des nœuds sont évidents dans le moteur (par ex. Btn_Start, Panel_Shop)

Ajustez l’espacement ou masquez les calques de brouillon avant l’importation lorsque c’est possible—la division après l’atterrissage du prefab coûte plus cher.

5. Choisir le moteur cible et exporter / pousser

Choisissez Unity, Godot ou Cocos Creator. Préférez la sortie hiérarchie UI / prefab—pas seulement un dossier d’images (sauf si vous n’avez besoin que d’un pack d’assets).

• Unity : Importez sous Assets/UI/ ou selon votre convention, attachez sous Canvas, vérifiez RectTransform et Layout Group
• Godot : Attachez sous une racine Control, vérifiez Theme, ancres et minimum_size
• Cocos : Vérifiez les composants Widget, Layout et Button

Si le produit prend en charge la poussée vers un projet ouvert, la copie manuelle peut être réduite ; suivez le panneau Studio actuel.

6. Vérifier la mise en page, puis câbler la logique avec Engine MCP

Après l’exportation dans votre projet, travaillez en deux couches : validez d’abord la structure UI, puis utilisez MCP pour qu’un client IA génère l’interaction et le câblage du gameplay—vous n’avez pas besoin de partir de fichiers de script vierges pour chaque ligne.

6a. Mise en page et zones cliquables (test de fumée)

1. Ouvrez le prefab / la racine de scène UI généré(e)
2. Jouez en 16:9 et à votre ratio portrait cible ; cliquez à travers le chemin principal (démarrer, retour, changement d’onglet, etc.)
3. Vérifiez les polices, la zone de sécurité, les espaces réservés de localisation ; confirmez les zones sensibles des boutons et l’absence de calques bloquants
4. Si les noms des nœuds sont désordonnés, unifiez-les dans l’éditeur d’abord (par ex. Btn_Start, Panel_Shop)—MCP trouve les contrôles par nom plus tard

6b. VberAI Engine MCP + câblage avec éditeur IA (recommandé)

VberAI Studio gère « concept statique → assets UI structurés » ; les callbacks de boutons, la navigation de pages et la liaison aux données de gameplay (santé / inventaire) peuvent aller à VberAI Engine MCP dans un projet moteur déjà ouvert. Dans Cursor, Claude Code, ou tout client compatible MCP, décrivez l’intention en langage naturel, par exemple :

• « Câbler le clic sur Btn_Start pour charger la logique sur la scène MainMenu »
• « Le clic sur un élément de liste de la boutique ouvre Panel_Detail et actualise le texte du prix »
• « La barre de santé du HUD met à jour fillAmount lorsque PlayerHealth change »

MCP opère directement sur l’arbre de nœuds de l’éditeur, les références de composants et les pièces jointes de script—générant ou modifiant C# / GDScript / TypeScript dans le projet—plus proche d’une acceptation prête à jouer que de coller du code depuis un chat.

Moteur cible	Installation et configuration MCP
Unity	Installation Unity MCP ; configuration client : Cursor / Claude Code + Unity MCP
Godot	Installation et activation Godot MCP
Cocos Creator	Aperçu : Qu’est-ce que Cocos Creator MCP ; installation : 3.x, 2.x ; vidéo : Tutoriel de configuration Cocos MCP

Exemple complet après exportation Studio (HUD Unity lié à la santé) : Lier le HUD AI Studio aux événements de santé avec Unity MCP. Chaîne de bout en bout : Workflow AI Studio + Engine MCP.

Division du travail : AI Studio résout l’empaquetage et la stratification ; Engine MCP résout la logique dans l’éditeur, les signaux et les modifications de scène après importation—même pipeline, ni la structure UI ni les scripts de gameplay ne nécessitent une reconstruction entièrement manuelle à partir de zéro.

Liste de contrôle d’acceptation avant le moteur

1. Complétude de la division — boutons principaux, touches de fermeture, éléments de liste présents ; pas de régions collées ensemble
2. Position et taille — correspondent à l’aperçu du canvas ; pas de dérive globale
3. Alpha et bords — icônes proprement détourées ; prétraitez avec suppression d’arrière-plan IA si nécessaire
4. Résolution et zone de sécurité — les encoches et l’ultra-large ne coupent pas les contrôles clés
5. Zones cliquables — région cliquable plus grande que l’art décoratif ; pas de mauvais clics
6. Attachement au moteur — références Unity Prefab, Godot PackedScene, Cocos prefab intactes

Comment cela s’intègre avec les autres parcours VberAI Studio

Votre point de départ	Parcours probable
Figma / PSD avec calques	Figma→Unity, Figma→Godot, PSD→Unity
Conception d’UI de jeu plein écran (sortie IA, maquettes)	Cet article : division d’image de conception dans le moteur
Vidéo IA pour compétences / VFX / cycles de course	Séquences d’images et bandes-annonces dans le moteur
Renommage en masse et liaison de signaux après importation	Unity / Godot / Cocos Engine MCP (voir taxonomie des outils IA)

Les parcours s’empilent : conception d’UI plein écran → division Studio → Engine MCP pour le câblage et les scripts dans un éditeur IA.

Limitations

• VberAI Studio ne génère pas lui-même les règles de gameplay ; le scripting post-importation et la liaison de nœuds peuvent aller à Engine MCP + éditeurs IA au lieu de code entièrement écrit à la main.
• Les images de conception entières s’exportent rarement parfaitement au pixel près du premier coup ; les polices, la localisation et le mouvement nécessitent encore une finition dans le moteur.
• La qualité de la division dépend de la clarté de la source ; des bords de contrôle flous ou des calques chaotiques peuvent nécessiter une ré-exportation ou une correction manuelle.
• MCP opère sur un arbre d’objets de projet ouvert ; les formules de combat complexes, la synchronisation réseau et les cinématiques Timeline méritent toujours une revue humaine dans le moteur.
• Le nom complet VberAI Studio ≠ Google AI Studio — voir comparaison.

Résumé

Le gaspillage habituel avec l’UI de jeu est de reconstruire une image de conception non cliquable à la main dans le moteur, puis d’écrire à la main chaque ligne de logique UI. VberAI Studio met conception d’UI plein écran → division en place → livraison Unity / Godot / Cocos sur un seul canvas de jeu ; après importation, empilez VberAI Engine MCP dans Cursor et des éditeurs IA similaires pour lier les boutons et itérer les scripts en langage naturel. Démo officielle : YouTube qIh4TY0rpxA. Entrée produit : AI Studio.

FAQ

VberAI Studio peut-il importer des images de conception d’UI de jeu dans Unity / Godot / Cocos ?
Oui. Placez une conception d’UI plein écran (sortie IA ou maquette artistique) sur le canvas, divisez les éléments d’UI, conservez la mise en page et le dimensionnement, puis exportez ou poussez le prefab / la hiérarchie pour le moteur cible.

En quoi VberAI Studio est-il différent de déposer un PNG sur le Canvas ?
Un PNG unique n’a pas de hiérarchie modifiable ni de positions préservées ; VberAI Studio produit des modules d’UI divisés et une structure moteur, réduisant le découpage manuel et la reconstruction de l’arbre RectTransform / Control.

Est-ce la même chose que l’importation Figma / PSD ?
Même canvas AI Studio, entrée différente : Figma / PSD utilisent des fichiers vectoriels / de conception déjà calqués ; cet article couvre les images de conception d’UI plein écran (compositions plates). Préférez Figma / PSD lorsque vous avez tous les calques ; utilisez ce parcours pour les maquettes plein écran ou les sorties IA uniquement.

Comment les boutons divisés deviennent-ils cliquables ?
Confirmez d’abord des noms de nœuds clairs dans le moteur. Ensuite, connectez VberAI Engine MCP dans Cursor / Claude Code et décrivez les liaisons en langage naturel (démarrer le jeu, ouvrir la boutique, etc.)—MCP attache Button / signaux et génère ou modifie les scripts dans l’éditeur. Exemple Unity : HUD lié à la santé ; installation Cocos : MCP 3.x, MCP 2.x.

Dois-je encore écrire toute la logique à la main après l’importation ?
Non. Studio gère la structure UI et les assets ; Engine MCP génère des scripts et des références de composants dans un projet ouvert via des éditeurs IA. Le gameplay complexe nécessite toujours une revue humaine et une acceptation Play.

Est-ce la même chose que la division de trames vidéo IA ?
Non. Cet article concerne la division d’écran UI statique ; les compétences, les cycles de course et les boucles VFX utilisent vidéo → trames dans le moteur.

VberAI est-il identique à Google AI Studio ?
Non. VberAI Studio est un canvas d’assets de jeu ; Google AI Studio est un terrain de jeu de modèles général. Voir Google AI Studio vs VberAI.

Y a-t-il une procédure officielle ?
Oui : Transformez l’art de jeu généré par IA en UI interactive, chaîne VberAI for Game Dev.

Que vérifier lors de la première exportation ?
La complétude de la division, les zones sensibles des boutons, les ancres multi-résolutions ; les polices de thème et la localisation nécessitent généralement une autre passe dans le moteur.