Bina UI Permainan Sedia-Produksi dalam 3 Minit dengan AI Studio (Panduan Video)

Tonton Tutorial Rasmi

Video: Pembangun permainan, anda perlu lihat ini 👀 di saluran YouTube VberAI

Dari penerangan rasmi:

Bina UI permainan sedia-produksi dalam 3 minit. Tiada pemotongan manual. Tiada persediaan berulang. Tiada jam terbuang.
Import PSD & Figma → Jana UI permainan dengan AI → Pecahkan aset secara automatik → Eksport terus ke Unity, Cocos & Godot.

Apa yang Ditunjukkan dalam Demo

VberAI Studio (nama pendek: AI Studio) menganggap fail reka bentuk sebagai hierarki berstruktur, bukan imej rata:

• Kiri: PSD / Figma berlapis
• Tengah: pratonton kanvas
• Kanan: eksport sedia-enjin untuk Unity, Godot, atau Cocos Creator

Anda mendapat prefab / pokok Kawalan yang boleh diguna semula—sesuai untuk menu, HUD, dan rangka kedai yang berulang dalam projek anda.

Siapa Patut Menonton

Peranan	Manfaat
Pereka + jurutera serah	Kurang perjalanan ulang-alik membina semula susun atur dalam enjin
Pembangun solo	Hantar skrin UI yang boleh dimainkan dengan cepat
Studio pelbagai enjin	Satu tabiat reka bentuk, pelbagai sasaran eksport

Langkah demi langkah

1. Sediakan fail reka bentuk

• Gunakan PSD berlapis atau bingkai Figma yang dinamakan—bukan PNG tunggal yang digabungkan
• Namakan kumpulan dengan jelas (Btn_Start, Panel_HUD)
• Buka VberAI Studio di VberAI (AI Studio)

2. Import dan periksa

1. Buat import baharu daripada PSD atau Figma
2. Sahkan kumpulan lapisan sepadan dengan blok UI dalam panel lapisan
3. Sembunyikan bingkai calar; betulkan isu penamaan yang jelas

3. Pratonton dan eksport

• Periksa jarak dan susunan tindanan pada kanvas
• Tetapkan enjin sasaran: Unity, Godot, atau Cocos Creator
• Pilih output hierarki UI / prefab—bukan hanya sprite
• Utamakan TextMeshPro (Unity) atau komponen teks enjin jika tersedia

4. Import ke dalam enjin

1. Import pakej ke folder pasukan anda (Assets/UI/, dsb.)
2. Buka prefab yang dijana; letakkan di bawah Canvas (Unity) atau akar Control (Godot)
3. Uji asap 16:9 dan nisbah aspek telefon tinggi

Jika anda juga menjalankan Unity MCP atau Godot MCP, arahkan klien AI anda untuk menamakan semula nod secara kelompok atau menyambungkan isyarat pressed selepas import.

Bagaimana Ini Sesuai dengan Tindanan VberAI

Produk	Peranan
AI Studio	Struktur UI dari reka bentuk ke enjin
Unity / Godot / Cocos MCP	Automasi editor selepas import
AI Super Matting	Alfa ikon bersih sebelum eksport

Susun atur kekal dalam alat reka bentuk; pendawaian dan tingkah laku kekal dalam enjin. Untuk perbandingan Godot yang lebih mendalam, baca Figma ke Godot: Manual vs AI Studio.

Soalan Lazim

Adakah video ini merangkumi persediaan MCP?
Ia memberi tumpuan kepada AI Studio. Untuk persediaan Cocos Creator MCP, lihat Cara Menyediakan Cocos Creator MCP (Tutorial Video).

Enjin mana yang disokong?
Penerangan video menyenaraikan eksport Unity, Cocos, dan Godot.

Adakah “3 minit” realistik?
Untuk UI skrin tunggal yang bersih dengan lapisan dinamakan, import + eksport pertama selalunya dalam beberapa minit—bukan jam kerja RectTransform manual. Tema, fon, dan penyetempatan masih memerlukan langkah enjin.

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

Panduan Berkaitan

• Cara Import PSD ke Unity UI dalam 5 Minit dengan AI Studio
• Persediaan Cocos Creator MCP (Tutorial Video)

Langgan VberAI di YouTube, atau buka VberAI Studio dan cuba eksport yang sama pada skrin seterusnya.