Sembilan Hirisan UI Permainan dan Panel Boleh Skala: Tanda Figma / PSD dan QA Hirisan Enjin

Apabila panel diregangkan lebih lebar, sudut kabur, tekstur tengah berulang, atau sudut bujur biasanya bermakna sembilan hirisan (9-slice / cap insets) tidak dinyatakan semasa serahan, atau enjin menggunakan skala Simple pada keseluruhan sprite. Melaraskan Image Type dan sempadan dalam Unity Editor boleh selamatkan satu skrin, tetapi penurunan reka bentuk seterusnya akan menimpanya—jika sempadan tidak sepadan dengan skala eksport, gelung kerja semula berlaku.

Contoh di bawah memberi tumpuan kepada Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture dan Cocos sprite sembilan hirisan memetakan kepada idea yang sama, termasuk content padding. Anchor dan Safe Area: senarai semak enjin + MCP item 6. Padding kawasan regangan dengan lokasi: limpahan lokasi semakan reka bentuk 7.

Senarai semak serahan reka bentuk item 6 memerlukan kawasan sembilan hirisan / regangan yang jelas. Catatan ini merangkumi bila perlu hirisan, tanda Figma/PSD, penerimaan tiga enjin, dan laluan kanvas skrin penuh, serta jadual pembaikan.

Kriteria gagal (mana-mana satu = tidak lulus): seni sudut berubah bentuk apabila diregangkan; ulangan atau jahitan tidak diingini dalam kawasan regangan; jejari sudut berubah dengan saiz panel; latar belakang boleh skala diskalakan bersama ikon/avatar tetap; skala eksport tidak sepadan dengan piksel sempadan enjin (jurang 1px atau tepi lembut).

---

Bila sembilan hirisan diperlukan vs regangan keras dilarang

Jenis aset	Buat	Jangan buat
Latar belakang dialog / panel tetapan	Sembilan hirisan + content padding	Sprite Simple tunggal penuh
Bekas input / bar	Sembilan hirisan atau penutup K/I + ulangan tengah	Himpit ketinggian tanpa peraturan seni
Butang utama (saiz tetap)	Sprite tetap atau sembilan hirisan + lebar minimum	Butang bulat lebar tak terhingga sebagai satu regangan
Ikon, avatar, bingkai kemahiran	Saiz tetap, tiada sembilan hirisan	Gabung dengan latar panel menjadi satu imej regangan
Latar skrin penuh (tiada kotak berbingkai)	Imej penuh atau strategi jubin dalam spesifikasi	Guna semula sempadan panel pada penuh

Peraturan: Jika lebar atau tinggi berubah dengan resolusi, teks, atau kandungan senarai dan sudut mesti kekalkan bentuk → sembilan hirisan atau setara enjin. Kawalan saiz tetap → sprite tetap + kekangan susun atur.

---

Tanda serahan Figma / PSD (senarai semak)

#	Semakan	Standard lulus
1	Lapisan regangan berasingan daripada dekor / ikon / teks	Latar panel boleh reskin + hirisan; ikon tidak diskalakan dengan latar
2	Sempadan / cap inset dalam px (empat sisi)	Sepadan @1x atau skala eksport pasukan dalam nota penghantaran
3	Skala eksport tetap (@1x/@2x atau asas 1080)	Kejuruteraan tidak meneka matematik sempadan
4	Jejari sudut di luar kawasan regangan atau spesifikasi benarkan sudut tidak regang	Tiada “sudut bertukar menjadi kapsul” lulus
5	Kawasan regangan mesra jubin atau pepejal	Ulangan tengah tanpa salah jajaran yang jelas
6	Nama semantik	Contoh Panel_Shop_9s, Input_Field_9s
7	Berbilang keadaan (normal / lumpuh) sempadan sama	Inset sepadan; hanya warna/skin berubah
8	Hirisan PSD atau nota eksport Figma padding telus	Jangan kira bayang dalam sempadan melainkan spesifikasi menyatakan
9	Hantar dengan item serahan 5 keadaan butang	Jangan tampal keadaan hilang dengan seni 9s salah
10	Reskin acara ubah seni sahaja, sempadan tidak berubah	Lihat spesifikasi reskin

Figma: letak cap inset dalam dokumen komponen apabila menggunakan bingkai boleh saiz semula atau pemalam hirisan. PSD: selaraskan hirisan dengan PSD ke Unity dalam 5 minit.

---

Tiga enjin: komponen dan penerimaan

Item	Unity UGUI	Godot 4 Control	Cocos UI
Komponen	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite sembilan hirisan / Sliced
Sumber sempadan	Sprite Editor Border (K/A/K/B px)	content_margin / patch	Cap insets (KAKB)
Kawasan kandungan	RectTransform + padding anak	MarginContainer + Theme	Widget / padding susun atur
Kegagalan tipikal	Salah guna Simple; sempadan skala salah	Patch vs saiz tekstur tidak sepadan	Putaran atlas memecahkan inset
Lulus	Pada 150% / 200% lebar: sudut tajam, tengah bersih	Sama; pratonton Theme sepadan Play	Sama; semakan peranti senarai panjang

Penerimaan Unity Editor (petakan ke enjin lain):

1. Tetapkan Prefab Image kepada Sliced dengan sempadan sepadan reka bentuk.
2. Seret RectTransform panel ke lebar reka bentuk min dan maks.
3. Bandingkan sudut, tepi, dan tengah dengan tangkapan Figma/PSD.
4. Jika mod Play OK → satu pas peranti setiap senarai semak pra-hantar.

---

Konsep skrin penuh: pecahan kanvas dan eksport semula

Dengan seni skrin penuh PNG atau AI sahaja, sempadan tidak boleh disimpulkan. Laluan: VberAI Studio (AI Studio, ≠ Google AI Studio) pecahan di tempat → tanda panel boleh skala → eksport Prefab (deterministik, bukan LLM YAML).

Langkah	Tindakan	Penerimaan
1	Skrin penuh pada kanvas; pecah Panel_* dan ikon tetap	Hierarki bernama
2	Sahkan niat 9-slice panel pada kanvas atau sebelum eksport	Pemilik untuk inset didokumenkan
3	Eksport Prefab Unity / Godot / Cocos	QA Sliced mengikut jadual di atas
4	Selepas reskin / lokasi, eksport semula pokok penuh	Jika spesifikasi sempadan tidak berubah, inset tidak berubah

Figma/PSD berlapis: utamakan Figma → Unity atau PSD ke UGUI, kemudian pelarasan sempadan kecil dalam enjin—elak eksport semula 20 PNG longgar setiap acara.

---

Laluan pembaikan

Gejala	Punca kemungkinan	Tindakan	Pemilik
Sudut kabur	Skala Simple pada keseluruhan imej	Sliced + sempadan betul; reka bentuk tambah tanda inset	Kejuruteraan + Reka Bentuk
Jahitan tengah / blok berulang	inset tersasar 1–2px; skala tidak sepadan	Padankan px reka bentuk; import semula sprite	Kejuruteraan
Sudut regang bujur	Seni tidak sepatutnya sembilan hirisan	Saiz tetap atau seni sudut baharu	Reka Bentuk
Sempadan berubah selepas reskin	Saiz seni baharu atau padding	Kunci saiz kanvas dalam spesifikasi reskin; QA semula selepas reskin	Reka Bentuk
Latar baris senarai berubah bentuk	Latar baris diregangkan seperti panel penuh	9s khusus baris atau ketinggian tetap	Reka Bentuk
Gagal hanya pada sesetengah resolusi	Skala Canvas Scaler bukan integer	Senarai semak enjin Anchor/Scaler	Kejuruteraan

Peraturan: Jika sempadan ≠ reka bentuk → betulkan tanda atau sumber sprite dahulu, kemudian Prefab. Pembaikan Inspector sahaja tanpa mengemas kini penghantaran → hilang pada eksport seterusnya.

---

vs serahan “hanya pek PNG”

Pendekatan	Sesuai	Tidak sesuai
Eksport manual + kejuruteraan isi sempadan	Sedikit panel, demo	Reskin kerap, banyak skrin
Figma/PSD + eksport berstruktur VberAI Studio	Berbilang skrin, berbilang enjin, acara	Menggantikan tanda inset dan QA
Sliced sementara dalam enjin	Baiki pantas satu skrin	Jangka panjang tanpa sumber reka bentuk

Disyorkan: tanda inset reka bentuk → eksport Prefab berstruktur → Unity Editor Sliced pada dua lebar → MCP untuk logik. Raycast dan pengikatan: senarai semak enjin + MCP.

---

Soalan Lazim

Bolehkah panel bulat guna sembilan hirisan?
Ya, tetapi inset mesti terletak pada tepi regangan lurus; sudut kekal dalam jubin sudut tidak regang. Jika jejari sudut bertambah dengan saiz panel → gagal; betulkan seni atau hadkan saiz maks.

Adakah bayang dikira dalam sempadan?
Spesifikasi produk yang tentukan. Jika bayang tidak regang, pisahkan lapisan atau tandakan inset pada segi empat pepejal tanpa cahaya luar.

Tiled vs Sliced?
Sliced untuk panel berbingkai; Tiled (atau seni tengah mesra jubin) untuk tekstur tengah berulang. Tulis dalam spesifikasi—jangan biarkan kejuruteraan meneka.

Hirisan berasingan untuk Godot / Cocos?
Satu semantik inset; tukar sasaran eksport melalui eksport kanvas berbilang enjin dan sahkan patch/cap mengikut jadual.

Adakah VberAI Studio auto-isi sempadan?
Bergantung pada eksport dan aset; penerimaan sentiasa enjin Sliced/StyleBox. Tiada inset dalam reka bentuk → kejuruteraan tetapkan sempadan dalam Editor dan rekod dalam spesifikasi.

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