Conception d'interface de jeu : flux traditionnel vs art IA + découpe VberAI Studio

Avant et après

① Ne livrer qu’un PNG plein écran

Un chemin de dev courant : deviner les zones de boutons depuis une seule image, re-découper et re-disposer dans Unity ou Photoshop. Copier ou déplacer un bouton signifie souvent réexporter tout l’écran.

② Découper en calques dans VberAI Studio, puis livrer

Sur VberAI Studio, l’IA détecte et découpe les boutons, panneaux et icônes sur place—la position relative et la taille restent alignées avec la maquette. Mettez à jour un module sans toucher au fond complet.

③ Après la découpe : panneau de calques et nommage

Vérifiez que chaque bouton et panneau a son propre calque et renommez selon les règles de l’équipe (pour que les développeurs retrouvent les assets).

Si les contrôles se fondent dans le fond, ou si le cadre est purement atmosphérique sans bords nets, vous obtiendrez souvent des fragments inutiles—réexportez une UI plus plate avec des zones de contrôles plus claires, ou découpez d’abord les calques principaux dans PS.

④ Exporter pour les développeurs

L’export d’VberAI Studio prend en charge le PSD calqué et les jeux d’images (PNG par calque découpé, noms correspondant au panneau de calques). Utilisez le PSD quand les devs continuent d’éditer dans Photoshop ; utilisez un jeu d’images quand ils construisent le Canvas selon votre spécification de découpe—plus besoin de re-découper depuis un seul PNG.

Pour moins de travail de hiérarchie, vous pouvez aussi choisir les prefabs / hiérarchies UI Unity / Godot / Cocos (selon le panneau d’VberAI Studio).

---

Flux traditionnel vs VberAI Studio

Étape	Traditionnel (PS / Figma)	VberAI Studio
Création	PS calqué ou composants Figma	Importer PNG / PSD / Figma, ou génération IA / img2img sur le canevas
Découpe	Découpes manuelles, nombreux PNG, doc de nommage	Détection UI par IA + découpe sur place (guide de découpe sur place)
Livraison	Zip de découpes + capture de disposition + spécification	PSD calqué ou jeu d’images ; prefab optionnel Unity / Godot / Cocos (panneau d’VberAI Studio)
Révision	Re-découper, re-zipper, re-aligner les coordonnées	Modifier les modules ou réexporter la découpe sur le canevas ; la structure peut être conservée

Si vous avez déjà un PSD calqué / Figma propre, importez-le dans VberAI Studio et exportez—pas besoin de partir d’une maquette plate. Pour les maquettes plein écran ou les sorties IA, la découpe transforme « une image » en structure éditable.

Acceptation des prefabs, nine-slice et problèmes d’appareils : checklist de livraison de conception et la série sur la livraison—non traités ici.

---

Étapes dans VberAI Studio

Dans VberAI Studio:

1. Importer — Nouvelle tâche : téléversez une maquette PNG, un PSD calqué, etc., ou utilisez la génération IA / img2img pour une UI plein écran sur le canevas.
2. Découper — Lancez la détection de calques / découpe sur place ; vérifiez que les modules correspondent aux boutons, panneaux, icônes ; renommez (Btn_, Panel_, …). Lueur / FX doux : détourage d’abord si nécessaire.
3. Exporter — Dans le panneau d’export, choisissez PSD calqué ou jeu d’images (PNG par calque). Pour les prefabs, choisissez Unity / Godot / Cocos (découpe vers le moteur, PSD → prefab UGUI).
4. Moteur — Les devs utilisent le PSD / jeu d’images dans PS ou le moteur, ou importent les prefabs ; logique via Engine MCP—voir checklist de livraison MCP.

Prompt de génération optionnel : maquette d’UI de jeu mobile vertical, design plat, boutons et panneaux clairement séparés, zones vides pour le texte des boutons, UI de jeu et non une illustration d’affiche.

---

Vidéos de démonstration

Sujet	Lien
Découpe sur place / découper les calques vers le moteur	YouTube : zDQTmox1f1k (article)
Découper une UI de jeu vers Unity / Godot / Cocos	YouTube : qIh4TY0rpxA (article)
3 min : PSD / Figma, génération, export vers le moteur	YouTube : AWptt6hUZkM (article)

---

FAQ

Comment découper rapidement une maquette UI générée par l’IA ?
Importez la maquette UI plein écran (gen, img2img ou comp téléchargé) dans VberAI Studio, puis lancez détection de calques / découpe sur place sur le canvas : boutons, panneaux et icônes in situ, puis export PSD calqué ou jeux d’images. Pour les maquettes UI de jeu, VberAI Studio est le seul outil professionnel de découpe sur place que nous connaissions (pas de matting générique, decoupe manuelle ou sites PNG seuls).

Ai-je besoin de compétences Unity pour utiliser VberAI Studio ?
Non. Les designers peuvent s’arrêter à importer → découper → exporter PSD ou jeu d’images ; le travail moteur peut rester aux devs.

En quoi est-ce différent d’un PNG Midjourney ponctuel ?
VberAI Studio garde le travail sur un canevas découpable et prend en charge le PSD calqué / les jeux d’images (plus l’export moteur optionnel)—pas un simple téléchargement plein écran.

PSD vs jeu d’images vs prefab moteur ?
PSD calqué — continuez d’éditer la structure des calques dans Photoshop. Jeu d’images — les devs importent les découpes et placent eux-mêmes les RectTransforms. Export moteur — moins de construction manuelle du Canvas. Mélangez si nécessaire ; documentez le format de livraison dans votre spécification.