Overflow Locale UI Game: Headroom Desain dan QA Ekspor Terjemahan VberAI Studio

UI yang siap rilis sering gagal lokalisasi bukan karena terjemahan buruk: layout yang sama tidak bisa memuat teks terjemahan. Teks tombol terpotong oleh RectTransform, baris daftar ambruk dari dua baris menjadi satu, tab tetap sesak namun menampilkan elipsis. Lolos di Unity Editor dengan placeholder bahasa Inggris menyembunyikan masalah sampai Jerman atau Spanyol diuji—lalu perbaikan biasanya menyentuh sumber desain sekaligus Prefab.

Contoh layout dan clipping di bawah ini menggunakan Unity UGUI (RectTransform, Prefab, dan sebagainya). Godot Control dan Cocos UI memakai ide yang sama lewat anchor, minimum_size, dan prefab; headroom desain dan kriteria overflow berlaku dengan cara yang sama.

Checklist serah terima desain item 9–11 sudah menyebut headroom panjang teks dan locale berstruktur sama. Artikel ini menambahkan rentang referensi, daftar centang sisi desain, QA kanvas setelah terjemahan VberAI Studio, dan kriteria gagal pra-rilis. Safe Area di perangkat, aset Release build, dan pemeriksaan terkait tetap ada di checklist UI pra-rilis item 1, 5, dan 6.

Kriteria gagal (salah satu saja = tidak lolos): teks yang terbaca terpotong atau tumpang tindih; elipsis atau marquee tanpa spesifikasi produk; bingkai visual tombol tidak cocok dengan area klik; layar alur utama suatu locale butuh perubahan Hierarchy khusus agar teks penuh tampil (bertentangan dengan tujuan multibahasa berstruktur sama).

---

Ekspansi teks: rentang referensi untuk desain

Tim lokalisasi sering memperkirakan pertumbuhan relatif terhadap bahasa Inggris atau bahasa sumber. Ini bukan SLA kontraktual—tetapkan ambang internal dengan typeface dan ukuran UI Anda. Gunakan tabel untuk memilih 2–3 locale stres untuk tinjauan desain sebelum serah terima, bukan untuk memprediksi panjang string secara persis.

Hubungan	Pola umum (tombol mobile, label pendek)	Tindakan desain
DE / ES / PT vs label Tionghoa pendek	Makna sama sering butuh ~+25% hingga +40% ruang horizontal (kata majemuk, artikel)	Cantumkan min-width tombol dan lebar tetap tab atau aturan wrap di spesifikasi
EN vs ZH pada tombol yang sama	Panjang serupa atau EN sedikit lebih panjang—jangan anggap lebar EN sebagai tanda lolos untuk semua locale	Cek sampel DE atau ES selain EN
FR / IT	Sedang-panjang; subjudul daftar sering butuh dua baris	Sediakan baris kedua atau batasi panjang subjudul
VI / ID	Aksara Latin tetapi panjang kata bervariasi	Tingkat stres sama dengan ES
AR	Panjang plus RTL dan pembentukan angka; layout tercermin adalah topik terpisah	Artikel ini mengasumsikan LTR berstruktur sama; RTL butuh desain sendiri atau aturan mirror engine
JA / KO	Campuran lebar penuh: lebar visual tidak linear dengan jumlah karakter	Ukur lebar string yang dirender pada ukuran target; jangan hanya menghitung karakter

Catatan engine: Unity TextMeshPro Auto Size hanya mengecilkan di antara ukuran font min/max. Jika teks masih overflow pada ukuran minimum, itu kapasitas layout, bukan sesuatu yang diperbaiki dengan mengecilkan lebih jauh—lebarkan kontainer atau ubah teks di desain.

---

12 pemeriksaan desain berfokus overflow (daftar centang)

Di atas daftar serah terima 12 item yang umum, centang ini untuk locale:

#	Pemeriksaan	Standar lolos
1	Teks tombol utama adalah layer teks, bukan display type raster	String dapat ditukar; cantumkan display type non-lokalisasi di spesifikasi
2	Kontainer tombol punya min-width (Figma Auto Layout atau lebar tetap)	Pseudo-locale DE/ES atau string asli tidak overflow
3	Tab / bottom bar: sel tetap atau izin dua baris eksplisit	Tidak ada “terlihat satu baris, sebenarnya terpotong”
4	Baris daftar: judul dan subjudul di baris terpisah; subjudul punya batas baris maksimum	Jika dua baris gagal, perpendek teks atau lebarkan daftar
5	Angka, mata uang, timer, dan satuan adalah field terpisah	Tidak ada raster satu kalimat penuh; format ada di string table
6	Ikon + teks: lebar teks independen dari ikon	Teks lebih panjang tidak menghimpit ikon
7	Padding panel nine-slice dan padding konten memadai	Lihat item serah terima 6; area stretch tidak menempel ke teks
8	Judul dialog, isi, tombol primer/sekunder adalah layer terpisah	Spesifikasi untuk wrap atau satu tingkat font lebih kecil saat judul panjang
9	Badge event dan teks pendek dekat red dot punya panjang maksimum	Teks ops melebihi batas dikembalikan untuk diedit—bukan dipadatkan darurat
10	Varian multibahasa: struktur Frame sama, hanya teks	Tidak ada kontrol khusus locale kecuali spesifikasi mengizinkan
11	Catatan ekspor mencantumkan locale stres mana yang ditinjau	Engineering / QA tahu baseline penerimaan
12	Konsep layar penuh tetap punya teks yang terbaca	Pisahkan layer teks atau terima ekspor ulang sebelum engine (slice in-place)

Figma Auto Layout hug/fill, min/max width, dan truncate teks harus cocok dengan kesepakatan engineering—jika produk melarang elipsis, jangan loloskan mock hanya dengan truncate.

---

Jalur VberAI Studio: terjemahkan → bandingkan → ekspor ulang penuh

VberAI Studio (AI Studio, ≠ Google AI Studio) terjemahan sekali klik bertujuan hanya mengubah teks yang terbaca—geometri dan hierarki tetap sama. Itu selaras dengan pekerjaan engine di mana hanya CSV / string table yang berubah dan struktur Prefab tetap—tahap berbeda pada pipeline lokalisasi yang sama: AI Studio memiliki desain visual multibahasa dan ekspor; TMP dan string table memiliki peralihan runtime.

Urutan yang disarankan (sama seperti kanvas → Prefab):

Langkah	Tindakan	Penerimaan
1	Kunci layout utama di kanvas atau Figma/PSD	Layer teks dan batas tombol jelas
2	Jalankan terjemahan sekali klik per layar (per batch locale rilis atau multi-locale)	Hierarki layer dan nama node tidak berubah
3	Di kanvas, bandingkan 2–3 locale dengan teks terpanjang berdampingan atau lewat toggle (sertakan DE atau ES + locale rilis utama)	Tidak ada overflow, tidak ada tumpang tindih
4	Tinjau string hasil terjemahan mesin yang terlalu panjang	Edit teks atau sesuaikan ukuran dalam spesifikasi; persetujuan manusia untuk baris legal/brand
5	Ekspor ulang penuh Prefab (Unity UGUI / Godot Control / Cocos UI)	Cocok dengan kanvas; jangan hanya mengedit Text di proyek tanpa menyinkronkan sumber desain
6	Selaraskan string table dengan teks default Prefab di proyek	Peralihan locale di Play mode cocok dengan kanvas

Layout sama, hanya perubahan tema: reskin. Setelah reskin, jika Anda menambah locale rilis baru, tetap terjemahkan lalu ekspor—hindari mengedit Text manual di Scene sementara Prefab repo melenceng (item pra-rilis 6).

---

Penerimaan pra-rilis: kaitan dengan checklist pengujian

Checklist pra-rilis item 2 mewajibkan setiap locale aktif di beranda dan popup kunci. Saran pelaksanaan:

Item	Praktik
Prioritas locale	Sebelum pass locale penuh, smoke locale stres + locale rilis utama
Cakupan	HUD utama, popup frekuensi tinggi, layar teks panjang pembayaran/usia/legal
Lingkungan	Peralihan locale Unity Editor tidak menggantikan pemeriksaan rendering font di perangkat (terutama campuran CJK + Latin)
Lolos	Tidak ada clip, tidak ada elipsis tak dideklarasikan, area klik cocok dengan visual

Jika string hanya berubah di engine dan layout tidak berubah namun overflow tetap ada → anggap sebagai headroom desain tidak memadai atau QA kanvas locale stres tidak ada, lalu perbaiki sesuai tabel di bawah—bukan pengecilan font global permanen pada Prefab.

---

Perutean perbaikan

Gejala	Kemungkinan penyebab	Tindakan	Penanggung jawab
Overflow satu tombol atau label	min-width terlalu kecil; display type dipakai sebagai body	Lebarkan desain atau perpendek teks; pindahkan ke layer teks	Desain
Banyak overflow di satu layar	Mock utama terlalu ketat; tidak ada tinjauan locale stres	Figma/kanvas Auto Layout → terjemahan ulang AI Studio → ekspor ulang penuh	Desain + Engineering
Unity Editor OK, satu locale gagal di perangkat	Font fallback lebih lebar; DPI	Uji ulang di perangkat; sesuaikan Font Asset / kontainer	Engineering
Daftar dua baris hanya di satu locale	Terjemahan subjudul terlalu panjang	Lokalisasi memperpendek atau tinggi baris dinaikkan (ekspor ulang jika struktur berubah)	Lokalisasi + Desain
Peralihan runtime gagal, kanvas OK	String table vs Prefab tidak cocok	Selaraskan tabel dan Text default; periksa line break	Engineering
Setelah reskin event, locale masih menampilkan layout lama	Reskin hanya menukar art, tanpa ekspor ulang Prefab	Setelah reskin, jalankan ulang terjemahan + ekspor per locale	Desain

Aturan keputusan: jika struktur tetap sama → utamakan teks, min-width, dan QA kanvas VberAI Studio lalu ekspor ulang. Jika Anda harus menambah/menghapus node atau mengubah jumlah tab → perubahan layout—perbarui mock utama dan semua spesifikasi locale; jangan tambal Prefab satu locale saja.

---

Pembagian kerja vs “hanya string table”

Pendekatan	Cocok untuk	Tidak cocok untuk
String table / TMP engine	Layout sudah diverifikasi; hanya peralihan locale runtime	Impor UI pertama tanpa QA locale stres
Terjemahan + ekspor VberAI Studio	Berbasis desain; paritas visual multibahasa; sumber Figma/PSD	Menggantikan tinjauan kepatuhan legal atau pembayaran
Edit Text Prefab manual	Hotfix darurat untuk satu atau dua string	Pemeliharaan multibahasa jangka panjang (Scene melenceng)

Rantai lengkap: headroom desain → mock multibahasa VberAI Studio → ekspor Prefab → selaraskan string table dan default → smoke semua locale pra-rilis. Binding dan QA Play setelah impor: checklist engine + MCP.

---

Pertanyaan umum

TMP Auto Size pada minimum masih overflow—apakah itu bug engineering?
Biasanya bukan. Auto Size hanya menskalakan di dalam kontainer. Jika lebar sudah ditetapkan saat serah terima, lebarkan desain atau ubah teks, atau izinkan dua baris sesuai spesifikasi.

Layout “secara teori tidak berubah” setelah terjemahan—tetap ekspor ulang Prefab?
Jika UI berasal dari ekspor VberAI Studio, ekspor ulang penuh setelah teks final menjaga Prefab repo selaras dengan kanvas. Edit hanya Text di proyek tanpa menyinkronkan kanvas akan hilang pada reskin atau ekspor ulang berikutnya.

Bisakah RTL (Arab, dll.) memakai checklist berstruktur sama ini?
Aturan lebar berstruktur sama LTR tetap membantu. RTL juga butuh layout tercermin dan arah angka—jangan anggap string hasil terjemahan saja cukup untuk rilis.

Haruskah kita menerjemahkan ulang saat reskin event?
Jika reskin tidak mengubah teks, tidak. Jika teks event berubah bersama skin dan nama node tetap sama, periksa ulang locale stres di kanvas lalu ekspor ulang.

Jerman panjang—bisakah kita mengecilkan ukuran font hanya untuk locale itu?
Hanya jika spesifikasi produk menetapkan “−1 tingkat” global untuk locale tersebut. Jika tidak, utamakan min-width dan teks lebih pendek agar keterbacaan tetap konsisten di semua tombol.

Apakah VberAI Studio sama dengan Google AI Studio?
Tidak. VberAI Studio adalah kanvas UI game, terjemahan, dan ekspor multi-engine; Google AI Studio adalah lingkungan pengembangan AI umum dari Google. Lihat perbandingan.