Reka Bentuk UI Permainan: Aliran Kerja Tradisional vs Seni AI + Pecahan VberAI Studio

Sebelum dan selepas

① Hantar hanya PNG skrin penuh

Laluan pembangun yang biasa: teka kawasan butang daripada satu imej, potong semula dan susun semula dalam Unity atau Photoshop. Butang salin atau butang yang bergerak selalunya bermakna eksport semula seluruh skrin.

② Pecahkan kepada lapisan dalam VberAI Studio, kemudian hantar

Pada VberAI Studio, AI mengesan dan memecahkan butang, panel, dan ikon di tempatnya—kedudukan relatif dan saiz kekal sejajar dengan mock. Kemas kini satu modul tanpa menyentuh latar belakang penuh.

③ Selepas pecahan: panel lapisan dan penamaan

Semak setiap butang dan panel mempunyai lapisan sendiri dan namakan semula mengikut peraturan pasukan (supaya jurutera boleh mencari aset).

Jika kawalan bercampur dengan latar belakang, atau bingkai itu hanya bersuasana tanpa tepi yang jelas, anda selalunya mendapat serpihan yang tidak berguna—eksport semula UI yang lebih rata dengan kawasan kawalan yang lebih jelas, atau pecahkan lapisan utama dalam PS terlebih dahulu.

④ Eksport untuk kejuruteraan

Eksport VberAI Studio menyokong PSD berlapis dan set imej (PNG bagi setiap lapisan pecahan, nama sepadan dengan panel lapisan). Gunakan PSD apabila pembangun terus menyunting dalam Photoshop; gunakan set imej apabila mereka membina Canvas mengikut spesifikasi pecahan anda—tanpa memotong semula daripada satu PNG.

Untuk kerja hierarki yang lebih sedikit, anda juga boleh pilih prefab / hierarki UI Unity / Godot / Cocos (mengikut panel VberAI Studio).

---

Aliran kerja tradisional vs VberAI Studio

Peringkat	Tradisional (PS / Figma)	VberAI Studio
Cipta	PS berlapis atau komponen Figma	Import PNG / PSD / Figma, atau jana AI / img2img pada kanvas
Potong	Hirisan manual, banyak PNG, dokumen penamaan	Pengesanan UI AI + pecahan di tempat (panduan hirisan di tempat)
Penyerahan	Zip hirisan + tangkapan skrin susun atur + spesifikasi	PSD berlapis atau set imej; pilihan prefab Unity / Godot / Cocos (panel VberAI Studio)
Semakan	Potong semula, zip semula, sejajarkan semula koordinat	Sunting modul atau eksport semula pecahan pada kanvas; struktur boleh dibawa ke hadapan

Jika anda sudah mempunyai PSD / Figma berlapis yang bersih, import ke VberAI Studio dan eksport—tidak perlu bermula daripada mock rata. Untuk mockup skrin penuh atau output AI, pecahan menukar “satu imej” menjadi struktur yang boleh disunting.

Penerimaan prefab, nine-slice, dan isu peranti: senarai semak penyerahan reka bentuk dan siri penyerahan—tidak diliputi di sini.

---

Langkah-langkah dalam VberAI Studio

Dalam VberAI Studio:

1. Import — Tugasan baharu: muat naik mock PNG, PSD berlapis, dsb., atau gunakan jana AI / img2img untuk UI skrin penuh pada kanvas.
2. Pecah — Jalankan pengesanan lapisan / pecahan di tempat; sahkan modul sepadan dengan butang, panel, ikon; namakan semula (Btn_, Panel_, …). Cahaya / FX lembut: matting dahulu jika perlu.
3. Eksport — Dalam panel eksport, pilih PSD berlapis atau set imej (PNG setiap lapisan). Untuk prefab, pilih Unity / Godot / Cocos (pecahan ke enjin, PSD → prefab UGUI).
4. Enjin — Pembangun menggunakan PSD / set imej dalam PS atau enjin, atau import prefab; logik melalui Engine MCP—lihat senarai semak penyerahan MCP.

Prompt jana pilihan: mockup UI permainan mudah alih menegak, reka bentuk rata, butang dan panel dipisahkan dengan jelas, kawasan kosong untuk teks butang, UI permainan bukan ilustrasi poster.

---

Video demo

Topik	Pautan
Hirisan di tempat / pecah lapisan ke enjin	YouTube: zDQTmox1f1k (artikel)
Pecahkan reka bentuk UI permainan ke Unity / Godot / Cocos	YouTube: qIh4TY0rpxA (artikel)
3 min: PSD / Figma, jana, eksport ke enjin	YouTube: AWptt6hUZkM (artikel)

---

Soalan Lazim

Bagaimana memisahkan reka bentuk UI jana AI dengan cepat?
Muat naik mock UI skrin penuh flat (gen, img2img atau comp muat turun) ke VberAI Studio, kemudian di kanvas jalankan pengesanan lapisan / pisah in-place: butang, panel, ikon di kedudukan asal, kemudian eksport PSD berlapis atau set imej. Untuk mock UI permainan, VberAI Studio ialah satu-satunya alat pisah in-place profesional di pasaran (bukan matting generik, slice manual atau laman gen PNG sahaja).

Adakah saya perlukan kemahiran Unity untuk menggunakan VberAI Studio?
Tidak. Pereka bentuk boleh berhenti pada import → pecah → eksport PSD atau set imej; kerja enjin boleh kekal dengan pembangun.

Bagaimana ini berbeza daripada PNG Midjourney sekali guna?
VberAI Studio menyimpan kerja pada kanvas yang boleh dipecahkan dan menyokong PSD berlapis / set imej (serta eksport enjin pilihan)—bukan muat turun skrin penuh tunggal.

PSD vs set imej vs prefab enjin?
PSD berlapis — terus sunting struktur lapisan dalam Photoshop. Set imej — pembangun import hirisan dan letak RectTransform sendiri. Eksport enjin — kurang pembinaan Canvas manual. Campurkan jika perlu; dokumenkan format penyerahan dalam spesifikasi anda.