Game-UI-Locale-Overflow: Design-Headroom und VberAI Studio Translate-Export-QA

Auslieferungsfähige UI scheitert bei der Lokalisierung oft aus einem anderen Grund als schlechter Übersetzung: Dasselbe Layout passt nicht zum übersetzten Text. Button-Text wird durch RectTransform abgeschnitten, Listenzeilen kollabieren von zwei Zeilen auf eine, Tabs bleiben überfüllt und zeigen Ellipsen. Ein Durchlauf im Unity Editor mit englischem Platzhalter verdeckt das Problem, bis Deutsch oder Spanisch getestet wird – dann berühren Korrekturen meist sowohl die Design-Quelle als auch die Prefabs.

Die Layout- und Clipping-Beispiele unten verwenden Unity UGUI (RectTransform, Prefab usw.). Godot Control und Cocos UI nutzen dieselben Ideen über Anker, minimum_size und Prefabs; Design-Headroom und Overflow-Kriterien gelten gleichermaßen.

Design-Handoff-Checkliste Punkte 9–11 benennen bereits Copy-Längen-Headroom und Locales mit gleicher Struktur. Dieser Beitrag ergänzt Referenzbereiche, eine Design-Tick-Liste, Canvas-QA nach VberAI Studio Translate und Pre-Ship-Fehlkriterien. Safe Area auf dem Gerät, Release-Build-Assets und verwandte Checks bleiben in Pre-Ship-UI-Checkliste Punkte 1, 5 und 6.

Fehlkriterien (eines davon = nicht bestanden): lesbarer Text wird abgeschnitten oder überlappt; Ellipsen oder Marquee ohne Produktspezifikation; visueller Button-Rahmen stimmt nicht mit der Hit-Area überein; der Hauptfluss-Bildschirm einer Locale benötigt eine einzigartige Hierarchy-Änderung, um den vollständigen Text anzuzeigen (kollidiert mit den Zielen mehrsprachiger gleicher Struktur).

---

Copy-Expansion: Referenzbereiche für das Design

Lokalisierungsteams schätzen das Wachstum oft relativ zu Englisch oder der Ausgangssprache. Dies sind keine vertraglichen SLAs – legen Sie interne Schwellenwerte mit Ihrer UI-Schriftart und Ihren Größen fest. Verwenden Sie die Tabelle, um 2–3 Stress-Locales für das Design-Review vor dem Handoff auszuwählen, nicht um exakte String-Längen vorherzusagen.

Beziehung	Typisches Muster (Mobile-Buttons, kurze Labels)	Design-Maßnahme
DE / ES / PT vs. kurze chinesische Labels	Gleiche Bedeutung benötigt oft ~+25 % bis +40 % horizontalen Platz (Komposita, Artikel)	Button-Mindestbreite und Tab-Festbreite oder Umbruchregeln in die Spezifikation aufnehmen
EN vs. ZH auf demselben Button	Ähnliche Länge oder EN etwas länger – nicht die EN-Breite als Freigabe für alle Locales behandeln	Zusätzlich zu EN auch DE oder ES stichprobenartig prüfen
FR / IT	Mittel bis lang; Listen-Untertitel benötigen oft zwei Zeilen	Eine zweite Zeile reservieren oder Untertitel-Länge begrenzen
VI / ID	Lateinische Schrift, aber variable Wortlänge	Gleiches Stress-Level wie ES
AR	Länge plus RTL und Ziffernformung; gespiegeltes Layout ist ein separates Thema	Dieser Beitrag geht von LTR mit gleicher Struktur aus; RTL benötigt eigene Design- oder Engine-Spiegelregeln
JA / KO	Vollbreiten-Mix: visuelle Breite ist nicht linear zur Zeichenzahl	Gerenderte String-Breite bei Zielgröße messen; nicht nur Zeichen zählen

Engine-Hinweis: Unity TextMeshPro Auto Size verkleinert nur zwischen Min-/Max-Schriftgrößen. Wenn Text bei der Mindestgröße immer noch überläuft, ist das Layout-Kapazität und nichts, was durch weiteres Verkleinern behoben werden sollte – verbreitern Sie den Container oder ändern Sie den Text im Design.

---

12 Design-Checks mit Fokus auf Overflow (Tick-Liste)

Zusätzlich zur allgemeinen 12-Punkte-Handoff-Liste haken Sie diese für Locales ab:

#	Check	Bestehensstandard
1	Primärer Button-Text ist eine Text-Ebene, keine Raster-Display-Schrift	Austauschbare Strings; nicht lokalisierte Display-Schrift in der Spezifikation auflisten
2	Button-Container hat Mindestbreite (Figma Auto Layout oder feste Breite)	DE/ES-Pseudo-Locale oder echte Strings laufen nicht über
3	Tab / untere Leiste: feste Zelle oder explizite Zwei-Zeilen-Erlaubnis	Kein „sieht einzeilig aus, ist aber abgeschnitten“
4	Listenzeilen: Titel und Untertitel auf getrennten Zeilen; Untertitel hat maximale Zeilen	Wenn zwei Zeilen scheitern, Text kürzen oder Liste verbreitern
5	Zahlen, Währung, Timer und Einheiten sind separate Felder	Kein Ganzsatz-Raster; Formate liegen in String-Tabellen
6	Icon + Text: Textbreite unabhängig vom Icon	Längerer Text quetscht das Icon nicht
7	Nine-Slice-Panel-Padding und Content-Padding sind ausreichend	Siehe Handoff-Punkt 6; Stretch-Bereich liegt nicht am Text an
8	Dialog-Titel, Body, primäre/sekundäre Buttons sind separate Ebenen	Spezifikation für Umbruch oder eine Stufe kleinere Schrift bei langem Titel
9	Event-Badges und kurzer Text nahe roter Punkte haben Maximallänge	Ops-Text über dem Limit geht zur Bearbeitung zurück – kein Notfall-Quetschen
10	Mehrsprachige Varianten: gleiche Frame-Struktur, nur Text	Keine locale-spezifischen Controls, es sei denn die Spezifikation erlaubt es
11	Export-Notizen listen, welche Stress-Locales geprüft wurden	Engineering / QA kennen die Abnahmebasis
12	Vollbild-Konzept hat weiterhin lesbaren Text	Text-Ebenen aufteilen oder Re-Export vor der Engine akzeptieren (In-Place-Slice)

Figma Auto Layout Hug/Fill, Min-/Max-Breite und Text-Truncate müssen mit der Engineering-Vereinbarung übereinstimmen – wenn das Produkt Ellipsen verbietet, darf der Mock nicht allein mit Truncate bestehen.

---

VberAI Studio-Pfad: Übersetzen → Vergleichen → Full-Tree-Re-Export

VberAI Studio (AI Studio, ≠ Google AI Studio) One-Click-Translate zielt darauf ab, nur lesbaren Text zu ändern – Geometrie und Hierarchie bleiben gleich. Das passt zur Engine-Arbeit, bei der nur CSV / String-Tabellen geändert werden und die Prefab-Struktur gleich bleibt – verschiedene Stufen derselben Lokalisierungs-Pipeline: AI Studio besitzt mehrsprachiges visuelles Design und Export; TMP und String-Tabellen besitzen Runtime-Switching.

Empfohlene Reihenfolge (wie Canvas → Prefab):

Schritt	Aktion	Abnahme
1	Primäres Layout auf Canvas oder Figma/PSD sperren	Text-Ebenen und Button-Grenzen sind klar
2	One-Click-Translate pro Bildschirm ausführen (nach Ship-Locale-Batch oder Multi-Locale)	Ebenen-Hierarchie und Node-Namen unverändert
3	Auf der Canvas die 2–3 Locales mit dem längsten Text nebeneinander oder per Toggle vergleichen (DE oder ES + primäre Ship-Locale einschließen)	Kein Overflow, keine Überlappung
4	Maschinell übersetzte Strings prüfen, die zu lang sind	Text bearbeiten oder Größe innerhalb der Spezifikation anpassen; menschliche Freigabe für rechtliche/Marken-Zeilen
5	Full-Tree-Re-Export Prefab (Unity UGUI / Godot Control / Cocos UI)	Stimmt mit Canvas überein; nicht nur Text im Projekt bearbeiten, ohne die Design-Quelle zu synchronisieren
6	String-Tabellen mit dem Prefab-Standardtext im Projekt abgleichen	Play-Mode-Locale-Switch stimmt mit der Canvas überein

Gleiches Layout, nur Theme-Änderungen: Reskin. Wenn Sie nach dem Reskin neue Ship-Locales hinzufügen, weiterhin übersetzen und dann exportieren – vermeiden Sie manuelles Bearbeiten von Text in der Scene, während Repo-Prefabs abdriften (Pre-Ship-Punkt 6).

---

Pre-Ship-Abnahme: Verknüpfung mit der Test-Checkliste

Pre-Ship-Checkliste Punkt 2 verlangt jede Live-Locale auf Home und wichtigen Popups. Vorgeschlagene Umsetzung:

Punkt	Vorgehen
Locale-Priorität	Vor dem vollständigen Locale-Durchlauf Stress-Locale + primäre Ship-Locale rauchen
Umfang	Haupt-HUD, häufig genutzte Popups, Zahlungs-/Alters-/Rechts-Bildschirme mit langem Text
Umgebung	Unity-Editor-Locale-Switch ersetzt nicht die Schrift-Rendering-Checks auf dem Gerät (besonders CJK + Latein-Mix)
Bestehen	Kein Clip, keine nicht deklarierte Ellipse, Hit-Areas stimmen mit der Visualisierung überein

Wenn Strings nur in der Engine geändert werden und das Layout unverändert bleibt, aber Overflow weiterhin besteht → als unzureichender Design-Headroom oder fehlende Stress-Locale-Canvas-QA behandeln und gemäß der Tabelle unten korrigieren – nicht als dauerhafte globale Schriftverkleinerung im Prefab.

---

Fix-Routing

Symptom	Wahrscheinliche Ursache	Maßnahme	Verantwortlich
Einzelner Button- oder Label-Overflow	Mindestbreite zu klein; Display-Schrift als Body verwendet	Design verbreitern oder Text kürzen; zu Text-Ebene wechseln	Design
Viele Overflows auf einem Bildschirm	Primärer Mock zu eng; keine Stress-Locale-Prüfung	Figma/Canvas Auto Layout → AI Studio Re-Translate → Full-Tree-Re-Export	Design + Engineering
Unity Editor OK, eine Locale scheitert auf dem Gerät	Fallback-Schrift breiter; DPI	Auf dem Gerät erneut testen; Font Asset / Container anpassen	Engineering
Liste zwei Zeilen nur in einer Locale	Untertitel-Übersetzung zu lang	Lokalisierung kürzt oder Zeilenhöhe erhöht (Re-Export bei Strukturänderung)	Lokalisierung + Design
Runtime-Switch scheitert, Canvas OK	String-Tabelle vs. Prefab stimmen nicht überein	Tabelle und Standard-Text abgleichen; Zeilenumbrüche prüfen	Engineering
Nach Event-Reskin zeigt Locale noch altes Layout	Reskin hat nur Art getauscht, kein Prefab-Re-Export	Nach Reskin Translate + Export pro Locale erneut ausführen	Design

Entscheidungsregel: Wenn die Struktur gleich bleibt → bevorzugt Text, Mindestbreite und VberAI Studio Canvas-QA, dann Re-Export. Wenn Sie Nodes hinzufügen/entfernen oder die Tab-Anzahl ändern müssen → Layout-Änderung – primären Mock und alle Locale-Spezifikationen aktualisieren; nicht das Prefab einer einzelnen Locale patchen.

---

Arbeitsteilung vs. „nur String-Tabelle“

Ansatz	Passt zu	Passt nicht zu
Engine-String-Tabelle / TMP	Layout verifiziert; nur Runtime-Locale-Switch	Erster UI-Import ohne Stress-Locale-QA
VberAI Studio Translate + Export	Design-getrieben; mehrsprachige visuelle Parität; Figma/PSD-Quelle	Ersetzen von rechtlicher oder Zahlungs-Compliance-Prüfung
Manuelles Bearbeiten von Prefab-Text	Notfall-Hotfix für ein oder zwei Strings	Langfristige mehrsprachige Wartung (Scene-Drift)

Vollständige Kette: Design-Headroom → VberAI Studio mehrsprachiger Mock → Prefab exportieren → String-Tabelle und Defaults abgleichen → Pre-Ship-All-Locale-Smoke. Binding und Play-QA nach dem Import: Engine + MCP-Checkliste.

---

Häufig gestellte Fragen

TMP Auto Size läuft bei Minimum immer noch über – ist das ein Engineering-Bug?
Normalerweise nein. Auto Size skaliert nur innerhalb des Containers. Wenn die Breite beim Handoff festgelegt wurde, Design verbreitern oder Text ändern, oder laut Spezifikation zwei Zeilen erlauben.

Layout ist nach dem Übersetzen „theoretisch unverändert“ – trotzdem Prefab re-exportieren?
Wenn die UI aus dem VberAI Studio-Export stammt, hält Full-Tree-Re-Export nach finalem Text die Repo-Prefabs mit der Canvas abgeglichen. Nur-Text-Änderungen im Projekt ohne Synchronisierung der Canvas gehen beim nächsten Reskin oder Re-Export verloren.

Kann RTL (Arabisch usw.) dieselbe Checkliste für gleiche Struktur verwenden?
LTR-Regeln für gleiche Struktur-Breite helfen weiterhin. RTL benötigt zusätzlich gespiegeltes Layout und Ziffernrichtung – nehmen Sie nicht an, dass nur übersetzte Strings zum Ausliefern ausreichen.

Müssen wir beim Event-Reskin neu übersetzen?
Wenn das Reskin den Text nicht ändert, nein. Wenn sich der Event-Text mit dem Skin ändert und Node-Namen gleich bleiben, Stress-Locales auf der Canvas erneut prüfen und dann re-exportieren.

Deutsch ist lang – können wir die Schriftgröße nur für diese Locale verkleinern?
Nur wenn die Produktspezifikation eine globale „−1 Stufe“ für diese Locale definiert. Andernfalls bevorzugt Mindestbreite und kürzerer Text, damit die Lesbarkeit über Buttons hinweg konsistent bleibt.

Ist VberAI Studio dasselbe wie Google AI Studio?
Nein. VberAI Studio ist Game-UI-Canvas, Translate und Multi-Engine-Export; Google AI Studio ist Googles allgemeine KI-Entwicklungsumgebung. Siehe Vergleich.