Bangun UI Game Siap Produksi dalam 3 Menit dengan AI Studio (Panduan Video)

Tonton Tutorial Resmi

Video: Game developers, you need to see this 👀 di kanal YouTube VberAI

Dari deskripsi resmi:

Bangun UI game siap produksi dalam 3 menit. Tanpa pemotongan manual. Tanpa pengaturan berulang. Tanpa jam terbuang. Impor PSD & Figma → Hasilkan UI game dengan AI → Uraikan aset secara otomatis → Ekspor langsung ke Unity, Cocos & Godot.

Apa yang Ditunjukkan Demo

VberAI Studio (nama pendek: AI Studio) memperlakukan file desain sebagai hierarki terstruktur, bukan gambar datar:

• Kiri: PSD / Figma berlapis
• Tengah: pratinjau kanvas
• Kanan: ekspor siap mesin untuk Unity, Godot, atau Cocos Creator

Anda mendapatkan prefab / pohon Kontrol yang dapat digunakan kembali—ideal untuk menu, HUD, dan kerangka toko yang berulang di seluruh proyek Anda.

Siapa yang Harus Menonton

Peran	Manfaat
Serah terima desainer + insinyur	Lebih sedikit bolak-balik membangun ulang tata letak di mesin
Pengembang solo	Kirim layar UI yang dapat dimainkan dengan cepat
Studio multi-mesin	Satu kebiasaan desain, banyak target ekspor

Panduan Langkah demi Langkah

1. Siapkan file desain

• Gunakan PSD berlapis atau bingkai Figma bernama—bukan PNG gabungan tunggal
• Beri nama grup dengan jelas (Btn_Start, Panel_HUD)
• Buka VberAI Studio di VberAI (AI Studio)

2. Impor dan periksa

1. Buat impor baru dari PSD atau Figma
2. Konfirmasi grup lapisan cocok dengan blok UI di panel lapisan
3. Sembunyikan bingkai draf; perbaiki masalah penamaan yang jelas

3. Pratinjau dan ekspor

• Periksa jarak dan urutan overlay di kanvas
• Tetapkan mesin target: Unity, Godot, atau Cocos Creator
• Pilih output hierarki UI / prefab—bukan hanya sprite
• Pilih TextMeshPro (Unity) atau komponen teks mesin jika tersedia

4. Impor ke mesin

1. Impor paket ke folder tim Anda (Assets/UI/, dll.)
2. Buka prefab yang dihasilkan; jadikan induk di bawah Canvas (Unity) atau root Control (Godot)
3. Uji asap 16:9 dan rasio aspek ponsel tinggi

Jika Anda juga menjalankan Unity MCP atau Godot MCP, minta klien AI Anda untuk mengganti nama node secara batch atau menghubungkan sinyal pressed setelah impor.

Bagaimana Ini Cocok dengan Tumpukan VberAI

Produk	Peran
AI Studio	Desain → struktur UI mesin
Unity / Godot / Cocos MCP	Otomatisasi editor pasca-impor
AI Super Matting	Bersihkan alfa ikon sebelum ekspor

Tata letak tetap di alat desain; pengkabelan dan perilaku tetap di mesin. Untuk perbandingan Godot yang lebih dalam, baca Figma ke Godot: Manual vs AI Studio.

FAQ

Apakah video ini mencakup pengaturan MCP? Ini berfokus pada AI Studio. Untuk pengaturan Cocos Creator MCP, lihat Cara Mengatur Cocos Creator MCP (Tutorial Video).

Mesin mana yang didukung? Deskripsi video mencantumkan ekspor Unity, Cocos, dan Godot.

Apakah “3 menit” realistis? Untuk UI satu layar yang bersih dengan lapisan bernama, impor + ekspor pertama sering kali memakan waktu menit—bukan jam kerja RectTransform manual. Tema, font, dan lokalisasi masih memerlukan proses mesin.

URL video resmi? https://www.youtube.com/watch?v=AWptt6hUZkM — kanal @vber_ai.

Panduan Terkait

• Cara Mengimpor PSD ke Unity UI dalam 5 Menit dengan AI Studio
• Pengaturan Cocos Creator MCP (Tutorial Video)

Berlangganan VberAI di YouTube, atau buka VberAI Studio dan coba ekspor yang sama pada layar berikutnya.