Débordement de locale dans l'interface de jeu : marge de conception et QA d'export de traduction VberAI Studio

Une interface livrable échoue souvent en localisation pour une raison autre qu’une mauvaise traduction : la même mise en page ne peut pas accueillir le texte traduit. Le texte des boutons est coupé par RectTransform, les lignes de liste passent de deux lignes à une, les onglets restent serrés mais affichent des ellipses. Un test réussi dans l’éditeur Unity avec un texte anglais de remplacement masque le problème jusqu’à ce que l’allemand ou l’espagnol soit testé—ensuite les corrections touchent généralement à la fois la source de conception et les Prefabs.

Les exemples de mise en page et de découpe ci-dessous utilisent Unity UGUI (RectTransform, Prefab, etc.). Godot Control et Cocos UI utilisent les mêmes idées via les ancres, minimum_size et les prefabs ; la marge de conception et les critères de débordement s’appliquent de la même manière.

Les points 9 à 11 de la liste de contrôle pour la transmission de conception mentionnent déjà la marge pour la longueur du texte et les locales à structure identique. Cet article ajoute des plages de référence, une liste de vérification côté conception, la QA sur canevas après traduction VberAI Studio, et les critères d’échec avant livraison. La Safe Area sur appareil, les ressources de build Release et les vérifications associées restent dans la liste de contrôle UI avant livraison aux points 1, 5 et 6.

Critères d’échec (un seul suffit = non validé) : le texte lisible est coupé ou se chevauche ; ellipses ou défilement sans spécification produit ; le cadre visuel du bouton ne correspond pas à la zone cliquable ; l’écran du flux principal d’une locale nécessite une modification unique de la Hiérarchie pour afficher le texte complet (conflit avec les objectifs multilingues à structure identique).

Expansion du texte : plages de référence pour la conception

Les équipes de localisation estiment souvent la croissance par rapport à l’anglais ou à la langue source. Ce ne sont pas des SLA contractuels—définissez des seuils internes avec votre police et vos tailles d’interface. Utilisez le tableau pour choisir 2 à 3 locales de stress pour la revue de conception avant transmission, pas pour prédire les longueurs exactes des chaînes.

Relation	Schéma typique (boutons mobiles, libellés courts)	Action de conception
DE / ES / PT vs libellés chinois courts	Le même sens nécessite souvent ~+25 % à +40 % d’espace horizontal (composés, articles)	Inscrire la largeur minimale des boutons et la largeur fixe ou les règles de retour à la ligne des onglets dans la spécification
EN vs ZH sur le même bouton	Longueur similaire ou EN légèrement plus long—ne pas traiter la largeur EN comme validation pour toutes les locales	Vérifier ponctuellement DE ou ES en plus de EN
FR / IT	Moyen-long ; les sous-titres de liste nécessitent souvent deux lignes	Réserver une seconde ligne ou limiter la longueur des sous-titres
VI / ID	Écriture latine mais longueur de mots variable	Même niveau de stress que ES
AR	Longueur plus RTL et mise en forme des chiffres ; la mise en page en miroir est un sujet distinct	Cet article suppose une structure LTR identique ; le RTL nécessite sa propre conception ou des règles de miroir du moteur
JA / KO	Mélange pleine largeur : la largeur visuelle n’est pas linéaire avec le nombre de caractères	Mesurer la largeur de la chaîne rendue à la taille cible ; ne pas compter uniquement les caractères

Note moteur : l’Auto Size de TextMeshPro d’Unity ne réduit qu’entre les tailles de police min/max. Si le texte déborde encore à la taille minimale, c’est une capacité de mise en page, pas quelque chose à corriger en réduisant davantage—élargissez le conteneur ou modifiez le texte en conception.

---

12 vérifications de conception axées sur le débordement (liste à cocher)

En plus de la liste de transmission générale en 12 points, cochez celles-ci pour les locales :

#	Vérification	Critère de réussite
1	Le texte du bouton principal est un calque de texte, pas une typographie raster	Chaînes interchangeables ; lister la typographie non localisée dans la spécification
2	Le conteneur du bouton a une largeur minimale (Figma Auto Layout ou largeur fixe)	Les pseudo-locales DE/ES ou les vraies chaînes ne débordent pas
3	Onglet / barre inférieure : cellule fixe ou autorisation explicite de deux lignes	Pas de « semble sur une ligne, en réalité coupé »
4	Lignes de liste : titre et sous-titre sur des lignes séparées ; le sous-titre a un nombre max de lignes	Si deux lignes échouent, raccourcir le texte ou élargir la liste
5	Nombres, devise, minuteries et unités sont des champs séparés	Pas de phrase entière en raster ; les formats résident dans les tables de chaînes
6	Icône + texte : largeur du texte indépendante de l’icône	Un texte plus long n’écrase pas l’icône
7	Le padding du panneau nine-slice et le padding du contenu sont suffisants	Voir point 6 de la transmission ; la zone d’étirement ne colle pas au texte
8	Titre de dialogue, corps, boutons principal/secondaire sont des calques séparés	Spécification pour le retour à la ligne ou une taille de police d’un cran inférieure quand le titre est long
9	Les badges d’événement et textes courts près des pastilles rouges ont une longueur maximale	Le texte opérationnel hors limite revient pour édition—pas de compression d’urgence
10	Variantes multilingues : même structure de Frame, texte uniquement	Pas de contrôles spécifiques à une locale sauf si la spécification l’autorise
11	Les notes d’export listent quelles locales de stress ont été examinées	L’ingénierie / QA connaît la base d’acceptation
12	Le concept plein écran a encore du texte lisible	Séparer les calques de texte ou accepter le ré-export avant le moteur (découpe in-place)

L’Auto Layout de Figma (hug/fill, largeur min/max) et la troncature du texte doivent correspondre à l’accord d’ingénierie—si le produit interdit les ellipses, ne validez pas la maquette avec la seule troncature.

---

Parcours VberAI Studio : traduire → comparer → ré-export complet

VberAI Studio (AI Studio, ≠ Google AI Studio) traduction en un clic vise à modifier uniquement le texte lisible—la géométrie et la hiérarchie restent identiques. Cela s’aligne sur le travail moteur où seuls les CSV / tables de chaînes changent et la structure du Prefab reste—différentes étapes du même pipeline de localisation : AI Studio gère la conception visuelle multilingue et l’export ; TMP et les tables de chaînes gèrent le changement à l’exécution.

Ordre recommandé (identique à canevas → Prefab) :

Étape	Action	Acceptation
1	Verrouiller la mise en page principale sur le canevas ou Figma/PSD	Les calques de texte et les limites des boutons sont clairs
2	Lancer la traduction en un clic par écran (par lot de locale de livraison ou multilingue)	La hiérarchie des calques et les noms de nœuds sont inchangés
3	Sur le canevas, comparer les 2 à 3 locales au texte le plus long côte à côte ou par bascule (inclure DE ou ES + locale principale de livraison)	Pas de débordement, pas de chevauchement
4	Examiner les chaînes traduites automatiquement trop longues	Modifier le texte ou ajuster la taille dans la spécification ; validation humaine des mentions légales/marque
5	Ré-export complet du Prefab (Unity UGUI / Godot Control / Cocos UI)	Correspond au canevas ; ne pas modifier uniquement le Text dans le projet sans synchroniser la source de conception
6	Aligner les tables de chaînes avec le texte par défaut du Prefab dans le projet	Le changement de locale en mode Play correspond au canevas

Même mise en page, changements de thème uniquement : reskin. Après un reskin, si vous ajoutez de nouvelles locales de livraison, traduisez puis exportez quand même—évitez de modifier manuellement le Text dans la Scene pendant que les Prefabs du dépôt dérivent (point 6 avant livraison).

---

Acceptation avant livraison : lien avec la liste de contrôle de test

Le point 2 de la liste avant livraison exige chaque locale active sur l’accueil et les popups clés. Exécution suggérée :

Élément	Pratique
Priorité des locales	Avant la passe complète des locales, tester locale de stress + locale principale de livraison
Portée	HUD principal, popups à haute fréquence, écrans de texte long paiement/âge/légal
Environnement	Le changement de locale dans l’éditeur Unity ne remplace pas les vérifications de rendu des polices sur appareil (surtout le mélange CJK + latin)
Réussite	Pas de découpe, pas d’ellipse non déclarée, zones cliquables correspondant au visuel

Si les chaînes changent uniquement dans le moteur et que la mise en page est inchangée mais que le débordement persiste → traiter comme marge de conception insuffisante ou QA de locale de stress manquante sur le canevas, puis corriger selon le tableau ci-dessous—pas une réduction globale permanente de la police sur le Prefab.

---

Routage des corrections

Symptôme	Cause probable	Action	Responsable
Débordement d’un seul bouton ou libellé	largeur minimale trop petite ; typographie d’affichage utilisée comme corps	Élargir la conception ou raccourcir le texte ; passer en calque de texte	Conception
Nombreux débordements sur un écran	Maquette principale trop serrée ; pas de revue de locale de stress	Figma/canevas Auto Layout → re-traduction AI Studio → ré-export complet	Conception + Ingénierie
Éditeur Unity OK, une locale échoue sur appareil	Police de secours plus large ; DPI	Retester sur appareil ; ajuster le Font Asset / conteneur	Ingénierie
Liste sur deux lignes dans une seule locale	Traduction du sous-titre trop longue	La localisation raccourcit ou la hauteur de ligne augmente (ré-export si la structure change)	Localisation + Conception
Le changement à l’exécution échoue, canevas OK	Incohérence table de chaînes vs Prefab	Aligner la table et le Text par défaut ; vérifier les sauts de ligne	Ingénierie
Après reskin d’événement, la locale affiche encore l’ancienne mise en page	Le reskin n’a échangé que l’art, sans ré-export du Prefab	Après le reskin, relancer traduction + export par locale	Conception

Règle de décision : si la structure reste identique → privilégier le texte, la largeur minimale et la QA sur canevas VberAI Studio puis ré-exporter. Si vous devez ajouter/supprimer des nœuds ou changer le nombre d’onglets → changement de mise en page—mettre à jour la maquette principale et toutes les spécifications de locale ; ne pas corriger le Prefab d’une seule locale.

---

Répartition du travail vs « table de chaînes uniquement »

Approche	Convient	Ne convient pas
Table de chaînes moteur / TMP	Mise en page vérifiée ; changement de locale à l’exécution uniquement	Premier import UI sans QA de locale de stress
Traduction + export VberAI Studio	Piloté par la conception ; parité visuelle multilingue ; source Figma/PSD	Remplacer la revue de conformité légale ou de paiement
Édition manuelle du Text du Prefab	Correctif d’urgence pour une ou deux chaînes	Maintenance multilingue à long terme (dérive de Scene)

Chaîne complète : marge de conception → maquette multilingue VberAI Studio → export Prefab → aligner table de chaînes et valeurs par défaut → test de fumée toutes locales avant livraison. Liaison et QA en Play après import : liste de contrôle moteur + MCP.

---

Questions fréquentes

L’Auto Size de TMP au minimum déborde encore—est-ce un bug d’ingénierie ?
Généralement non. L’Auto Size ne met à l’échelle qu’à l’intérieur du conteneur. Si la largeur était fixée à la transmission, élargir la conception ou modifier le texte, ou autoriser deux lignes selon la spécification.

La mise en page est « théoriquement inchangée » après traduction—faut-il quand même ré-exporter le Prefab ?
Si l’UI provient d’un export VberAI Studio, un ré-export complet après finalisation du texte maintient les Prefabs du dépôt alignés sur le canevas. Les modifications de texte uniquement dans le projet sans synchroniser le canevas sont perdues au prochain reskin ou ré-export.

Le RTL (arabe, etc.) peut-il utiliser cette même liste à structure identique ?
Les règles de largeur à structure identique LTR aident toujours. Le RTL nécessite aussi une mise en page en miroir et une direction des chiffres—ne pas supposer que des chaînes traduites seules suffisent à livrer.

Faut-il re-traduire lors d’un reskin d’événement ?
Si le reskin ne change pas le texte, non. Si le texte de l’événement change avec le skin et que les noms de nœuds restent identiques, revérifier les locales de stress sur le canevas puis ré-exporter.

L’allemand est long—peut-on réduire la taille de police pour cette locale uniquement ?
Uniquement si la spécification produit définit un « −1 cran » global pour cette locale. Sinon, privilégier la largeur minimale et un texte plus court pour que la lisibilité reste cohérente entre les boutons.

VberAI Studio est-il identique à Google AI Studio ?
Non. VberAI Studio est un canevas d’UI de jeu, de traduction et d’export multi-moteurs ; Google AI Studio est l’environnement de développement IA général de Google. Voir la comparaison.