VberAI Studio: गेम UI डिज़ाइन छवियों को विभाजित करें और Unity / Godot / Cocos में आयात करें

मुख्य बात पहले: VberAI Studio (≠ Google AI Studio) गेम UI डिज़ाइन छवियों को अलग-अलग तत्वों में विभाजित करता है, मूल लेआउट और आकार बनाए रखता है, और एक क्लिक में कैनवास से Unity / Godot / Cocos UI एसेट्स निर्यात करता है—एक फुल-स्क्रीन कॉन्सेप्ट शीट से आयात योग्य प्रीफ़ैब/पदानुक्रम तक, स्वचालित पाइपलाइन के माध्यम से, बिना मैन्युअल स्लाइसिंग और पुनर्निर्माण के।

चरण: गेम UI डिज़ाइन छवि से इंजन डिलीवरी तक

1. इनपुट तैयार करें: फुल-स्क्रीन गेम UI डिज़ाइन छवि

AI Studio में एक नया कार्य बनाएं। इनपुट हो सकता है:

• कैनवास में उत्पन्न फुल-स्क्रीन गेम UI (मुख्य मेनू, HUD, दुकान, आदि)
• कला / डिज़ाइन मॉकअप, विज़ुअल कंप, या PNG के रूप में निर्यात की गई कॉन्सेप्ट शीट
• कोई अन्य फुल-स्क्रीन UI डिज़ाइन छवि (पर्याप्त रिज़ॉल्यूशन और स्पष्ट बटन/पैनल सीमाएं पसंदीदा)

टिप: छवि जितनी अधिक अंतिम एक-स्क्रीन UI जैसी दिखती है, विभाजन उतना ही आसान होता है; अस्पष्ट मूड बोर्ड से बचें जिनमें पहचानने योग्य नियंत्रण क्षेत्र न हों।

2. पूरी छवि को कैनवास पर रखें और संरचना का पूर्वावलोकन करें

जनरेशन या आयात के बाद, UI गेम कैनवास पूर्वावलोकन में दिखना चाहिए। जांचें:

• बटन, पैनल, और शीर्षक क्षेत्रों की स्पष्ट सीमाएं हों
• कोई स्पष्ट ओवरलैप, क्रॉपिंग, या कलाकृतियां न हों (विभाजन या निर्यात से पहले ठीक करें)
• निर्यात पक्ष पर लक्ष्य इंजन (Unity / Godot / Cocos) चयनित हो

3. UI तत्वों को उनके मूल स्थानों में विभाजित करें

कैनवास पर, विभाजित / UI तत्व निकालें चलाएं (सटीक UI कॉपी उत्पाद के अनुसार भिन्न हो सकती है)। लक्ष्य:

• प्रत्येक क्लिक करने योग्य नियंत्रण (बटन, टैब, सूची आइटम) को सजावट से अलग करें
• मूल सापेक्ष स्थिति और आकार बनाए रखें ताकि इंजन में कुछ भी न भटके
• परत पैनल में नामित मॉड्यूल दिखने चाहिए (बाद में नाम बदलने और बाइंडिंग के लिए)

यह “फ़ोटोशॉप में 20 PNG मैन्युअल रूप से स्लाइस करके Unity में खींचने” से मुख्य अंतर है: स्थिति डेटा विभाजन के साथ रहता है।

4. निर्यात से पहले परतें और नामकरण जांचें

विभाजन के बाद, कैनवास पर पुष्टि करें:

जांच	नोट्स
हिट क्षेत्र बनाम सजावट	बटन पृष्ठभूमि और आइकन अलग किए गए ताकि हॉटस्पॉट सटीक रहें
टेक्स्ट परतें	जिन शीर्षकों को आपको संपादित करने की आवश्यकता है वे पठनीय और बदलने योग्य रहें
स्ट्रेचेबल पृष्ठभूमि	पैनल नौ-स्लाइस / पृष्ठभूमि विभिन्न रिज़ॉल्यूशन के लिए उपयुक्त हों
नामकरण	नोड नाम इंजन में स्पष्ट हों (जैसे Btn_Start, Panel_Shop)

आयात से पहले स्पेसिंग समायोजित करें या ड्राफ्ट परतें छिपाएं जब संभव हो—प्रीफ़ैब लैंडिंग के बाद विभाजन अधिक लागत वाला होता है।

5. लक्ष्य इंजन चुनें और निर्यात / पुश करें

Unity, Godot, या Cocos Creator चुनें। UI पदानुक्रम / प्रीफ़ैब आउटपुट पसंद करें—न केवल एक ढीली छवि फ़ोल्डर (जब तक आपको केवल एसेट पैक की आवश्यकता न हो)।

• Unity: Assets/UI/ या अपने कन्वेंशन के अंतर्गत आयात करें, Canvas के अंतर्गत संलग्न करें, RectTransform और Layout Group जांचें
• Godot: Control रूट के अंतर्गत संलग्न करें, Theme, anchors, और minimum_size जांचें
• Cocos: Widget, Layout, और Button घटक जांचें

यदि उत्पाद खुले प्रोजेक्ट में पुश का समर्थन करता है, तो मैन्युअल कॉपी कम हो सकती है; वर्तमान Studio पैनल का पालन करें।

6. लेआउट सत्यापित करें, फिर Engine MCP के साथ लॉजिक वायर करें

निर्यात आपके प्रोजेक्ट में आने के बाद, दो परतों में काम करें: पहले UI संरचना को मान्य करें, फिर MCP का उपयोग करें ताकि एक AI क्लाइंट इंटरैक्शन और गेमप्ले वायरिंग उत्पन्न करे—आपको हर पंक्ति के लिए खाली स्क्रिप्ट फ़ाइलों से शुरू करने की आवश्यकता नहीं है।

6a. लेआउट और हिट क्षेत्र (स्मोक टेस्ट)

1. उत्पन्न प्रीफ़ैब / दृश्य UI रूट खोलें
2. 16:9 और अपने लक्ष्य पोर्ट्रेट अनुपात पर खेलें; मुख्य पथ (प्रारंभ, वापस, टैब स्विच, आदि) पर क्लिक करें
3. फ़ॉन्ट, सुरक्षित क्षेत्र, स्थानीयकरण प्लेसहोल्डर जांचें; बटन हॉटस्पॉट और कोई अवरुद्ध परतें न हों
4. यदि नोड नाम गड़बड़ हैं, तो पहले संपादक में एकीकृत करें (जैसे Btn_Start, Panel_Shop)—MCP बाद में नाम से नियंत्रण ढूंढता है

6b. VberAI Engine MCP + AI संपादक वायरिंग (अनुशंसित)

VberAI Studio “स्थिर अवधारणा → संरचित UI एसेट्स” संभालता है; बटन कॉलबैक, पेज नेविगेशन, और स्वास्थ्य / इन्वेंटरी गेमप्ले डेटा से बाइंडिंग पहले से खुले इंजन प्रोजेक्ट में VberAI Engine MCP को जा सकते हैं। Cursor, Claude Code, या किसी भी MCP-सक्षम क्लाइंट में, प्राकृतिक भाषा में इच्छा का वर्णन करें, उदाहरण के लिए:

• “Btn_Start क्लिक को MainMenu दृश्य पर लोड लॉजिक से वायर करें”
• “शॉप सूची आइटम क्लिक Panel_Detail खोलता है और मूल्य टेक्स्ट रीफ्रेश करता है”
• “HUD स्वास्थ्य बार PlayerHealth बदलने पर fillAmount अपडेट करता है”

MCP सीधे संपादक नोड ट्री, घटक संदर्भ, और स्क्रिप्ट अनुलग्नकों को संचालित करता है—प्रोजेक्ट में C# / GDScript / TypeScript उत्पन्न या संपादित करता है—चैट से कोड चिपकाने की तुलना में प्ले-रेडी स्वीकृति के करीब।

लक्ष्य इंजन	MCP स्थापना और सेटअप
Unity	Unity MCP स्थापना; क्लाइंट सेटअप: Cursor / Claude Code + Unity MCP
Godot	Godot MCP स्थापना और सक्षम करें
Cocos Creator	अवलोकन: Cocos Creator MCP क्या है; स्थापना: 3.x, 2.x; वीडियो: Cocos MCP सेटअप ट्यूटोरियल

Studio निर्यात के बाद पूर्ण उदाहरण (स्वास्थ्य से बंधा Unity HUD): AI Studio HUD को स्वास्थ्य ईवेंट से Unity MCP के साथ बांधें। एंड-टू-एंड श्रृंखला: AI Studio + Engine MCP वर्कफ़्लो।

कार्य विभाजन: AI Studio पैकेजिंग और लेयरिंग हल करता है; Engine MCP संपादक में लॉजिक, सिग्नल, और आयात के बाद दृश्य संपादन हल करता है—एक ही पाइपलाइन, न तो UI संरचना और न ही गेमप्ले स्क्रिप्ट को शून्य से पूरी तरह मैन्युअल पुनर्निर्माण की आवश्यकता होती है।

इंजन-पूर्व स्वीकृति चेकलिस्ट

1. विभाजन पूर्णता — मुख्य बटन, बंद कुंजियाँ, सूची आइटम मौजूद; कोई फंसे हुए क्षेत्र न हों
2. स्थिति और आकार — कैनवास पूर्वावलोकन से मेल खाते हों; कोई वैश्विक बहाव न हो
3. अल्फा और किनारे — आइकन साफ़ रूप से कुंजीबद्ध; यदि आवश्यक हो तो AI पृष्ठभूमि हटाने के साथ प्रीप्रोसेस करें
4. रिज़ॉल्यूशन और सुरक्षित क्षेत्र — नॉच और अल्ट्रावाइड मुख्य नियंत्रणों को क्लिप न करें
5. हिट क्षेत्र — क्लिक करने योग्य क्षेत्र सजावटी कला से बड़ा हो; कोई गलत टैप न हो
6. इंजन अनुलग्नक — Unity Prefab, Godot PackedScene, Cocos prefab संदर्भ बरकरार हों

यह अन्य VberAI Studio पथों के साथ कैसे फिट बैठता है

आपका प्रारंभिक बिंदु	संभावित पथ
लेयर्ड Figma / PSD	Figma→Unity, Figma→Godot, PSD→Unity
फुल-स्क्रीन गेम UI डिज़ाइन (AI आउटपुट, मॉकअप)	यह लेख: डिज़ाइन छवि को इंजन में विभाजित करें
कौशल / VFX / रन साइकिल के लिए AI वीडियो	अनुक्रम फ़्रेम और ट्रेलरों को इंजन में
आयात के बाद बैच नाम बदलें और सिग्नल बाइंड करें	Unity / Godot / Cocos Engine MCP (देखें AI टूल वर्गीकरण)

पथ स्टैक: फुल-स्क्रीन UI डिज़ाइन → Studio विभाजन → Engine MCP वायरिंग और स्क्रिप्ट के लिए एक AI संपादक में।

सीमाएं

• VberAI Studio स्वयं गेमप्ले नियम उत्पन्न नहीं करता है; पोस्ट-आयात स्क्रिप्टिंग और नोड बाइंडिंग Engine MCP + AI संपादकों को जा सकते हैं, सभी हस्तलिखित कोड के बजाय।
• संपूर्ण डिज़ाइन छवियां शायद ही पहले पास पर पिक्सेल-परफेक्ट निर्यात करती हैं; फ़ॉन्ट, स्थानीयकरण, और गति को अभी भी इंजन में पॉलिश की आवश्यकता होती है।
• विभाजन गुणवत्ता स्रोत स्पष्टता पर निर्भर करती है; धुंधले नियंत्रण किनारे या अव्यवस्थित परतों को पुनः निर्यात या मैन्युअल सुधार की आवश्यकता हो सकती है।
• MCP एक खुले प्रोजेक्ट ऑब्जेक्ट ट्री को संचालित करता है; जटिल लड़ाई सूत्र, नेट सिंक, और Timeline कटसीन अभी भी इंजन में मानव समीक्षा के योग्य हैं।
• पूरा नाम VberAI Studio ≠ Google AI Studio — देखें तुलना।

सारांश

गेम UI के साथ सामान्य अपशिष्ट एक गैर-क्लिक करने योग्य डिज़ाइन पूरी छवि को हाथ से इंजन में फिर से बनाना है, फिर हर पंक्ति UI लॉजिक हाथ से लिखना। VberAI Studio फुल-स्क्रीन UI डिज़ाइन → स्थान पर विभाजन → Unity / Godot / Cocos डिलीवरी को एक गेम कैनवास पर रखता है; आयात के बाद, Cursor और समान AI संपादकों में VberAI Engine MCP स्टैक करें ताकि बटन बांधें और प्राकृतिक भाषा में स्क्रिप्ट पुनरावृत्त करें। आधिकारिक डेमो: YouTube qIh4TY0rpxA। उत्पाद प्रवेश: AI Studio।

FAQ

क्या VberAI Studio गेम UI डिज़ाइन छवियों को Unity / Godot / Cocos में आयात कर सकता है? हाँ। एक फुल-स्क्रीन UI डिज़ाइन (AI आउटपुट या कला मॉकअप) को कैनवास पर रखें, UI तत्वों को विभाजित करें, लेआउट और आकार बनाए रखें, फिर लक्ष्य इंजन के लिए प्रीफ़ैब / पदानुक्रम निर्यात या पुश करें।

VberAI Studio एक PNG को Canvas पर ड्रॉप करने से कैसे अलग है? एक अकेले PNG में कोई संपादन योग्य पदानुक्रम या संरक्षित स्थिति नहीं होती है; VberAI Studio विभाजित UI मॉड्यूल और इंजन संरचना आउटपुट करता है, मैन्युअल स्लाइसिंग और RectTransform / Control ट्री पुनर्निर्माण को कम करता है।

क्या यह Figma / PSD आयात के समान है? एक ही AI Studio कैनवास, विभिन्न इनपुट: Figma / PSD पहले से लेयर्ड वेक्टर / डिज़ाइन फ़ाइलें उपयोग करते हैं; यह लेख फुल-स्क्रीन UI डिज़ाइन छवियों (फ्लैट कंप) को कवर करता है। जब आपके पास पूर्ण परतें हों तो Figma / PSD पसंद करें; इस पथ का उपयोग केवल फुल-स्क्रीन मॉकअप या AI आउटपुट के लिए करें।

विभाजित बटन क्लिक करने योग्य कैसे बनते हैं? पहले इंजन में स्पष्ट नोड नामों की पुष्टि करें। फिर Cursor / Claude Code में VberAI Engine MCP कनेक्ट करें और प्राकृतिक भाषा में बाइंडिंग का वर्णन करें (गेम शुरू करें, दुकान खोलें, आदि)—MCP Button / सिग्नल संलग्न करता है और संपादक में स्क्रिप्ट उत्पन्न या संपादित करता है। Unity उदाहरण: HUD स्वास्थ्य से बंधा; Cocos स्थापना: 3.x MCP, 2.x MCP।

क्या मुझे आयात के बाद भी सभी लॉजिक हाथ से लिखने होंगे? नहीं। Studio UI संरचना और एसेट्स संभालता है; Engine MCP AI संपादकों के माध्यम से एक खुले प्रोजेक्ट में स्क्रिप्ट और घटक संदर्भ उत्पन्न करता है। जटिल गेमप्ले को अभी भी मानव समीक्षा और प्ले स्वीकृति की आवश्यकता होती है।

क्या यह AI वीडियो फ़्रेम विभाजन के समान है? नहीं। यह लेख स्थिर UI स्क्रीन विभाजन है; कौशल, रन साइकिल, और VFX लूप वीडियो → फ़्रेम इंजन में का उपयोग करते हैं।

क्या VberAI Google AI Studio के समान है? नहीं। VberAI Studio एक गेम एसेट कैनवास है; Google AI Studio एक सामान्य मॉडल प्लेग्राउंड है। देखें Google AI Studio बनाम VberAI।

क्या कोई आधिकारिक वॉकथ्रू है? हाँ: AI-जनित गेम कला को इंटरैक्टिव UI में बदलें, चैनल VberAI for Game Dev।

पहले निर्यात पर क्या जांचना चाहिए? विभाजन पूर्णता, बटन हॉटस्पॉट, मल्टी-रिज़ॉल्यूशन एंकर; थीम फ़ॉन्ट और स्थानीयकरण को आमतौर पर इंजन में एक और पास की आवश्यकता होती है।