VberAI In-Place Slice: Impor Gambar Desain UI Game ke Unity / Godot / Cocos dalam Satu Klik

VberAI Studio (≠ Google AI Studio) mendukung pemotongan di tempat (in-place slicing): membagi gambar desain UI game layar penuh menjadi elemen UI terpisah, mempertahankan tata letak dan ukuran asli, lalu mengekspor ke Unity / Godot / Cocos dalam satu klik—tanpa memotong PNG secara manual dan membangun ulang hierarki di engine.

Pemotongan tradisional vs pemotongan di tempat

	Pemotongan tradisional	Pemotongan di tempat VberAI
Proses	Pilih kotak PNG → seret ke engine → sesuaikan posisi dan hierarki	AI mendeteksi elemen UI → memotong di tempat → mengekspor per engine
Output	Terutama gambar longgar	Modul berlapis + hierarki UI / prefab yang dapat diimpor
Data posisi	Sering hilang setelah dipotong; sejajarkan manual di engine	Posisi dan ukuran relatif dipertahankan dengan potongan

Apa arti pemotongan di tempat

1. Di tempat — Tombol, panel, dan lainnya yang dipotong tetap pada koordinat dan ukuran relatif aslinya.
2. Potong / bagi — AI mendeteksi tombol, panel, ikon, judul, dan formulir menjadi modul yang dapat diberi nama dan diekspor.
3. Satu klik ke engine — Pilih Unity / Godot / Cocos Creator dan ekspor hierarki UI atau prefab (sesuai panel Studio).

Jika Anda sudah memiliki lapisan Figma / PSD yang terpisah, impor dan ekspor ke engine secara langsung—tanpa langkah pemotongan di tempat; lihat Figma→Unity dan panduan terkait. Gunakan artikel ini hanya untuk mockup layar penuh datar atau output UI AI.

Langkah-langkah

1. Siapkan gambar desain UI layar penuh

Input dapat berupa:

• Menu utama layar penuh, HUD, toko, dll. yang dihasilkan di kanvas
• Mockup seni / desain yang diekspor sebagai PNG
• Gambar desain UI layar penuh lainnya (utamakan resolusi yang cukup dan tepi kontrol yang jelas)

2. Bagi elemen UI di tempat

Di kanvas, jalankan bagi / ekstrak:

• Pisahkan kontrol yang dapat diklik dari dekorasi
• Pertahankan posisi dan ukuran relatif asli
• Panel lapisan menampilkan nama modul yang dapat dibaca (untuk mengganti nama dan mengikat)

3. Ekspor ke engine target dalam satu klik

Pilih Unity, Godot, atau Cocos Creator. Utamakan output hierarki UI / prefab.

• Unity: Impor di bawah Canvas; periksa RectTransform
• Godot: Lampirkan di bawah root Control; periksa anchors dan Theme
• Cocos: Periksa Widget, Layout, dan Button

4. Terima di engine

1. Buka prefab / root UI scene yang dihasilkan
2. Mainkan pada 16:9 dan rasio potret target Anda; klik melalui jalur utama
3. Pastikan tidak ada pergeseran global, tombol dapat diklik, dan tidak ada lapisan yang menghalangi
4. Untuk menghubungkan logika, gunakan Engine MCP dari Cursor atau klien serupa

Detail lebih lanjut dan koneksi MCP: Bagi gambar desain UI game ke engine.

Keterbatasan

• Ekspor pertama jarang sempurna secara piksel; font, lokalisasi, dan gerakan masih memerlukan polesan di engine.
• Kualitas pemotongan tergantung pada kejelasan sumber; tepi buram atau lapisan kacau mungkin memerlukan ekspor ulang atau perbaikan manual.
• Pemotongan di tempat mengemas struktur—tidak menggantikan skrip gameplay.
• VberAI Studio ≠ Google AI Studio — lihat perbandingan.

Pemborosan umum dalam serah terima UI game adalah memotong mockup layar penuh secara manual dan membangunnya kembali di engine. VberAI Studio menempatkan desain layar penuh → pemotongan di tempat → Unity / Godot / Cocos dalam satu kanvas. Produk: AI Studio.

FAQ

Apa itu pemotongan di tempat VberAI? Di VberAI Studio, AI mendeteksi elemen pada gambar desain UI game layar penuh, membaginya di posisi aslinya, mempertahankan tata letak dan ukuran, lalu mengekspor ke engine.

Bisakah saya mengimpor ke Unity / Godot / Cocos dalam satu klik? Ya—ekspor atau dorong hierarki UI / prefab untuk engine target (sesuai kemampuan Studio saat ini). Uji coba di Play setelah impor.

Apa bedanya dengan memotong PNG secara manual? Pemotongan manual sering menghasilkan gambar longgar tanpa semantik tata letak; pemotongan di tempat menghasilkan modul berlapis dan struktur engine, mengurangi pekerjaan membangun ulang.

Apakah ini sama dengan impor Figma / PSD? Studio AI yang sama, input berbeda. Jika Figma / PSD sudah memiliki lapisan terpisah, impor file desain dan ekspor ke engine secara langsung—tanpa pemotongan di tempat; lihat Figma→Unity, PSD→Unity. Gunakan artikel ini hanya untuk komposisi layar penuh datar (tanpa lapisan).