← ब्लॉग पर वापस

AI Studio के साथ 3 मिनट में प्रोडक्शन-रेडी गेम UI बनाएं (वीडियो गाइड)

आधिकारिक VberAI YouTube वॉकथ्रू—VberAI AI Studio के साथ PSD/Figma इम्पोर्ट करें और मिनटों में Unity, Cocos Creator और Godot में गेम UI एक्सपोर्ट करें।

प्रकाशित
  • vberai
  • ai-studio
  • video
  • psd
  • figma
  • unity
  • godot
  • cocos
  • tutorial
YouTube पर देखें

आधिकारिक ट्यूटोरियल देखें

वीडियो: गेम डेवलपर्स, यह देखना ज़रूरी है 👀 VberAI YouTube चैनल पर

आधिकारिक विवरण से:

3 मिनट में प्रोडक्शन-रेडी गेम UI बनाएं। कोई मैन्युअल स्लाइसिंग नहीं। कोई दोहराव वाला सेटअप नहीं। कोई बर्बाद घंटे नहीं। PSD और Figma इम्पोर्ट करें → AI से गेम UI जनरेट करें → एसेट्स को ऑटो-ब्रेक डाउन करें → सीधे Unity, Cocos और Godot में एक्सपोर्ट करें।

डेमो क्या दिखाता है

VberAI AI Studio (संक्षिप्त नाम: AI Studio) डिज़ाइन फ़ाइलों को संरचित पदानुक्रम के रूप में मानता है, न कि फ्लैट इमेज के रूप में:

  • बाएँ: लेयर्ड PSD / Figma
  • केंद्र: कैनवस प्रीव्यू
  • दाएँ: Unity, Godot, या Cocos Creator के लिए इंजन-रेडी एक्सपोर्ट

आपको पुन: प्रयोज्य प्रीफ़ैब / कंट्रोल ट्री मिलते हैं—मेनू, HUD और शॉप शेल के लिए आदर्श जो आपके प्रोजेक्ट में दोहराए जाते हैं।

किसे देखना चाहिए

भूमिकालाभ
डिज़ाइनर + इंजीनियर हैंडऑफ़इंजन में लेआउट को फिर से बनाने के कम चक्कर
एकल डेवलपरजल्दी से एक प्लेएबल UI स्क्रीन शिप करें
मल्टी-इंजन स्टूडियोएक डिज़ाइन आदत, कई एक्सपोर्ट लक्ष्य

चरण-दर-चरण साथी

1. डिज़ाइन फ़ाइल तैयार करें

  • एक लेयर्ड PSD या नामित Figma फ्रेम का उपयोग करें—एक मर्ज की गई PNG नहीं
  • समूहों को स्पष्ट रूप से नाम दें (Btn_Start, Panel_HUD)
  • VberAI पर VberAI AI Studio (AI Studio) खोलें

2. इम्पोर्ट और निरीक्षण करें

  1. PSD या Figma से एक नया इम्पोर्ट बनाएँ
  2. लेयर पैनल में लेयर ग्रुप्स को UI ब्लॉक से मिलाएँ
  3. स्क्रैच फ्रेम छिपाएँ; स्पष्ट नामकरण समस्याओं को ठीक करें

3. प्रीव्यू और एक्सपोर्ट करें

  • कैनवस पर स्पेसिंग और ओवरले ऑर्डर की जाँच करें
  • लक्ष्य इंजन सेट करें: Unity, Godot, या Cocos Creator
  • UI पदानुक्रम / प्रीफ़ैब आउटपुट चुनें—केवल स्प्राइट नहीं
  • जहाँ उपलब्ध हो, TextMeshPro (Unity) या इंजन के टेक्स्ट कंपोनेंट को प्राथमिकता दें

4. इंजन में इम्पोर्ट करें

  1. पैकेज को अपनी टीम फ़ोल्डर (Assets/UI/, आदि) में इम्पोर्ट करें
  2. जनरेटेड प्रीफ़ैब खोलें; Canvas (Unity) या Control रूट (Godot) के अंतर्गत पैरेंट करें
  3. 16:9 और एक लंबे फ़ोन आस्पेक्ट रेशियो का स्मोक-टेस्ट करें

यदि आप Unity MCP या Godot MCP भी चलाते हैं, तो इम्पोर्ट के बाद नोड्स को बैच-रीनेम करने या pressed सिग्नल वायर करने के लिए अपने AI क्लाइंट को प्रॉम्प्ट करें।

यह VberAI स्टैक में कैसे फिट बैठता है

उत्पादभूमिका
AI Studioडिज़ाइन → इंजन UI संरचना
Unity / Godot / Cocos MCPइम्पोर्ट के बाद एडिटर ऑटोमेशन
AI Super Mattingएक्सपोर्ट से पहले साफ़ आइकन अल्फा

लेआउट डिज़ाइन टूल्स में रहता है; वायरिंग और व्यवहार इंजन में रहता है। गहरी Godot तुलना के लिए, Figma to Godot: Manual vs AI Studio पढ़ें।

FAQ

क्या यह वीडियो MCP सेटअप को कवर करता है? यह AI Studio पर केंद्रित है। Cocos Creator MCP सेटअप के लिए Cocos Creator MCP वीडियो गाइड देखें।

कौन से इंजन समर्थित हैं? वीडियो विवरण में Unity, Cocos, और Godot एक्सपोर्ट सूचीबद्ध हैं।

क्या “3 मिनट” यथार्थवादी है? नामित लेयर्स वाली एक साफ, एकल-स्क्रीन UI के लिए, पहला इम्पोर्ट + एक्सपोर्ट अक्सर मिनटों में होता है—मैन्युअल RectTransform काम के घंटों में नहीं। थीम, फ़ॉन्ट और लोकलाइज़ेशन के लिए अभी भी इंजन पास की आवश्यकता है।

आधिकारिक वीडियो URL? https://www.youtube.com/watch?v=AWptt6hUZkM — चैनल @vber_ai.

संबंधित गाइड

VberAI को YouTube पर सब्सक्राइब करें, या VberAI AI Studio खोलें और अपनी अगली स्क्रीन पर वही एक्सपोर्ट आज़माएँ।

आपको ये लेख भी पसंद आ सकते हैं

Cocos Creator 3.x MCP इंस्टॉल गाइड: एक्सटेंशन आयात कर AI IDE कनेक्ट करें

VberAI Cocos Creator 3.x MCP Pro को चरणबद्ध इंस्टॉल करें—एक्सटेंशन मैनेजर से आयात, खाता सक्रिय करें, स्थानीय MCP सर्वर शुरू करें, और Cursor, Claude, Codex या अन्य MCP-सक्षम AI IDE में कनेक्शन जाँचें।

  • cocos
  • cocos-creator
  • mcp
  • cursor
और पढ़ें

Cocos Creator 2.x MCP स्थापना गाइड: packages में इंस्टॉल कर AI IDE कनेक्ट करें

VberAI Cocos Creator 2.x MCP Pro को चरण दर चरण स्थापित करें—packages में अनज़िप, पुनरारंभ और सक्रिय करें, स्थानीय MCP सर्वर शुरू करें, और Cursor, Claude, Codex या अन्य MCP-सक्षम AI IDE में कनेक्शन जाँचें।

  • cocos
  • cocos-creator
  • mcp
  • cursor
और पढ़ें