Overflow de Localização em UI de Jogos: Headroom de Design e QA de Exportação de Tradução no VberAI Studio

UI pronta para envio frequentemente falha na localização por um motivo diferente de tradução ruim: o mesmo layout não consegue acomodar o texto traduzido. Texto de botão é cortado pelo RectTransform, linhas de lista colapsam de duas linhas para uma, abas permanecem apertadas mas mostram reticências. Um teste no Unity Editor com texto placeholder em inglês esconde o problema até que alemão ou espanhol seja testado—então as correções geralmente tocam tanto a fonte de design quanto os Prefabs.

Os exemplos de layout e clipping abaixo usam Unity UGUI (RectTransform, Prefab, etc.). Godot Control e Cocos UI usam as mesmas ideias via âncoras, minimum_size e prefabs; critérios de headroom de design e overflow se aplicam da mesma forma.

Os itens 9–11 da checklist de handoff de design já destacam headroom para comprimento de texto e locales com mesma estrutura. Este post adiciona faixas de referência, uma lista de verificação do lado do design, QA no canvas após a tradução no VberAI Studio, e critérios de falha pré-envio. Safe Area no dispositivo, assets de build Release e verificações relacionadas permanecem na checklist de UI pré-envio itens 1, 5 e 6.

Critérios de falha (qualquer um = não aprovado): texto legível é cortado ou sobrepõe; reticências ou marquee sem especificação de produto; moldura visual do botão não corresponde à área de clique; a tela do fluxo principal de um locale precisa de uma alteração única na Hierarchy para mostrar o texto completo (conflita com metas de multilíngue com mesma estrutura).

---

Expansão de texto: faixas de referência para design

Equipes de localização frequentemente estimam crescimento relativo ao inglês ou ao idioma de origem. Estes não são SLAs contratuais—defina limites internos com sua tipografia e tamanhos de UI. Use a tabela para escolher 2–3 locales de estresse para revisão de design antes do handoff, não para prever comprimentos exatos de string.

Relação	Padrão típico (botões mobile, rótulos curtos)	Ação de design
DE / ES / PT vs rótulos curtos em chinês	Mesmo significado frequentemente precisa de ~+25% a +40% de espaço horizontal (compostos, artigos)	Colocar largura mínima de botão e largura fixa de aba ou regras de quebra na especificação
EN vs ZH no mesmo botão	Comprimento similar ou EN ligeiramente maior—não trate a largura do EN como aprovação para todos os locales	Verificar DE ou ES além do EN
FR / IT	Médio-longo; subtítulos de lista frequentemente precisam de duas linhas	Reservar uma segunda linha ou limitar comprimento do subtítulo
VI / ID	Escrita latina mas comprimento de palavra variável	Mesmo nível de estresse que ES
AR	Comprimento mais RTL e formatação de numerais; layout espelhado é um tópico separado	Este post assume LTR com mesma estrutura; RTL precisa de design próprio ou regras de espelhamento do engine
JA / KO	Mistura de largura total: largura visual não é linear com contagem de caracteres	Medir largura renderizada da string no tamanho alvo; não contar apenas caracteres

Nota de engine: Auto Size do TextMeshPro do Unity apenas reduz entre tamanhos mínimo/máximo de fonte. Se o texto ainda transborda no tamanho mínimo, isso é capacidade de layout, não algo a corrigir reduzindo mais—amplie o contêiner ou altere o texto no design.

---

12 verificações de design focadas em overflow (lista de verificação)

Além da lista geral de handoff de 12 itens, marque estas para locales:

#	Verificação	Padrão de aprovação
1	Texto do botão principal é uma camada de texto, não tipografia rasterizada	Strings substituíveis; listar tipografia não localizada na especificação
2	Contêiner do botão tem largura mínima (Figma Auto Layout ou largura fixa)	Pseudo-locale DE/ES ou strings reais não transbordam
3	Aba / barra inferior: célula fixa ou permissão explícita de duas linhas	Sem “parece uma linha, na verdade cortado”
4	Linhas de lista: título e subtítulo em linhas separadas; subtítulo tem máximo de linhas	Se duas linhas falham, encurtar texto ou ampliar a lista
5	Números, moeda, timers e unidades são campos separados	Sem frase inteira rasterizada; formatos vivem em tabelas de strings
6	Ícone + texto: largura do texto independente do ícone	Texto mais longo não esmaga o ícone
7	Padding de painel nine-slice e padding de conteúdo são suficientes	Veja item 6 do handoff; região de estiramento não cola no texto
8	Título de diálogo, corpo, botões primário/secundário são camadas separadas	Especificação para quebra ou um passo menor de tipo quando o título é longo
9	Badges de evento e textos curtos próximos a pontos vermelhos têm comprimento máximo	Texto de operações acima do limite volta para edição—não aperto de emergência
10	Variantes multilíngues: mesma estrutura de Frame, apenas texto	Sem controles exclusivos de locale a menos que a especificação permita
11	Notas de exportação listam quais locales de estresse foram revisados	Engenharia / QA conhecem a linha de base de aceitação
12	Conceito de tela cheia ainda tem texto legível	Separar camadas de texto ou aceitar reexportação antes do engine (slice in-place)

Auto Layout do Figma hug/fill, largura mín/máx, e truncate de texto devem corresponder ao acordo de engenharia—se o produto proíbe reticências, não aprove o mock apenas com truncate.

---

Caminho no VberAI Studio: traduzir → comparar → reexportar árvore completa

O VberAI Studio (AI Studio, ≠ Google AI Studio) tradução com um clique visa alterar apenas o texto legível—geometria e hierarquia permanecem as mesmas. Isso se alinha com o trabalho no engine onde apenas CSV / tabelas de strings mudam e a estrutura do Prefab permanece—diferentes estágios no mesmo pipeline de localização: o AI Studio cuida do design visual multilíngue e exportação; TMP e tabelas de strings cuidam da troca em runtime.

Ordem recomendada (igual a canvas → Prefab):

Passo	Ação	Aceitação
1	Travar layout principal no canvas ou Figma/PSD	Camadas de texto e limites de botão estão claros
2	Executar tradução com um clique por tela (por lote de locale de envio ou multilocale)	Hierarquia de camadas e nomes de nós inalterados
3	No canvas, comparar os 2–3 locales com o texto mais longo lado a lado ou por alternância (incluir DE ou ES + locale principal de envio)	Sem overflow, sem sobreposição
4	Revisar strings traduzidas por máquina que ficaram longas demais	Editar texto ou ajustar tamanho dentro da especificação; aprovação humana em linhas legais/marca
5	Reexportar árvore completa do Prefab (Unity UGUI / Godot Control / Cocos UI)	Corresponde ao canvas; não editar apenas Text no projeto sem sincronizar a fonte de design
6	Alinhar tabelas de strings com o texto padrão do Prefab no projeto	Troca de locale no Play mode corresponde ao canvas

Mesmo layout, mudanças apenas de tema: reskin. Após reskin, se você adicionar novos locales de envio, ainda traduza e exporte—evite editar Text manualmente na Scene enquanto os Prefabs do repositório divergem (item 6 pré-envio).

---

Aceitação pré-envio: vínculo com a checklist de teste

O item 2 da checklist pré-envio exige todos os locales ativos na tela inicial e popups principais. Execução sugerida:

Item	Prática
Prioridade de locale	Antes da passagem completa de locales, smoke test em locale de estresse + locale principal de envio
Escopo	HUD principal, popups de alta frequência, telas de pagamento/idade/legal com textos longos
Ambiente	Troca de locale no Unity Editor não substitui verificações de renderização de fonte no dispositivo (especialmente mistura CJK + latino)
Aprovação	Sem corte, sem reticências não declaradas, áreas de clique correspondem ao visual

Se strings mudam apenas no engine e o layout permanece inalterado mas o overflow persiste → trate como headroom de design insuficiente ou QA de canvas de locale de estresse ausente, então corrija conforme a tabela abaixo—não um encolhimento global permanente de fonte no Prefab.

---

Roteamento de correções

Sintoma	Causa provável	Ação	Responsável
Overflow em botão ou rótulo único	largura mínima muito pequena; tipografia de display usada como corpo	Ampliar design ou encurtar texto; mover para camada de texto	Design
Muitos overflows em uma tela	Mock principal muito apertado; sem revisão de locale de estresse	Auto Layout do Figma/canvas → retraduzir no AI Studio → reexportar árvore completa	Design + Engenharia
Unity Editor OK, um locale falha no dispositivo	Fonte fallback mais larga; DPI	Retestar no dispositivo; ajustar Font Asset / contêiner	Engenharia
Lista com duas linhas em apenas um locale	Tradução do subtítulo muito longa	Localização encurta ou altura da linha aumenta (reexportar se estrutura mudar)	Localização + Design
Troca em runtime falha, canvas OK	Descompasso entre tabela de strings e Prefab	Alinhar tabela e Text padrão; verificar quebras de linha	Engenharia
Após reskin de evento, locale ainda mostra layout antigo	Reskin trocou apenas arte, sem reexportar Prefab	Após reskin, reexecutar tradução + exportação por locale	Design

Regra de decisão: se a estrutura permanece a mesma → prefira texto, largura mínima, e QA no canvas do VberAI Studio e então reexporte. Se você precisa adicionar/remover nós ou mudar contagem de abas → mudança de layout—atualize o mock principal e todas as especificações de locale; não corrija o Prefab de um único locale isoladamente.

---

Divisão de trabalho vs “apenas tabela de strings”

Abordagem	Serve para	Não serve para
Tabela de strings do engine / TMP	Layout verificado; apenas troca de locale em runtime	Primeira importação de UI sem QA de locale de estresse
Tradução + exportação no VberAI Studio	Orientado a design; paridade visual multilíngue; fonte Figma/PSD	Substituir revisão de conformidade legal ou de pagamento
Editar Text do Prefab manualmente	Hotfix de emergência para uma ou duas strings	Manutenção multilíngue de longo prazo (deriva da Scene)

Cadeia completa: headroom de design → mock multilíngue no VberAI Studio → exportar Prefab → alinhar tabela de strings e padrões → smoke pré-envio em todos os locales. Binding e QA no Play após importação: checklist de engine + MCP.

---

Perguntas frequentes

Auto Size do TMP no mínimo ainda transborda—isso é bug de engenharia?
Geralmente não. Auto Size apenas escala dentro do contêiner. Se a largura foi fixada no handoff, amplie o design ou altere o texto, ou permita duas linhas conforme especificação.

O layout está “teoricamente inalterado” após a tradução—ainda assim reexportar o Prefab?
Se a UI veio da exportação do VberAI Studio, reexportar a árvore completa após o texto ser finalizado mantém os Prefabs do repositório alinhados com o canvas. Edições apenas de Text no projeto sem sincronizar o canvas são perdidas no próximo reskin ou reexportação.

RTL (árabe, etc.) pode usar esta checklist de mesma estrutura?
Regras de largura LTR com mesma estrutura ainda ajudam. RTL também precisa de layout espelhado e direção de numerais—não presuma que apenas strings traduzidas bastam para enviar.

Devemos retraduzir no reskin de evento?
Se o reskin não altera o texto, não. Se o texto do evento muda com o skin e os nomes dos nós permanecem os mesmos, reverifique os locales de estresse no canvas e então reexporte.

Alemão é longo—podemos reduzir o tamanho da fonte apenas para esse locale?
Somente se a especificação do produto definir um “−1 passo” global para esse locale. Caso contrário, prefira largura mínima e texto mais curto para que a legibilidade permaneça consistente entre botões.

O VberAI Studio é o mesmo que o Google AI Studio?
Não. O VberAI Studio é canvas de UI de jogos, tradução e exportação multi-engine; o Google AI Studio é o ambiente geral de desenvolvimento de IA do Google. Veja comparação.