Découpage sur place VberAI : importez des images de conception d'UI de jeu dans Unity / Godot / Cocos en un clic

VberAI Studio (≠ Google AI Studio) prend en charge le découpage sur place : divisez une image de conception d’UI de jeu plein écran en éléments d’UI séparés, conservez la mise en page et le dimensionnement d’origine, puis exportez vers Unity / Godot / Cocos en un clic—sans découpage manuel de PNG et reconstruction de la hiérarchie dans le moteur.

Découpage traditionnel vs découpage sur place

	Découpage traditionnel	Découpage sur place VberAI
Processus	Sélection par boîte de PNG → glisser dans le moteur → réajuster la position et la hiérarchie	L’IA détecte les éléments d’UI → découpe sur place → exporte par moteur
Sortie	Principalement des images isolées	Modules en couches + hiérarchie d’UI / prefabs importables
Données de position	Souvent perdues après le découpage ; réalignement manuel dans le moteur	Position relative et taille conservées avec le découpage

Ce que signifie le découpage sur place

1. Sur place — Les boutons, panneaux, etc. découpés restent à leurs coordonnées et tailles relatives d’origine.
2. Découpage / division — L’IA détecte les boutons, panneaux, icônes, titres et formulaires en modules nommables et exportables.
3. Un clic dans le moteur — Choisissez Unity / Godot / Cocos Creator et exportez la hiérarchie d’UI ou les prefabs (selon le panneau du Studio).

Lorsque vous avez déjà des calques Figma / PSD séparés, importez et exportez directement vers le moteur—aucune étape de découpage sur place n’est nécessaire ; voir Figma→Unity et les guides associés. Utilisez cet article uniquement pour les maquettes plein écran plates ou les sorties d’IA d’UI.

Étapes

1. Préparez une image de conception d’UI de jeu plein écran

L’entrée peut être :

• Menu principal plein écran, HUD, boutique, etc. généré sur le canevas
• Maquettes artistiques / de conception exportées en PNG
• Autres images de conception d’UI plein écran (préférez une résolution suffisante et des bords de contrôle clairs)

2. Découpez les éléments d’UI sur place

Sur le canevas, exécutez la division / l’extraction :

• Séparez les contrôles cliquables de la décoration
• Conservez la position relative et la taille d’origine
• Le panneau des calques affiche des noms de modules lisibles (pour renommer et lier)

3. Exportez vers le moteur cible en un clic

Choisissez Unity, Godot ou Cocos Creator. Préférez la sortie hiérarchie d’UI / prefab.

• Unity : Importez sous Canvas ; vérifiez RectTransform
• Godot : Attachez sous une racine Control ; vérifiez les ancres et le thème
• Cocos : Vérifiez Widget, Layout et Button

4. Acceptez dans le moteur

1. Ouvrez le prefab / la racine d’UI de scène généré(e)
2. Jouez en 16:9 et dans votre ratio portrait cible ; cliquez à travers le chemin principal
3. Confirmez l’absence de dérive globale, les boutons cliquables et l’absence de calques bloquants
4. Pour le câblage logique, utilisez Engine MCP depuis Cursor ou des clients similaires

Plus de détails et câblage MCP : Divisez les images de conception d’UI de jeu dans le moteur.

Limitations

• La première exportation est rarement parfaite au pixel près ; les polices, la localisation et le mouvement nécessitent encore un polissage dans le moteur.
• La qualité du découpage dépend de la clarté de la source ; des bords flous ou des calques chaotiques peuvent nécessiter une réexportation ou une correction manuelle.
• Le découpage sur place emballe la structure—il ne remplace pas les scripts de gameplay.
• VberAI Studio ≠ Google AI Studio — voir comparaison.

Résumé

Le gaspillage habituel dans la remise d’UI de jeu est le découpage manuel d’une maquette plein écran et sa reconstruction dans le moteur. VberAI Studio place conception plein écran → découpage sur place → Unity / Godot / Cocos sur un seul canevas. Produit : AI Studio.

FAQ

Qu’est-ce que le découpage sur place VberAI ? Dans VberAI Studio, l’IA détecte les éléments sur une image de conception d’UI de jeu plein écran, les découpe à leurs positions d’origine, conserve la mise en page et le dimensionnement, puis exporte vers le moteur.

Puis-je importer en un clic dans Unity / Godot / Cocos ? Oui—exportez ou poussez la hiérarchie d’UI / les prefabs pour le moteur cible (selon les capacités actuelles du Studio). Effectuez un test de fumée en mode Lecture après l’importation.

En quoi cela diffère-t-il du découpage manuel de PNG ? Le découpage manuel produit souvent des images isolées sans sémantique de mise en page ; le découpage sur place génère des modules en couches et une structure de moteur, réduisant le travail de reconstruction.

Est-ce la même chose que l’importation Figma / PSD ? Même AI Studio, entrée différente. Si Figma / PSD a déjà des calques séparés, importez le fichier de conception et exportez directement vers le moteur—sans découpage sur place ; voir Figma→Unity, PSD→Unity. Utilisez cet article uniquement pour les compositions plein écran plates (sans calques).