Nine-Slice UI Game dan Panel Skalabel: Penanda Figma / PSD dan QA Sliced di Engine

Saat panel diregangkan lebih lebar, sudut buram, tekstur tengah berulang, atau sudut oval biasanya berarti nine-slice (9-slice / cap inset) tidak ditentukan saat handoff, atau engine memakai skala Simple pada seluruh sprite. Menyesuaikan Image Type dan border di Unity Editor bisa menyelamatkan satu layar, tapi drop desain berikutnya akan menimpanya—jika border tidak cocok dengan skala ekspor, siklus rework terjadi.

Contoh di bawah berfokus pada Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture dan nine-slice sprite Cocos memetakan ke ide yang sama, termasuk content padding. Anchor dan Safe Area: checklist engine + MCP item 6. Padding stretch-region dengan locale: locale overflow design check 7.

Checklist handoff desain item 6 mensyaratkan nine-slice / stretch region yang jelas. Posting ini membahas kapan harus slice, penanda Figma/PSD, acceptance tiga engine, dan jalur full-screen canvas, plus tabel perbaikan.

Kriteria gagal (salah satu = tidak lulus): seni sudut terdeformasi saat diregangkan; pengulangan atau seam tak diinginkan di stretch region; radius sudut berubah dengan ukuran panel; background skalabel ikut terskala bersama ikon/avatar tetap; skala ekspor tidak cocok dengan piksel border engine (celah 1px atau tepi lembut).

---

Kapan nine-slice diperlukan vs hard stretch dilarang

Jenis aset	Lakukan	Jangan
Bg dialog / panel pengaturan	Nine-slice + content padding	Satu sprite Simple full bleed
Container input / bar	Nine-slice atau cap Kiri/Kanan + repeat tengah	Squash tinggi tanpa aturan seni
Tombol utama (ukuran tetap)	Sprite tetap atau nine-slice + lebar minimum	Tombol rounded lebar tak terbatas sebagai satu stretch
Ikon, avatar, frame skill	Ukuran tetap, tanpa nine-slice	Gabung dengan bg panel jadi satu gambar stretch
Bg full-screen (tanpa kotak berbingkai)	Gambar penuh atau strategi tile di spec	Pakai ulang border panel pada full bleed

Aturan: Jika lebar atau tinggi berubah dengan resolusi, teks, atau konten list dan sudut harus tetap berbentuk → nine-slice atau ekuivalen engine. Kontrol ukuran tetap → sprite tetap + constraint layout.

---

Penanda handoff Figma / PSD (daftar centang)

#	Periksa	Standar lulus
1	Layer stretch terpisah dari dekor / ikon / teks	Bg panel reskin + slice; ikon tidak diskalakan dengan bg
2	Border / cap inset dalam px (empat sisi)	Cocok @1x atau skala ekspor tim di catatan pengiriman
3	Skala ekspor tetap (@1x/@2x atau baseline 1080)	Engineering tidak menebak matematika border
4	Radius sudut di luar stretch region atau spec mengizinkan sudut non-stretch	Tidak ada lulus “sudut berubah jadi kapsul”
5	Stretch region ramah tile atau solid	Repeat tengah tanpa misalignment jelas
6	Nama semantik	mis. Panel_Shop_9s, Input_Field_9s
7	Multi-state (normal / disabled) border sama	Inset cocok; hanya warna/skin berubah
8	Slice PSD atau catatan ekspor Figma padding transparan	Jangan hitung shadow di border kecuali spec menyatakan
9	Kirim dengan handoff item 5 button states	Jangan tambal state yang hilang dengan seni 9s yang salah
10	Reskin event hanya ubah seni, border tidak berubah	Lihat spec reskin

Figma: taruh cap inset di dokumen komponen saat memakai resizable frame atau plugin slice. PSD: selaraskan slice dengan PSD ke Unity dalam 5 menit.

---

Tiga engine: komponen dan acceptance

Item	Unity UGUI	Godot 4 Control	Cocos UI
Komponen	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Sumber border	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
Area konten	RectTransform + padding anak	MarginContainer + Theme	Widget / layout padding
Gagal tipikal	Salah pakai Simple; border skala salah	Patch vs ukuran tekstur tidak cocok	Rotasi atlas merusak inset
Lulus	Pada lebar 150% / 200%: sudut tajam, tengah bersih	Sama; preview Theme cocok dengan Play	Sama; spot-check perangkat pada list panjang

Acceptance Unity Editor (petakan ke engine lain):

1. Set Prefab Image ke Sliced dengan border sesuai desain.
2. Geser RectTransform panel ke lebar desain min dan maks.
3. Bandingkan sudut, tepi, dan tengah dengan tangkapan Figma/PSD.
4. Jika mode Play OK → satu pass perangkat per checklist pra-rilis.

---

Konsep full-screen: pemisahan canvas dan ekspor ulang

Dengan seni full-screen PNG atau AI saja, border tidak bisa disimpulkan. Jalur: VberAI Studio (AI Studio, ≠ Google AI Studio) pemisahan in-place → tandai panel skalabel → ekspor Prefab (deterministik, bukan YAML LLM).

Langkah	Aksi	Acceptance
1	Full screen di canvas; pisahkan Panel_* dan ikon tetap	Hierarki bernama
2	Konfirmasi niat 9-slice panel di canvas atau sebelum ekspor	Pemilik inset didokumentasikan
3	Ekspor Prefab Unity / Godot / Cocos	QA Sliced per tabel di atas
4	Setelah reskin / locale, ekspor ulang seluruh tree	Jika spec border tidak berubah, inset tidak berubah

Figma/PSD berlapis: utamakan Figma → Unity atau PSD ke UGUI, lalu tweak border minor di engine—hindari ekspor ulang 20 PNG lepas tiap event.

---

Routing perbaikan

Gejala	Kemungkinan penyebab	Aksi	Pemilik
Sudut buram	Skala Simple pada seluruh gambar	Sliced + border benar; desain tambah tanda inset	Engineering + Design
Seam tengah / blok berulang	inset meleset 1–2px; skala tidak cocok	Cocokkan px desain; reimport sprite	Engineering
Sudut meregang oval	Seni tidak boleh nine-slice	Ukuran tetap atau seni sudut baru	Design
Border berubah setelah reskin	Ukuran seni baru atau padding	Kunci ukuran canvas di spec reskin; QA ulang setelah reskin	Design
Bg baris list terdeformasi	Bg baris diregangkan seperti panel penuh	9s khusus baris atau tinggi tetap	Design
Gagal hanya di resolusi tertentu	Skala non-integer Canvas Scaler	Checklist engine Anchor/Scaler	Engineering

Aturan: Jika border ≠ desain → perbaiki penanda atau sumber sprite dulu, lalu Prefab. Perbaikan hanya di Inspector tanpa memperbarui pengiriman → hilang pada ekspor berikutnya.

---

vs handoff “hanya paket PNG”

Pendekatan	Cocok	Tidak cocok
Ekspor manual + engineering mengisi border	Sedikit panel, demo	Reskin sering, banyak layar
Figma/PSD + ekspor terstruktur VberAI Studio	Multi-layar, multi-engine, event	Menggantikan tanda inset dan QA
Sliced sementara di engine	Hotfix satu layar	Jangka panjang tanpa sumber desain

Direkomendasikan: tanda inset desain → ekspor Prefab terstruktur → Unity Editor Sliced pada dua lebar → MCP untuk logika. Raycast dan binding: checklist engine + MCP.

---

Pertanyaan umum

Bisakah panel rounded memakai nine-slice?
Ya, tapi inset harus berada di tepi stretch lurus; sudut tetap di tile sudut non-stretch. Jika radius sudut tumbuh dengan ukuran panel → gagal; perbaiki seni atau batasi ukuran maks.

Apakah shadow dihitung di border?
Spec produk yang menentukan. Jika shadow tidak meregang, pisahkan layer atau tandai inset pada rect solid tanpa outer glow.

Tiled vs Sliced?
Sliced untuk panel berbingkai; Tiled (atau seni tengah ramah tile) untuk tekstur tengah berulang. Tulis di spec—jangan biarkan engineering menebak.

Slice terpisah untuk Godot / Cocos?
Satu semantik inset; ganti target ekspor via ekspor multi-engine canvas dan verifikasi patch/cap per tabel.

Apakah VberAI Studio otomatis mengisi border?
Tergantung ekspor dan aset; acceptance selalu Sliced/StyleBox engine. Tanpa inset di desain → engineering set border di Editor dan catat di spec.

Apakah VberAI Studio sama dengan Google AI Studio?
Tidak. Lihat perbandingan.