VberAI End-to-End: AI Studio + Engine MCP untuk Mini-Game yang Dapat Dimainkan

Bagi indie dan tim kecil, hambatan jarang berupa “tidak bisa menulis satu baris kode pun.” Biasanya ada dua jalur yang berjalan paralel:

1. Struktur UI dan seni tidak pernah masuk dengan rapi ke engine—memotong komp, membangun ulang pohon Canvas / Control, nama dan hierarki yang tidak cocok
2. Gameplay dan skrip mahal untuk diiterasi—memasang ulang komponen, mengejar error, masuk ke Play—berjam-jam hilang karena pekerjaan editor yang repetitif

VberAI membagi pekerjaan tersebut menjadi dua lapisan. Ini tidak mengklaim “satu tombol, game jadi”:

Lapisan	Produk	Tugas
Canvas → UI engine	AI Studio	Hasilkan UI game dari bahasa alami, atau impor PSD / Figma; pisahkan, matte, edit, lalu sinkronkan/ekspor ke Unity, Godot, Cocos Creator
Engine ↔ AI IDE	Engine MCP (Unity / Godot / Cocos)	Kendalikan editor yang terbuka dari Cursor, Claude Code, Codex, dan klien serupa: logika, skrip, debug, pratinjau

Sisa panduan ini adalah jalur berbentuk produksi untuk slice 0–1 yang dapat dimainkan dan untuk siklus revisi selanjutnya.

Pipeline end-to-end

Tujuan gameplay / file desain / brief UI bahasa alami
        │
        ├─→ AI Studio (hasilkan · impor · pisahkan · matte · komponenkan · ekspor)
        │         ↓
        │    Hierarki UI / prefab / aset scene di proyek engine
        │
        └─→ AI IDE + Engine MCP (baca scene · tulis skrip · sambungkan · Play/debug)
                  ↓
             Slice gameplay yang bisa didemokan → kembali ke Studio atau terus gunakan MCP sesuai jenis perubahan

Aturan praktis:

• Dapatkan struktur UI yang benar di kanvas sebelum wiring engine yang dalam
• Biarkan perilaku dan angka di engine; manusia yang memiliki hasil Play
• Commit sebelum edit besar; jaga jembatan MCP hanya di localhost

AI Studio: aset antarmuka siap-engine

AI Studio untuk struktur UI / antarmuka game—bukan kotak obrolan generik, dan bukan pengganti state machine pertarungan di engine.

Jalur 1: UI bahasa alami (belum ada file desain)

Bantu saya mendesain game match-3 bergaya chibi

Lalu verifikasi di kanvas: target hit vs dekorasi, nama yang bisa diikat oleh skrip, tata letak di bawah resolusi target. Demo di bawah:

Jalur 2: Impor PSD / Figma / aset proyek (desain sudah ada)

1. Impor komp berlapis atau UI yang sudah ada
2. AI split menjadi panel, item daftar, bingkai dialog
3. Tepi keras (rambut, cahaya, semi-transparan) via AI Super Matting jika diperlukan, lalu kembali ke Studio
4. Komponenkan dan sinkronkan / ekspor ke Unity, Godot, atau Cocos Creator

Demo impor dan split PSD / Figma:

Apa yang dihasilkan langkah ini

Menghasilkan	Tidak menghasilkan
Hierarki UI yang dapat dipasang, tekstur, struktur prefab/scene	FSM pertarungan lengkap, otoritas netcode, sistem simpan

Contoh serah terima yang lebih dalam: Figma ke Unity UI.

Engine MCP: logika yang digerakkan dialog dan pekerjaan editor

MCP (Model Context Protocol) memungkinkan AI IDE memanggil alat lokal. Plugin engine VberAI mengekspos editor yang terbuka ke klien: scene/node, skrip, bantuan debug dan pratinjau—bukan hanya menempelkan file ke repo.

Pilih dan instal sesuai engine:

• Unity MCP · panduan instalasi
• Godot MCP (open source) · panduan instalasi
• Cocos 3.x / 2.x · instal 3.x · instal 2.x

Perbandingan: Godot MCP vs Unity MCP vs Cocos MCP.

Demo: setelah ekspor Studio, Cursor + Godot MCP mengirim chibi match-3

Melanjutkan Jalur 1: UI sudah ada di Godot dari AI Studio. Hubungkan Godot MCP di Cursor dan kendalikan editor dengan bahasa alami—tanpa menulis satu baris kode pun dengan tangan—untuk mengimplementasikan gameplay chibi match-3 dan debug hingga dapat dimainkan. Rekaman di bawah:

Cocok untuk MCP

• Slice gameplay yang dapat diuji: kontrol pemain, pertarungan sederhana, state musuh, wiring quest
• Rename batch hierarki / pohon scene, pasang komponen, ikat HUD hasil ekspor Studio ke event
• Dalam batas plugin: log, konteks seleksi, edit kecil yang dapat dibalik lalu Play

Kurang cocok

• Otoritas multiplayer tanpa review atau penulisan ulang pipeline render penuh
• “Satu prompt, kirim game komersial”
• Mengganti keputusan arah seni dan feel—itu tetap butuh manusia dalam mode Play

Contoh kerja: 3D RPG dengan Unity MCP, 2D platformer dengan Godot MCP.

0–1: jalur minimal

Targetkan slice yang bisa didemokan dalam hitungan jam, bukan daftar fitur.

1. Tentukan lingkup slice — misalnya “gerak + satu musuh + satu HUD” atau “satu level platform + restart”
2. Instal MCP dan smoke read-only — daftar root scene; konfirmasi AI IDE terhubung
3. UI placeholder atau gameplay dulu — Label/Slider sementara sistem belum selesai; buka AI Studio saat menu/HUD harus terlihat selesai
4. Majukan logika via MCP — satu perhatian per prompt: kontrol → damage → musuh → kondisi gagal/quest
5. Polish UI saat diperlukan — ekspor Studio → MCP mengikat tombol dan event nilai
6. Penerimaan Play — feel, tabrakan, refresh UI; jika gagal, persempit prompt dan coba lagi

Iterasi cepat: pilih loop berdasarkan jenis perubahan

Perubahan	Preferensi
Feel, angka, AI, navigasi, bug skrip, wiring node	AI IDE → engine MCP
Visual layar penuh, reskin, split lapisan, ekspor ulang prefab	AI Studio (+ matting jika perlu)
Masih macet di “komp tidak mau masuk engine”	Struktur Studio dulu, lalu MCP

Keuntungan yang diharapkan konkret: lebih sedikit membangun ulang UI dari nol di editor, dan lebih sedikit klik repetitif. Ini tidak menghilangkan penilaian desain atau pengujian.

Checklist tim

• Lisensi: Unity / Cocos MCP mengikuti aktivasi resmi; Godot MCP dapat memvalidasi kebiasaan melalui open source
• Keamanan: MCP Server hanya di 127.0.0.1
• Prompt dengan kriteria penerimaan: jalur, titik lampir, apa yang harus ditampilkan Play dalam ~10 detik, refactor di luar lingkup
• Review: selalu Play-test skrip yang dihasilkan dan edit node—MCP memotong biaya operasi, bukan QA

Kesimpulan

Kisah berguna VberAI adalah pemisahan sakit frekuensi tinggi—bukan “otomatisasi penuh”:

• AI Studio: bahasa alami atau PSD/Figma → struktur UI untuk Unity / Godot / Cocos
• Engine MCP: bahasa alami di AI IDE → logika dalam editor, skrip, debug, pratinjau

Gunakan loop yang tepat dan slice 0–1 plus siklus revisi berjalan lebih cepat. Lewati batas (menulis FSM pertarungan di kanvas, MCP mengiris seluruh paket UI) dan Anda menambah pengerjaan ulang. Adopsi satu lapisan atau keduanya sesuai tahap proyek—Anda tidak perlu semua produk di hari pertama.