Nine-Slice d'interface de jeu et panneaux extensibles : repères Figma / PSD et QA des découpes moteur

Lorsqu’un panneau est étiré en largeur, des coins flous, une texture centrale qui se répète ou des coins ovales signifient généralement qu’un nine-slice (9-slice / marges de découpe) n’a pas été spécifié à la livraison, ou que le moteur utilise l’échelle Simple sur tout le sprite. Ajuster Image Type et les bordures dans l’éditeur Unity peut sauver un écran, mais la prochaine livraison de design l’écrase—si les bordures ne correspondent pas à l’échelle d’export, les boucles de reprise s’enchaînent.

Les exemples ci-dessous portent sur Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture et le nine-slice de sprite Cocos correspondent aux mêmes idées, y compris le padding de contenu. Ancres et Safe Area : checklist moteur + MCP point 6. Padding de zone étirée avec les locales : débordement de locale vérification design 7.

La checklist de livraison design point 6 exige des régions nine-slice / étirement claires. Cet article couvre quand découper, les repères Figma/PSD, l’acceptation sur trois moteurs et le chemin canvas plein écran, plus un tableau de correction.

Critères d’échec (un seul suffit = non validé) : l’art des coins se déforme à l’étirement ; répétition ou coutures non voulues dans la zone étirée ; rayon des coins qui change avec la taille du panneau ; fond extensible mis à l’échelle avec des icônes/avatars fixes ; échelle d’export qui ne correspond pas aux pixels de bordure moteur (écarts de 1px ou bords flous).

Quand le nine-slice est requis vs étirement dur interdit

Type d’asset	À faire	À ne pas faire
Fond de panneau dialogue / réglages	Nine-slice + padding de contenu	Un seul sprite Simple en plein cadre
Conteneurs de champ / barre	Nine-slice ou capuchon G/D + répétition centrale	Écraser la hauteur sans règles d’art
Boutons principaux (taille fixe)	Sprite fixe ou nine-slice + largeur min	Bouton arrondi infiniment large en un seul étirement
Icônes, avatars, cadres de compétence	Taille fixe, pas de nine-slice	Fusionner avec le fond de panneau en une image étirée
Fond plein écran (sans cadre)	Image complète ou stratégie de tuile dans la spec	Réutiliser les bordures de panneau en plein cadre

Règle : si la largeur ou la hauteur change selon la résolution, le texte ou le contenu de liste et que les coins doivent garder leur forme → nine-slice ou équivalent moteur. Contrôles à taille fixe → sprite fixe + contraintes de mise en page.

---

Repères de livraison Figma / PSD (liste à cocher)

#	Vérification	Standard de validation
1	Calque étirable séparé du décor / icônes / texte	Fond de panneau reskin + découpe ; icônes non mises à l’échelle avec le fond
2	Marge de bordure / découpe en px (quatre côtés)	Correspond au @1x ou à l’échelle d’export d’équipe dans les notes de livraison
3	Échelle d’export fixe (@1x/@2x ou base 1080)	L’ingénierie ne devine pas le calcul des bordures
4	Rayon des coins hors zone étirée ou spec autorisant des coins non étirés	Pas de validation « les coins deviennent des capsules »
5	Zone étirée compatible tuile ou unie	Répétition centrale sans désalignement évident
6	Noms sémantiques	ex. Panel_Shop_9s, Input_Field_9s
7	Multi-état (normal / désactivé) même bordure	Marges identiques ; seuls couleur/skin changent
8	Notes de découpe PSD ou d’export Figma padding transparent	Ne pas compter l’ombre dans la bordure sauf si la spec le dit
9	Livrer avec les états de bouton du point 5 de livraison	Ne pas corriger des états manquants avec un mauvais art 9s
10	Le reskin d’événement change l’art uniquement, bordure inchangée	Voir la spec reskin

Figma : placer la marge de découpe dans la doc du composant lors de l’usage de cadres redimensionnables ou de plugins de découpe. PSD : aligner les découpes avec PSD vers Unity en 5 minutes.

---

Trois moteurs : composants et acceptation

Élément	Unity UGUI	Godot 4 Control	Cocos UI
Composant	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Source des bordures	Sprite Editor Border (px G/H/D/B)	content_margin / patch	Marges de découpe (GHTB)
Zone de contenu	RectTransform + padding enfant	MarginContainer + Theme	Widget / padding de layout
Échec typique	Mauvais usage Simple ; bordure à mauvaise échelle	Incohérence patch vs taille de texture	Rotation d’atlas qui casse la marge
Réussite	À 150 % / 200 % de largeur : coins nets, centre propre	Idem ; aperçu Theme conforme au Play	Idem ; vérification sur appareil avec longue liste

Acceptation dans l’éditeur Unity (à transposer aux autres moteurs) :

1. Régler le Image du Prefab sur Sliced avec des bordures correspondant au design.
2. Étirer le RectTransform du panneau aux largeurs min et max du design.
3. Comparer coins, bords et centre à la capture Figma/PSD.
4. Si le mode Play est OK → une passe sur appareil selon la checklist pré-lancement.

---

Concept plein écran : découpage du canvas et ré-export

Avec uniquement un art plein écran PNG ou IA, la bordure ne peut pas être déduite. Chemin : VberAI Studio (AI Studio, ≠ Google AI Studio) découpage in-place → marquer les panneaux extensibles → export Prefab (déterministe, pas de YAML LLM).

Étape	Action	Acceptation
1	Plein écran sur le canvas ; séparer Panel_* et icônes fixes	Hiérarchie nommée
2	Confirmer l’intention 9-slice du panneau sur le canvas ou avant export	Responsable des marges documenté
3	Exporter le Prefab Unity / Godot / Cocos	QA Sliced selon le tableau ci-dessus
4	Après reskin / locales, ré-export de l’arbre complet	Si la spec de bordure est inchangée, marges inchangées

Figma/PSD en calques : préférer Figma → Unity ou PSD vers UGUI, puis ajustements mineurs de bordure dans le moteur—éviter de ré-exporter 20 PNG isolés à chaque événement.

---

Routage des corrections

Symptôme	Cause probable	Action	Responsable
Coins flous	Échelle Simple sur toute l’image	Sliced + bordure correcte ; le design ajoute le repère de marge	Ingénierie + Design
Couture centrale / blocs répétés	marge décalée de 1–2px ; incohérence d’échelle	Aligner les px du design ; réimporter le sprite	Ingénierie
Coins étirés en ovale	L’art ne devrait pas être en nine-slice	Taille fixe ou nouvel art de coin	Design
Bordure modifiée après reskin	Nouvelle taille d’art ou padding	Verrouiller la taille du canvas dans la spec de reskin ; re-QA après reskin	Design
Fond de ligne de liste déformé	Fond de ligne étiré comme un panneau complet	9s spécifique à la ligne ou hauteur fixe	Design
Échec uniquement à certaines résolutions	Échelle non entière du Canvas Scaler	Checklist moteur Anchor/Scaler	Ingénierie

Règle : si la bordure ≠ design → corriger d’abord les repères ou la source du sprite, puis le Prefab. Des corrections uniquement dans l’Inspector sans mise à jour de la livraison → perdues au prochain export.

---

vs livraison « pack PNG uniquement »

Approche	Adapté	Non adapté
Export manuel + ingénierie qui remplit les bordures	Peu de panneaux, démo	Reskin fréquent, nombreux écrans
Figma/PSD + export structuré VberAI Studio	Multi-écrans, multi-moteurs, événements	Remplacer les repères de marge et la QA
Sliced temporaire dans le moteur	Correctif rapide d’un écran	Long terme sans source design

Recommandé : repères de marge design → export Prefab structuré → Unity Editor Sliced à deux largeurs → MCP pour la logique. Raycast et binding : checklist moteur + MCP.

---

Questions fréquentes

Les panneaux arrondis peuvent-ils utiliser le nine-slice ?
Oui, mais les marges doivent se situer sur les bords droits étirables ; les coins restent dans des tuiles de coin non étirées. Si le rayon des coins grandit avec la taille du panneau → échec ; corriger l’art ou plafonner la taille max.

Les ombres comptent-elles dans la bordure ?
C’est la spec produit qui décide. Si l’ombre ne s’étire pas, séparer les calques ou marquer la marge sur le rect uni sans halo extérieur.

Tiled vs Sliced ?
Sliced pour les panneaux encadrés ; Tiled (ou art central compatible tuile) pour une texture centrale répétée. À écrire dans la spec—ne pas laisser l’ingénierie deviner.

Des découpes séparées pour Godot / Cocos ?
Une seule sémantique de marge ; changer la cible d’export via export canvas multi-moteurs et vérifier patch/cap selon le tableau.

VberAI Studio remplit-il automatiquement les bordures ?
Cela dépend de l’export et des assets ; l’acceptation reste toujours le Sliced/StyleBox du moteur. Pas de marge dans le design → l’ingénierie définit les bordures dans l’Editor et les consigne dans la spec.

VberAI Studio est-il identique à Google AI Studio ?
Non. Voir la comparaison.