VberAI Studio: Pisahkan Gambar Desain UI Game dan Impor ke Unity / Godot / Cocos

VberAI Studio (≠ Google AI Studio) memisahkan gambar desain UI game menjadi elemen terpisah, mempertahankan tata letak dan ukuran asli, dan mengekspor aset UI Unity / Godot / Cocos dari kanvas dalam satu klik—dari lembar konsep layar penuh ke prefab/hierarki yang dapat diimpor melalui pipeline otomatis, tanpa pemotongan manual dan pembangunan ulang.

Langkah: Dari Gambar Desain UI Game ke Pengiriman Engine

1. Siapkan input: gambar desain UI game layar penuh

Buat tugas baru di AI Studio. Input dapat berupa:

• UI game layar penuh yang dibuat di kanvas (menu utama, HUD, toko, dll.)
• Mockup seni / desain, komp visual, atau lembar konsep yang diekspor sebagai PNG
• Gambar desain UI layar penuh lainnya (sebaiknya resolusi cukup dan batas tombol/panel jelas)

Tip: semakin mirip gambar dengan UI satu layar final, semakin mudah pemisahannya; hindari papan suasana hati yang tidak jelas tanpa wilayah kontrol yang dapat dikenali.

2. Tempatkan gambar penuh di kanvas dan pratinjau struktur

Setelah pembuatan atau impor, UI akan muncul di pratinjau kanvas game. Periksa:

• Tombol, panel, dan wilayah judul memiliki batas yang jelas
• Tidak ada tumpang tindih, pemotongan, atau artefak yang jelas (perbaiki sebelum pemisahan atau ekspor)
• Engine target (Unity / Godot / Cocos) dipilih di sisi ekspor

3. Pisahkan elemen UI di posisi aslinya

Di kanvas, jalankan pisahkan / ekstrak elemen UI (salinan UI persis mungkin berbeda-beda antar produk). Tujuan:

• Pisahkan setiap kontrol yang dapat diklik (tombol, tab, item daftar) dari dekorasi
• Pertahankan posisi relatif dan ukuran asli sehingga tidak ada yang bergeser di engine
• Panel lapisan harus menampilkan modul bernama (untuk penggantian nama dan pengikatan nanti)

Ini adalah perbedaan inti dari “memotong 20 PNG secara manual di Photoshop dan menyeret ke Unity”: data posisi tetap bersama pemisahan.

4. Periksa lapisan dan penamaan sebelum ekspor

Setelah pemisahan, konfirmasi di kanvas:

Periksa	Catatan
Area klik vs dekorasi	Latar belakang tombol dan ikon dipisahkan sehingga titik panas tetap akurat
Lapisan teks	Judul yang perlu Anda edit tetap dapat dibaca dan diganti
Latar belakang yang dapat diregangkan	Panel nine-slice / latar belakang cocok untuk resolusi berbeda
Penamaan	Nama node jelas di engine (mis. Btn_Start, Panel_Shop)

Sesuaikan jarak atau sembunyikan lapisan draf sebelum impor bila memungkinkan—memisahkan setelah prefab mendarat memakan biaya lebih.

5. Pilih engine target dan ekspor / dorong

Pilih Unity, Godot, atau Cocos Creator. Utamakan output hierarki UI / prefab—bukan hanya folder gambar longgar (kecuali Anda hanya membutuhkan paket aset).

• Unity: Impor di bawah Assets/UI/ atau konvensi Anda, lampirkan di bawah Canvas, periksa RectTransform dan Layout Group
• Godot: Lampirkan di bawah root Control, periksa Theme, anchor, dan minimum_size
• Cocos: Periksa Widget, Layout, dan komponen Button

Jika produk mendukung dorong ke proyek yang terbuka, penyalinan manual dapat dikurangi; ikuti panel Studio saat ini.

6. Verifikasi tata letak, lalu hubungkan logika dengan Engine MCP

Setelah ekspor mendarat di proyek Anda, kerjakan dalam dua lapisan: validasi struktur UI terlebih dahulu, lalu gunakan MCP sehingga klien AI menghasilkan interaksi dan pengkabelan gameplay—Anda tidak perlu memulai dari file skrip kosong untuk setiap baris.

6a. Tata letak dan area klik (uji asap)

1. Buka prefab / root UI scene yang dihasilkan
2. Mainkan pada 16:9 dan rasio potret target Anda; klik melalui jalur utama (mulai, kembali, peralihan tab, dll.)
3. Periksa font, area aman, placeholder lokalisasi; konfirmasi titik panas tombol dan tidak ada lapisan yang memblokir
4. Jika nama node berantakan, seragamkan di editor terlebih dahulu (mis. Btn_Start, Panel_Shop)—MCP menemukan kontrol berdasarkan nama nanti

6b. VberAI Engine MCP + pengkabelan editor AI (disarankan)

VberAI Studio menangani “konsep statis → aset UI terstruktur”; callback tombol, navigasi halaman, dan pengikatan ke data gameplay kesehatan / inventaris dapat diteruskan ke VberAI Engine MCP di proyek engine yang sudah terbuka. Di Cursor, Claude Code, atau klien berkemampuan MCP lainnya, jelaskan niat dalam bahasa alami, misalnya:

• “Hubungkan klik Btn_Start ke logika muat pada scene MainMenu”
• “Klik item daftar toko membuka Panel_Detail dan menyegarkan teks harga”
• “Bar kesehatan HUD memperbarui fillAmount saat PlayerHealth berubah”

MCP mengoperasikan pohon node editor, referensi komponen, dan lampiran skrip secara langsung—menghasilkan atau mengedit C# / GDScript / TypeScript di dalam proyek—lebih dekat ke penerimaan siap-main daripada menempel kode dari obrolan.

Engine target	Instalasi & pengaturan MCP
Unity	Instal Unity MCP; pengaturan klien: Cursor / Claude Code + Unity MCP
Godot	Instal & aktifkan Godot MCP
Cocos Creator	Ikhtisar: Apa itu Cocos Creator MCP; instal: 3.x, 2.x; video: Tutorial pengaturan Cocos MCP

Contoh lengkap setelah ekspor Studio (HUD Unity terikat ke kesehatan): Ikat HUD AI Studio ke peristiwa kesehatan dengan Unity MCP. Rantai ujung-ke-ujung: Alur kerja AI Studio + Engine MCP.

Pembagian kerja: AI Studio memecahkan pengemasan dan pelapisan; Engine MCP memecahkan logika dalam editor, sinyal, dan pengeditan scene setelah impor—pipeline yang sama, baik struktur UI maupun skrip gameplay tidak perlu dibangun ulang sepenuhnya secara manual dari nol.

Daftar periksa penerimaan pra-engine

1. Kelengkapan pemisahan — tombol utama, tombol tutup, item daftar ada; tidak ada wilayah yang menempel
2. Posisi dan ukuran — cocok dengan pratinjau kanvas; tidak ada pergeseran global
3. Alpha dan tepi — ikon dipisahkan dengan bersih; praproses dengan penghapusan latar belakang AI jika perlu
4. Resolusi dan area aman — poni dan ultrawide tidak memotong kontrol utama
5. Area klik — wilayah yang dapat diklik lebih besar dari seni dekoratif; tidak ada salah klik
6. Lampiran engine — referensi Unity Prefab, Godot PackedScene, Cocos prefab tetap utuh

Bagaimana ini cocok dengan jalur VberAI Studio lainnya

Titik awal Anda	Jalur yang mungkin
Figma / PSD berlapis	Figma→Unity, Figma→Godot, PSD→Unity
Desain UI game layar penuh (output AI, mockup)	Artikel ini: gambar desain dipisahkan ke engine
Video AI untuk skill / VFX / siklus lari	Urutan bingkai dan trailer ke engine
Ganti nama batch dan ikat sinyal setelah impor	Engine MCP Unity / Godot / Cocos (lihat taksonomi alat AI)

Jalur bertumpuk: desain UI layar penuh → pemisahan Studio → Engine MCP untuk pengkabelan dan skrip di editor AI.

Keterbatasan

• VberAI Studio tidak menghasilkan aturan gameplay sendiri; skrip pasca-impor dan pengikatan node dapat diteruskan ke Engine MCP + editor AI alih-alih semua kode tulisan tangan.
• Gambar utuh desain jarang diekspor piksel-sempurna pada percobaan pertama; font, lokalisasi, dan gerakan masih memerlukan polesan dalam engine.
• Kualitas pemisahan bergantung pada kejelasan sumber; tepi kontrol buram atau lapisan kacau mungkin perlu ekspor ulang atau perbaikan manual.
• MCP mengoperasikan pohon objek proyek terbuka; formula pertarungan kompleks, sinkronisasi jaringan, dan cutscene Timeline tetap layak ditinjau manusia dalam engine.
• Nama lengkap VberAI Studio ≠ Google AI Studio — lihat perbandingan.

Pemborosan umum dengan UI game adalah membangun ulang gambar utuh desain yang tidak dapat diklik dengan tangan di engine, lalu menulis tangan setiap baris logika UI. VberAI Studio menempatkan desain UI layar penuh → pemisahan di tempat → pengiriman Unity / Godot / Cocos di satu kanvas game; setelah impor, tumpuk VberAI Engine MCP di Cursor dan editor AI serupa untuk mengikat tombol dan mengulangi skrip dalam bahasa alami. Demo resmi: YouTube qIh4TY0rpxA. Entri produk: AI Studio.

FAQ

Bisakah VberAI Studio mengimpor gambar desain UI game ke Unity / Godot / Cocos?
Ya. Tempatkan desain UI layar penuh (output AI atau mockup seni) di kanvas, pisahkan elemen UI, pertahankan tata letak dan ukuran, lalu ekspor atau dorong prefab / hierarki untuk engine target.

Bagaimana VberAI Studio berbeda dari menjatuhkan PNG di Canvas?
PNG tunggal tidak memiliki hierarki yang dapat diedit atau posisi yang dipertahankan; VberAI Studio menghasilkan modul UI terpisah dan struktur engine, mengurangi pemotongan manual dan pembangunan ulang pohon RectTransform / Control.

Apakah ini sama dengan impor Figma / PSD?
Kanvas AI Studio yang sama, input berbeda: Figma / PSD menggunakan file vektor / desain yang sudah berlapis; artikel ini mencakup gambar desain UI layar penuh (komp datar). Utamakan Figma / PSD saat Anda memiliki lapisan lengkap; gunakan jalur ini untuk mockup layar penuh atau output AI saja.

Bagaimana tombol yang dipisahkan menjadi dapat diklik?
Konfirmasi nama node yang jelas di engine terlebih dahulu. Kemudian hubungkan VberAI Engine MCP di Cursor / Claude Code dan jelaskan pengikatan dalam bahasa alami (mulai game, buka toko, dll.)—MCP melampirkan Button / sinyal dan menghasilkan atau mengedit skrip di editor. Contoh Unity: HUD terikat ke kesehatan; instal Cocos: 3.x MCP, 2.x MCP.

Apakah saya masih menulis tangan semua logika setelah impor?
Tidak. Studio menangani struktur dan aset UI; Engine MCP menghasilkan skrip dan referensi komponen di proyek terbuka melalui editor AI. Gameplay kompleks masih memerlukan tinjauan manusia dan penerimaan Play.

Apakah ini sama dengan pemisahan bingkai video AI?
Tidak. Artikel ini adalah pemisahan layar UI statis; skill, siklus lari, dan loop VFX menggunakan video → bingkai ke engine.

Apakah VberAI sama dengan Google AI Studio?
Tidak. VberAI Studio adalah kanvas aset game; Google AI Studio adalah taman bermain model umum. Lihat Google AI Studio vs VberAI.

Apakah ada panduan resmi?
Ya: Ubah Seni Game yang Dihasilkan AI menjadi UI Interaktif, saluran VberAI for Game Dev.

Apa yang harus diperiksa pada ekspor pertama?
Kelengkapan pemisahan, titik panas tombol, jangkar multi-resolusi; font tema dan lokalisasi biasanya memerlukan langkah tambahan di engine.