Overflow delle localizzazioni nella UI di gioco: headroom di design e QA dell'export di traduzione di VberAI Studio

Overflow delle localizzazioni nella UI di gioco: headroom di design e QA dell’export di traduzione di VberAI Studio

Una UI pronta al rilascio spesso fallisce la localizzazione per un motivo diverso da una cattiva traduzione: lo stesso layout non riesce a contenere il testo tradotto. Il testo dei pulsanti viene tagliato dal RectTransform, le righe delle liste collassano da due righe a una, le tab rimangono strette e mostrano puntini di sospensione. Un test nell’Editor di Unity con segnaposto in inglese nasconde il problema finché non si prova il tedesco o lo spagnolo—poi le correzioni di solito toccano sia la sorgente di design sia i Prefab.

Gli esempi di layout e clipping qui sotto usano Unity UGUI (RectTransform, Prefab e così via). Godot Control e Cocos UI usano le stesse idee tramite anchor, minimum_size e prefab; i criteri di headroom di design e overflow si applicano allo stesso modo.

Gli elementi 9–11 della checklist di handoff del design già segnalano l’headroom per la lunghezza del testo e le lingue con la stessa struttura. Questo articolo aggiunge intervalli di riferimento, una lista di controllo lato design, il QA su canvas dopo la traduzione con VberAI Studio e i criteri di fallimento pre-rilascio. Safe Area sul dispositivo, asset della build Release e controlli correlati restano nella checklist UI pre-rilascio agli elementi 1, 5 e 6.

Criteri di fallimento (uno solo = non superato): il testo leggibile è tagliato o si sovrappone; puntini di sospensione o marquee senza specifica di prodotto; la cornice visiva del pulsante non corrisponde all’area di hit; la schermata del flusso principale di una lingua richiede una modifica unica della Hierarchy per mostrare il testo completo (in conflitto con gli obiettivi di multilinguismo a struttura identica).

---

Espansione del testo: intervalli di riferimento per il design

I team di localizzazione spesso stimano la crescita rispetto all’inglese o alla lingua sorgente. Questi non sono SLA contrattuali—stabilisci soglie interne con il tuo typeface UI e le tue dimensioni. Usa la tabella per scegliere 2–3 lingue di stress per la revisione di design prima dell’handoff, non per prevedere la lunghezza esatta delle stringhe.

Relazione	Pattern tipico (pulsanti mobile, etichette brevi)	Azione di design
DE / ES / PT vs etichette cinesi brevi	Lo stesso significato richiede spesso ~+25% a +40% di spazio orizzontale (composti, articoli)	Inserisci nella specifica la larghezza minima del pulsante e la larghezza fissa o le regole di wrap delle tab
EN vs ZH sullo stesso pulsante	Lunghezza simile o EN leggermente più lungo—non trattare la larghezza EN come approvazione per tutte le lingue	Verifica a campione anche DE o ES oltre a EN
FR / IT	Medio-lunghi; i sottotitoli delle liste spesso richiedono due righe	Riserva una seconda riga o limita la lunghezza del sottotitolo
VI / ID	Scrittura latina ma lunghezza delle parole variabile	Stesso livello di stress di ES
AR	Lunghezza più RTL e shaping dei numerali; il layout speculare è un argomento separato	Questo articolo assume LTR a struttura identica; RTL richiede regole di mirroring proprie di design o engine
JA / KO	Mix a larghezza piena: la larghezza visiva non è lineare rispetto al numero di caratteri	Misura la larghezza della stringa renderizzata alla dimensione target; non contare solo i caratteri

Nota sull’engine: l’Auto Size di TextMeshPro di Unity riduce solo tra le dimensioni min/max del font. Se il testo trabocca ancora alla dimensione minima, quella è capacità del layout, non qualcosa da correggere riducendo ulteriormente—allarga il contenitore o cambia il testo nel design.

---

12 controlli di design focalizzati sull’overflow (lista di controllo)

Oltre alla lista di handoff generale di 12 elementi, spunta questi per le lingue:

#	Controllo	Standard di superamento
1	Il testo del pulsante principale è un livello di testo, non display type rasterizzato	Stringhe sostituibili; elenca nella specifica il display type non localizzato
2	Il contenitore del pulsante ha una larghezza minima (Figma Auto Layout o larghezza fissa)	Le stringhe pseudo-locale o reali DE/ES non traboccano
3	Tab / barra inferiore: cella fissa o tolleranza esplicita su due righe	Niente “sembra su una riga, in realtà è tagliato”
4	Righe delle liste: titolo e sottotitolo su righe separate; il sottotitolo ha un numero massimo di righe	Se due righe falliscono, accorcia il testo o allarga la lista
5	Numeri, valuta, timer e unità sono campi separati	Nessuna frase intera rasterizzata; i formati vivono nelle string table
6	Icona + testo: larghezza del testo indipendente dall’icona	Un testo più lungo non schiaccia l’icona
7	Padding del pannello nine-slice e padding del contenuto sufficienti	Vedi elemento 6 dell’handoff; la regione di stretch non aderisce al testo
8	Titolo del dialog, corpo, pulsanti primario/secondario sono livelli separati	Specifica per wrap o type più piccolo di un passo quando il titolo è lungo
9	Badge degli eventi e testi brevi vicino ai red dot hanno una lunghezza massima	Il testo operativo oltre il limite torna indietro per la modifica—non compressione d’emergenza
10	Varianti multilingua: stessa struttura di Frame, solo testo	Nessun controllo specifico per lingua a meno che la specifica lo consenta
11	Le note di export elencano quali lingue di stress sono state revisionate	Engineering / QA conoscono la baseline di accettazione
12	Il concept a schermo intero ha comunque testo leggibile	Dividi i livelli di testo o accetta il re-export prima dell’engine (slice in-place)

L’hug/fill di Auto Layout di Figma, la larghezza min/max e il truncate del testo devono corrispondere all’accordo con l’engineering—se il prodotto vieta i puntini di sospensione, non approvare il mock con il solo truncate.

---

Percorso VberAI Studio: traduci → confronta → re-export dell’albero completo

VberAI Studio (AI Studio, ≠ Google AI Studio) con la traduzione con un clic mira a cambiare solo il testo leggibile—geometria e gerarchia restano identiche. Questo si allinea al lavoro sull’engine dove cambiano solo CSV / string table e la struttura del Prefab resta—fasi diverse della stessa pipeline di localizzazione: AI Studio possiede il design visivo multilingua e l’export; TMP e le string table possiedono lo switch a runtime.

Ordine consigliato (come in canvas → Prefab):

Passo	Azione	Accettazione
1	Blocca il layout principale su canvas o Figma/PSD	I livelli di testo e i limiti dei pulsanti sono chiari
2	Esegui la traduzione con un clic per schermata (per batch di lingue di rilascio o multilingua)	Gerarchia dei livelli e nomi dei nodi invariati
3	Sul canvas, confronta le 2–3 lingue con il testo più lungo affiancate o tramite toggle (includi DE o ES + la lingua principale di rilascio)	Nessun overflow, nessuna sovrapposizione
4	Rivedi le stringhe tradotte automaticamente troppo lunghe	Modifica il testo o ritocca la dimensione entro la specifica; approvazione umana su righe legali/brand
5	Re-export dell’albero completo del Prefab (Unity UGUI / Godot Control / Cocos UI)	Corrisponde al canvas; non modificare solo il Text nel progetto senza sincronizzare la sorgente di design
6	Allinea le string table con il testo predefinito del Prefab nel progetto	Lo switch di lingua in Play mode corrisponde al canvas

Stesso layout, solo cambi di tema: reskin. Dopo il reskin, se aggiungi nuove lingue di rilascio, traduci comunque poi esporta—evita di modificare a mano il Text nella Scene mentre i Prefab del repo derivano (elemento 6 pre-rilascio).

---

Accettazione pre-rilascio: collegamento alla checklist di test

L’elemento 2 della checklist pre-rilascio richiede ogni lingua attiva su home e popup chiave. Esecuzione suggerita:

Elemento	Pratica
Priorità delle lingue	Prima del pass completo delle lingue, fai uno smoke test su lingua di stress + lingua principale di rilascio
Ambito	HUD principale, popup ad alta frequenza, schermate con testi lunghi di pagamento/età/legali
Ambiente	Lo switch di lingua nell’Editor di Unity non sostituisce i controlli di rendering dei font sul dispositivo (specialmente mix CJK + latino)
Superamento	Nessun clip, nessun puntino di sospensione non dichiarato, aree di hit corrispondenti al visivo

Se le stringhe cambiano solo nell’engine e il layout è invariato ma l’overflow persiste → trattalo come headroom di design insufficiente o QA su canvas delle lingue di stress mancante, poi correggi secondo la tabella sotto—non come una riduzione globale permanente del font sul Prefab.

---

Instradamento delle correzioni

Sintomo	Causa probabile	Azione	Responsabile
Overflow di un singolo pulsante o etichetta	Larghezza minima troppo piccola; display type usato come body	Allarga il design o accorcia il testo; passa a un livello di testo	Design
Molti overflow su una schermata	Mock principale troppo stretto; nessuna revisione delle lingue di stress	Auto Layout di Figma/canvas → ri-traduzione in AI Studio → re-export dell’albero completo	Design + Engineering
Editor di Unity OK, una lingua fallisce sul dispositivo	Font di fallback più largo; DPI	Ri-testa sul dispositivo; regola Font Asset / contenitore	Engineering
Lista su due righe in una sola lingua	Traduzione del sottotitolo troppo lunga	La localizzazione accorcia o aumenta l’altezza della riga (re-export se cambia la struttura)	Localizzazione + Design
Lo switch a runtime fallisce, il canvas è OK	Disallineamento tra string table e Prefab	Allinea tabella e Text predefinito; controlla le interruzioni di riga	Engineering
Dopo il reskin dell’evento, la lingua mostra ancora il layout vecchio	Il reskin ha scambiato solo l’arte, nessun re-export del Prefab	Dopo il reskin, riesegui traduzione + export per lingua	Design

Regola decisionale: se la struttura resta identica → preferisci testo, larghezza minima e QA su canvas di VberAI Studio poi re-export. Se devi aggiungere/rimuovere nodi o cambiare il numero di tab → cambio di layout—aggiorna il mock principale e tutte le specifiche di lingua; non rattoppare il Prefab di una sola lingua.

---

Divisione del lavoro vs “solo string table”

Approccio	Adatto a	Non adatto a
String table / TMP dell’engine	Layout verificato; solo switch di lingua a runtime	Primo import UI senza QA delle lingue di stress
Traduzione + export di VberAI Studio	Guidato dal design; parità visiva multilingua; sorgente Figma/PSD	Sostituire la revisione di conformità legale o di pagamento
Modifica manuale del Text del Prefab	Hotfix d’emergenza per una o due stringhe	Manutenzione multilingua a lungo termine (deriva della Scene)

Catena completa: headroom di design → mock multilingua in VberAI Studio → export Prefab → allinea string table e default → smoke test di tutte le lingue pre-rilascio. Binding e QA in Play dopo l’import: checklist engine + MCP.

---

Domande frequenti

L’Auto Size di TMP al minimo trabocca ancora—è un bug dell’engineering?
Di solito no. Auto Size scala solo all’interno del contenitore. Se la larghezza era fissa all’handoff, allarga il design o cambia il testo, oppure consenti due righe secondo la specifica.

Il layout è “teoricamente invariato” dopo la traduzione—esportare comunque il Prefab?
Se la UI proviene dall’export di VberAI Studio, il re-export dell’albero completo dopo che il testo è definitivo mantiene i Prefab del repo allineati al canvas. Le modifiche solo al Text nel progetto senza sincronizzare il canvas si perdono al prossimo reskin o re-export.

RTL (arabo, ecc.) può usare questa checklist a struttura identica?
Le regole di larghezza LTR a struttura identica aiutano comunque. RTL richiede anche layout speculare e direzione dei numerali—non presumere che stringhe solo tradotte siano sufficienti per il rilascio.

Dobbiamo ri-tradurre al reskin di un evento?
Se il reskin non cambia il testo, no. Se il testo dell’evento cambia con la skin e i nomi dei nodi restano gli stessi, ricontrolla le lingue di stress sul canvas poi riesporta.

Il tedesco è lungo—possiamo ridurre la dimensione del font solo per quella lingua?
Solo se la specifica di prodotto definisce un “−1 passo” globale per quella lingua. Altrimenti preferisci larghezza minima e testi più brevi così la leggibilità resta coerente tra i pulsanti.

VberAI Studio è lo stesso di Google AI Studio?
No. VberAI Studio è canvas UI di gioco, traduzione ed export multi-engine; Google AI Studio è l’ambiente di sviluppo AI generico di Google. Vedi il confronto.