Desbordamiento de idioma en la UI de juegos: margen de diseño y QA de exportación de traducción de VberAI Studio

Desbordamiento de idioma en la UI de juegos: margen de diseño y QA de exportación de traducción de VberAI Studio

Una UI lista para publicar a menudo falla en la localización por una razón distinta a una mala traducción: el mismo diseño no puede contener el texto traducido. El texto de un botón queda recortado por RectTransform, las filas de lista colapsan de dos líneas a una, las pestañas siguen apiñadas pero muestran puntos suspensivos. Una aprobación en el Editor de Unity con texto en inglés de marcador oculta el problema hasta que se prueba alemán o español; entonces las correcciones suelen tocar tanto el diseño de origen como los Prefabs.

Los ejemplos de diseño y recorte a continuación usan Unity UGUI (RectTransform, Prefab, etc.). Godot Control y Cocos UI usan las mismas ideas mediante anclas, minimum_size y prefabs; el margen de diseño y los criterios de desbordamiento se aplican igual.

Los puntos 9–11 de la lista de verificación para la entrega de diseño ya señalan el margen para la longitud del texto y los idiomas con la misma estructura. Este artículo añade rangos de referencia, una lista de verificación del lado del diseño, QA en el lienzo tras la traducción de VberAI Studio y criterios de fallo antes de publicar. Safe Area en el dispositivo, los recursos de la compilación Release y las comprobaciones relacionadas permanecen en los puntos 1, 5 y 6 de la lista de verificación de UI antes de publicar.

Criterios de fallo (cualquiera de ellos = no aprobado): el texto legible queda recortado o se superpone; puntos suspensivos o marquesina sin especificación de producto; el marco visual del botón no coincide con el área de impacto; la pantalla del flujo principal de un idioma necesita un cambio único en la Jerarquía para mostrar el texto completo (entra en conflicto con los objetivos multilingües de misma estructura).

---

Expansión del texto: rangos de referencia para el diseño

Los equipos de localización a menudo estiman el crecimiento en relación con el inglés o el idioma de origen. Estos no son SLA contractuales: establece umbrales internos con tu tipografía y tamaños de UI. Usa la tabla para elegir 2–3 idiomas de estrés para la revisión de diseño antes de la entrega, no para predecir longitudes exactas de cadenas.

Relación	Patrón típico (botones móviles, etiquetas cortas)	Acción de diseño
DE / ES / PT vs etiquetas cortas en chino	El mismo significado suele necesitar ~+25% a +40% de espacio horizontal (compuestos, artículos)	Incluir en la especificación el ancho mínimo del botón y el ancho fijo de pestaña o las reglas de ajuste de línea
EN vs ZH en el mismo botón	Longitud similar o EN ligeramente más largo—no trates el ancho de EN como aprobación para todos los idiomas	Verifica DE o ES además de EN
FR / IT	Medio-largo; los subtítulos de lista a menudo necesitan dos líneas	Reserva una segunda línea o limita la longitud del subtítulo
VI / ID	Escritura latina pero longitud de palabra variable	Mismo nivel de estrés que ES
AR	Longitud más RTL y conformación de numerales; el diseño reflejado es un tema aparte	Este artículo asume LTR con misma estructura; RTL necesita su propio diseño o reglas de espejo del motor
JA / KO	Mezcla de ancho completo: el ancho visual no es lineal con el número de caracteres	Mide el ancho de la cadena renderizada al tamaño objetivo; no cuentes solo caracteres

Nota del motor: Auto Size de TextMeshPro en Unity solo reduce entre los tamaños de fuente mínimo/máximo. Si el texto aún se desborda en el tamaño mínimo, eso es capacidad del diseño, no algo que se arregle reduciendo más—ensancha el contenedor o cambia el texto en diseño.

---

12 comprobaciones de diseño centradas en el desbordamiento (lista de verificación)

Además de la lista general de entrega de 12 puntos, marca estas para los idiomas:

#	Comprobación	Estándar de aprobación
1	El texto del botón principal es una capa de texto, no tipografía rasterizada	Cadenas intercambiables; enumera en la especificación la tipografía de visualización no localizada
2	El contenedor del botón tiene ancho mínimo (Auto Layout de Figma o ancho fijo)	El pseudoidioma DE/ES o las cadenas reales no se desbordan
3	Pestaña / barra inferior: celda fija o permiso explícito de dos líneas	Sin «parece una línea, en realidad está recortado»
4	Filas de lista: título y subtítulo en líneas separadas; el subtítulo tiene máximo de líneas	Si fallan dos líneas, acorta el texto o ensancha la lista
5	Números, moneda, temporizadores y unidades son campos separados	Sin frase completa rasterizada; los formatos viven en tablas de cadenas
6	Icono + texto: el ancho del texto es independiente del icono	Un texto más largo no aplasta el icono
7	El relleno del panel nine-slice y el relleno de contenido son suficientes	Ver punto 6 de la entrega; la región estirable no se pega al texto
8	Título de diálogo, cuerpo, botones primario/secundario son capas separadas	Especificación para ajuste de línea o un paso menos de tipografía cuando el título es largo
9	Las insignias de evento y el texto corto cerca de puntos rojos tienen longitud máxima	El texto de operaciones que supere el límite vuelve para edición—no se comprime de emergencia
10	Variantes multilingües: misma estructura de Frame, solo texto	Sin controles exclusivos de un idioma salvo que la especificación lo permita
11	Las notas de exportación enumeran qué idiomas de estrés se revisaron	Ingeniería / QA conocen la línea base de aceptación
12	El concepto de pantalla completa aún tiene texto legible	Separa capas de texto o acepta reexportar antes del motor (corte in-place)

El hug/fill de Auto Layout de Figma, el ancho mín/máx y el truncate de texto deben coincidir con el acuerdo de ingeniería—si el producto prohíbe los puntos suspensivos, no apruebes el mock solo con truncate.

---

Ruta en VberAI Studio: traducir → comparar → reexportar el árbol completo

VberAI Studio (AI Studio, ≠ Google AI Studio) traducción con un clic busca cambiar solo el texto legible—la geometría y la jerarquía permanecen iguales. Eso se alinea con el trabajo en el motor donde solo cambian CSV / tablas de cadenas y la estructura del Prefab se mantiene—diferentes etapas de la misma tubería de localización: AI Studio posee el diseño visual multilingüe y la exportación; TMP y las tablas de cadenas poseen el cambio en tiempo de ejecución.

Orden recomendado (igual que lienzo → Prefab):

Paso	Acción	Aceptación
1	Bloquear el diseño principal en el lienzo o Figma/PSD	Las capas de texto y los límites de botón están claros
2	Ejecutar traducción con un clic por pantalla (por lote de idiomas de publicación o multi-idioma)	La jerarquía de capas y los nombres de nodos sin cambios
3	En el lienzo, comparar los 2–3 idiomas con el texto más largo lado a lado o por alternancia (incluye DE o ES + idioma principal de publicación)	Sin desbordamiento, sin superposición
4	Revisar las cadenas traducidas automáticamente que sean demasiado largas	Editar el texto o ajustar el tamaño dentro de la especificación; aprobación humana en líneas legales/de marca
5	Reexportar el árbol completo del Prefab (Unity UGUI / Godot Control / Cocos UI)	Coincide con el lienzo; no edites solo el Text en el proyecto sin sincronizar el diseño de origen
6	Alinear las tablas de cadenas con el texto predeterminado del Prefab en el proyecto	El cambio de idioma en modo Play coincide con el lienzo

Mismo diseño, solo cambios de tema: reskin. Tras el reskin, si añades nuevos idiomas de publicación, igualmente traduce y luego exporta—evita editar a mano el Text en la Escena mientras los Prefabs del repositorio se desvían (punto 6 antes de publicar).

---

Aceptación antes de publicar: vínculo con la lista de verificación de pruebas

El punto 2 de la lista antes de publicar exige todos los idiomas activos en inicio y popups clave. Ejecución sugerida:

Elemento	Práctica
Prioridad de idiomas	Antes de la pasada completa de idiomas, prueba de humo idioma de estrés + idioma principal de publicación
Alcance	HUD principal, popups de alta frecuencia, pantallas de texto largo de pago/edad/legal
Entorno	El cambio de idioma en el Editor de Unity no reemplaza las comprobaciones de renderizado de fuentes en el dispositivo (especialmente mezcla CJK + latino)
Aprobación	Sin recorte, sin puntos suspensivos no declarados, áreas de impacto coinciden con lo visual

Si las cadenas cambian solo en el motor y el diseño no cambia pero el desbordamiento persiste → trátalo como margen de diseño insuficiente o falta de QA del lienzo en idiomas de estrés, luego corrige según la tabla siguiente—no como una reducción global permanente de fuente en el Prefab.

---

Enrutamiento de correcciones

Síntoma	Causa probable	Acción	Responsable
Desbordamiento de un botón o etiqueta	ancho mínimo demasiado pequeño; tipografía de visualización usada como cuerpo	Ensanchar el diseño o acortar el texto; pasar a capa de texto	Diseño
Muchos desbordamientos en una pantalla	Mock principal demasiado ajustado; sin revisión de idiomas de estrés	Auto Layout de Figma/lienzo → retraducir en AI Studio → reexportar el árbol completo	Diseño + Ingeniería
El Editor de Unity está bien, un idioma falla en el dispositivo	Fuente de reserva más ancha; DPI	Re-probar en el dispositivo; ajustar Font Asset / contenedor	Ingeniería
Lista de dos líneas solo en un idioma	Traducción del subtítulo demasiado larga	Localización acorta o aumenta la altura de fila (reexportar si cambia la estructura)	Localización + Diseño
El cambio en tiempo de ejecución falla, el lienzo está bien	Desajuste entre tabla de cadenas y Prefab	Alinear tabla y Text predeterminado; comprobar saltos de línea	Ingeniería
Tras el reskin de evento, el idioma aún muestra el diseño antiguo	El reskin solo cambió el arte, sin reexportar el Prefab	Tras el reskin, volver a ejecutar traducir + exportar por idioma	Diseño

Regla de decisión: si la estructura permanece igual → prefiere texto, ancho mínimo y QA del lienzo de VberAI Studio y luego reexporta. Si debes añadir/eliminar nodos o cambiar el número de pestañas → cambio de diseño—actualiza el mock principal y todas las especificaciones de idioma; no parchees solo el Prefab de un idioma.

---

División del trabajo vs «solo tabla de cadenas»

Enfoque	Encaja	No encaja
Tabla de cadenas del motor / TMP	Diseño verificado; solo cambio de idioma en tiempo de ejecución	Primera importación de UI sin QA de idiomas de estrés
Traducción + exportación de VberAI Studio	Basado en diseño; paridad visual multilingüe; origen Figma/PSD	Reemplazar la revisión de cumplimiento legal o de pagos
Editar a mano el Text del Prefab	Hotfix de emergencia para una o dos cadenas	Mantenimiento multilingüe a largo plazo (deriva de la Escena)

Cadena completa: margen de diseño → mock multilingüe en VberAI Studio → exportar Prefab → alinear tabla de cadenas y valores predeterminados → prueba de humo de todos los idiomas antes de publicar. Enlace y QA en Play tras la importación: lista de verificación de motor + MCP.

---

Preguntas frecuentes

Auto Size de TMP en el mínimo aún se desborda—¿es un bug de ingeniería?
Normalmente no. Auto Size solo escala dentro del contenedor. Si el ancho se fijó en la entrega, ensancha el diseño o cambia el texto, o permite dos líneas según la especificación.

El diseño está «teóricamente sin cambios» tras traducir—¿aun así reexportar el Prefab?
Si la UI provino de una exportación de VberAI Studio, reexportar el árbol completo tras finalizar el texto mantiene los Prefabs del repositorio alineados con el lienzo. Las ediciones solo de Text en el proyecto sin sincronizar el lienzo se pierden en el siguiente reskin o reexportación.

¿Puede RTL (árabe, etc.) usar esta misma lista de verificación de misma estructura?
Las reglas de ancho LTR de misma estructura siguen ayudando. RTL también necesita diseño espejo y dirección de numerales—no asumas que solo traducir cadenas basta para publicar.

¿Debemos retraducir en el reskin de evento?
Si el reskin no cambia el texto, no. Si el texto del evento cambia con el skin y los nombres de nodos permanecen iguales, vuelve a comprobar los idiomas de estrés en el lienzo y luego reexporta.

El alemán es largo—¿podemos reducir el tamaño de fuente solo para ese idioma?
Solo si la especificación del producto define un «−1 paso» global para ese idioma. De lo contrario, prefiere ancho mínimo y texto más corto para que la legibilidad se mantenga consistente entre botones.

¿VberAI Studio es lo mismo que Google AI Studio?
No. VberAI Studio es lienzo de UI de juegos, traducción y exportación multi-motor; Google AI Studio es el entorno general de desarrollo de IA de Google. Ver comparación.