गेम UI नाइन-स्लाइस और स्केलेबल पैनल: Figma / PSD मार्क्स और इंजन स्लाइस्ड QA

जब किसी पैनल को चौड़ा खींचा जाता है, तो धुंधले कोने, दोहराती हुई सेंटर टेक्सचर, या अंडाकार कोने आमतौर पर इसका मतलब होता है कि हैंडऑफ़ के समय नाइन-स्लाइस (9-slice / cap insets) निर्दिष्ट नहीं किया गया था, या इंजन पूरे स्प्राइट पर Simple स्केल का उपयोग कर रहा है। Unity Editor में Image Type और बॉर्डर ट्यून करने से एक स्क्रीन बच सकती है, लेकिन अगली डिज़ाइन ड्रॉप उसे ओवरराइट कर देती है—अगर बॉर्डर एक्सपोर्ट स्केल से मेल नहीं खाते, तो रीवर्क लूप चलते रहते हैं।

नीचे दिए गए उदाहरण Unity UGUI Image (Sliced / Tiled) पर केंद्रित हैं। Godot StyleBoxTexture और Cocos स्प्राइट नाइन-स्लाइस भी इन्हीं विचारों पर मैप होते हैं, जिसमें content padding भी शामिल है। Anchors और Safe Area: engine + MCP checklist आइटम 6। लोकेल के साथ स्ट्रेच-रीजन पैडिंग: locale overflow डिज़ाइन चेक 7।

Design handoff checklist आइटम 6 में स्पष्ट नाइन-स्लाइस / स्ट्रेच रीजन की आवश्यकता है। यह पोस्ट कब स्लाइस करें, Figma/PSD मार्क्स, तीन-इंजन स्वीकृति, और फुल-स्क्रीन कैनवास पाथ, साथ ही एक फिक्स टेबल कवर करती है।

फेल मानदंड (कोई एक भी = पास नहीं): खींचे जाने पर कोने का आर्ट विकृत हो जाए; स्ट्रेच रीजन में अनपेक्षित रिपीट या सीम दिखे; पैनल साइज़ के साथ कोने की त्रिज्या बदले; स्केलेबल बैकग्राउंड फिक्स्ड आइकॉन/अवतार के साथ स्केल हो जाए; एक्सपोर्ट स्केल इंजन बॉर्डर पिक्सल से मेल न खाए (1px गैप या सॉफ्ट एज)।

---

नाइन-स्लाइस कब ज़रूरी है बनाम हार्ड स्ट्रेच कब मना है

एसेट प्रकार	करें	न करें
डायलॉग / सेटिंग्स पैनल bg	नाइन-स्लाइस + content padding	सिंगल Simple स्प्राइट फुल ब्लीड
इनपुट / बार कंटेनर	नाइन-स्लाइस या L/R cap + सेंटर रिपीट	आर्ट नियमों के बिना ऊँचाई स्क्वैश करना
प्राइमरी बटन (फिक्स्ड साइज़)	फिक्स्ड स्प्राइट या नाइन-स्लाइस + मिनिमम विड्थ	अनंत चौड़ा राउंडेड बटन एक ही स्ट्रेच में
आइकॉन, अवतार, स्किल फ्रेम	फिक्स्ड साइज़, नाइन-स्लाइस नहीं	पैनल bg के साथ एक ही स्ट्रेच इमेज में मर्ज करना
फुल-स्क्रीन bg (बिना फ्रेम्ड बॉक्स)	स्पेक में फुल इमेज या टाइल रणनीति	फुल ब्लीड पर पैनल बॉर्डर दोबारा उपयोग करना

नियम: अगर चौड़ाई या ऊँचाई रेज़ोल्यूशन, कॉपी, या लिस्ट कंटेंट के साथ बदलती है और कोनों को आकार बनाए रखना है → नाइन-स्लाइस या इंजन समकक्ष। फिक्स्ड-साइज़ कंट्रोल → फिक्स्ड स्प्राइट + लेआउट कंस्ट्रेंट।

---

Figma / PSD हैंडऑफ़ मार्क्स (टिक लिस्ट)

#	चेक	पास मानक
1	स्ट्रेच लेयर decor / icons / text से अलग	पैनल bg रीस्किन + स्लाइस; आइकॉन bg के साथ स्केल न हों
2	Border / cap inset px में (चारों ओर)	डिलीवरी नोट्स में @1x या टीम एक्सपोर्ट स्केल से मेल
3	फिक्स्ड एक्सपोर्ट स्केल (@1x/@2x या 1080 बेसलाइन)	इंजीनियरिंग बॉर्डर गणित का अनुमान न लगाए
4	कोने की त्रिज्या स्ट्रेच रीजन के बाहर या स्पेक नॉन-स्ट्रेच कोने की अनुमति दे	”कोने कैप्सूल बन जाएँ” वाला पास न हो
5	स्ट्रेच रीजन टाइल-फ्रेंडली या सॉलिड	सेंटर रिपीट बिना स्पष्ट मिसअलाइनमेंट के
6	सेमांटिक नाम	जैसे Panel_Shop_9s, Input_Field_9s
7	मल्टी-स्टेट (normal / disabled) समान बॉर्डर	इनसेट्स मेल खाएँ; केवल रंग/स्किन बदले
8	PSD स्लाइस या Figma एक्सपोर्ट नोट्स ट्रांसपेरेंट पैडिंग	जब तक स्पेक न कहे, बॉर्डर में शैडो न गिनें
9	handoff item 5 बटन स्टेट्स के साथ डिलीवर करें	गलत 9s आर्ट से मिसिंग स्टेट्स पैच न करें
10	इवेंट रीस्किन केवल आर्ट बदले, बॉर्डर अपरिवर्तित	देखें reskin स्पेक

Figma: रिसाइज़ेबल फ्रेम्स या स्लाइस प्लगइन्स का उपयोग करते समय कंपोनेंट डॉक्स में cap inset रखें। PSD: स्लाइस को PSD to Unity in 5 minutes के साथ संरेखित करें।

---

तीन इंजन: कंपोनेंट्स और स्वीकृति

आइटम	Unity UGUI	Godot 4 Control	Cocos UI
कंपोनेंट	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
बॉर्डर स्रोत	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
कंटेंट एरिया	RectTransform + चाइल्ड पैडिंग	MarginContainer + Theme	Widget / लेआउट पैडिंग
सामान्य फेल	Simple का गलत उपयोग; गलत-स्केल बॉर्डर	Patch बनाम टेक्सचर साइज़ मिसमैच	Atlas रोटेशन से inset टूटना
पास	150% / 200% चौड़ाई पर: तेज़ कोने, साफ़ सेंटर	वही; Theme प्रीव्यू Play से मेल	वही; लंबी लिस्ट पर डिवाइस स्पॉट-चेक

Unity Editor स्वीकृति (अन्य इंजन पर मैप करें):

1. Prefab Image को डिज़ाइन से मेल खाते बॉर्डर के साथ Sliced पर सेट करें।
2. पैनल RectTransform को मिनिमम और मैक्सिमम डिज़ाइन चौड़ाई तक ड्रैग करें।
3. कोनों, किनारों, और सेंटर की तुलना Figma/PSD कैप्चर से करें।
4. अगर Play मोड ठीक है → pre-ship checklist के अनुसार एक डिवाइस पास।

---

फुल-स्क्रीन कॉन्सेप्ट: कैनवास स्प्लिट और री-एक्सपोर्ट

केवल PNG या AI फुल-स्क्रीन आर्ट होने पर बॉर्डर का अनुमान नहीं लगाया जा सकता। पाथ: VberAI Studio (AI Studio, ≠ Google AI Studio) in-place split → स्केलेबल पैनल मार्क करें → export Prefab (डिटरमिनिस्टिक, LLM YAML नहीं)।

चरण	क्रिया	स्वीकृति
1	कैनवास पर फुल स्क्रीन; Panel_* और फिक्स्ड आइकॉन स्प्लिट करें	नामित हायरार्की
2	कैनवास पर या एक्सपोर्ट से पहले पैनल का 9-slice इरादा पुष्टि करें	Inset के लिए ओनर डॉक्युमेंटेड
3	Unity / Godot / Cocos Prefab एक्सपोर्ट करें	ऊपर की टेबल के अनुसार Sliced QA
4	रीस्किन / लोकेल के बाद, फुल-ट्री री-एक्सपोर्ट	अगर बॉर्डर स्पेक अपरिवर्तित, तो insets अपरिवर्तित

लेयर्ड Figma/PSD: Figma → Unity या PSD to UGUI को प्राथमिकता दें, फिर इंजन में मामूली बॉर्डर ट्वीक करें—हर इवेंट पर 20 अलग PNGs दोबारा एक्सपोर्ट करने से बचें।

---

फिक्स रूटिंग

लक्षण	संभावित कारण	क्रिया	ओनर
धुंधले कोने	पूरी इमेज पर Simple स्केल	Sliced + सही बॉर्डर; डिज़ाइन inset मार्क जोड़े	इंजीनियरिंग + डिज़ाइन
सेंटर सीम / रिपीट ब्लॉक्स	inset 1–2px ऑफ; स्केल मिसमैच	डिज़ाइन px से मेल करें; स्प्राइट रीइम्पोर्ट करें	इंजीनियरिंग
कोने अंडाकार खिंचें	आर्ट को नाइन-स्लाइस नहीं करना चाहिए	फिक्स्ड साइज़ या नया कोना आर्ट	डिज़ाइन
रीस्किन के बाद बॉर्डर बदले	नया आर्ट साइज़ या पैडिंग	रीस्किन स्पेक में कैनवास साइज़ लॉक करें; reskin के बाद री-QA	डिज़ाइन
लिस्ट रो bg विकृत हो	रो bg पूरे पैनल की तरह खींचा गया	रो-स्पेसिफिक 9s या फिक्स्ड ऊँचाई	डिज़ाइन
केवल कुछ रेज़ोल्यूशन पर फेल	Canvas Scaler नॉन-इंटीजर स्केल	Engine checklist Anchor/Scaler	इंजीनियरिंग

नियम: अगर बॉर्डर ≠ डिज़ाइन → पहले मार्क्स या स्प्राइट स्रोत ठीक करें, फिर Prefab। डिलीवरी अपडेट किए बिना केवल Inspector फिक्स → अगले एक्सपोर्ट पर खो जाएँगे।

---

बनाम “केवल PNG पैक” हैंडऑफ़

दृष्टिकोण	उपयुक्त	अनुपयुक्त
मैनुअल एक्सपोर्ट + इंजीनियरिंग बॉर्डर भरे	कुछ पैनल, डेमो	बार-बार रीस्किन, कई स्क्रीन
Figma/PSD + VberAI Studio स्ट्रक्चर्ड एक्सपोर्ट	मल्टी-स्क्रीन, मल्टी-इंजन, इवेंट्स	inset मार्क्स और QA की जगह लेना
इंजन में अस्थायी Sliced	एक स्क्रीन हॉटफिक्स	डिज़ाइन स्रोत के बिना दीर्घकालिक

अनुशंसित: डिज़ाइन inset मार्क्स → स्ट्रक्चर्ड Prefab एक्सपोर्ट → दो चौड़ाइयों पर Unity Editor Sliced → लॉजिक के लिए MCP। Raycast और बाइंडिंग: engine + MCP checklist।

---

FAQ

क्या राउंडेड पैनल नाइन-स्लाइस उपयोग कर सकते हैं?
हाँ, लेकिन insets सीधे स्ट्रेच किनारों पर होने चाहिए; कोने नॉन-स्ट्रेच कोना टाइल्स में रहते हैं। अगर पैनल साइज़ के साथ कोने की त्रिज्या बढ़े → फेल; आर्ट ठीक करें या मैक्स साइज़ कैप करें।

क्या शैडो बॉर्डर में गिने जाते हैं?
प्रोडक्ट स्पेक तय करता है। अगर शैडो स्ट्रेच नहीं होता, तो लेयर स्प्लिट करें या बाहरी ग्लो के बिना सॉलिड रेक्ट पर inset मार्क करें।

Tiled बनाम Sliced?
फ्रेम्ड पैनल के लिए Sliced; दोहराते मध्य टेक्सचर के लिए Tiled (या टाइल-फ्रेंडली सेंटर आर्ट)। स्पेक में लिखें—इंजीनियरिंग को अनुमान लगाने न छोड़ें।

Godot / Cocos के लिए अलग स्लाइस?
एक ही inset सेमांटिक्स; canvas multi-engine export के ज़रिए एक्सपोर्ट टारगेट स्विच करें और टेबल के अनुसार patch/cap सत्यापित करें।

क्या VberAI Studio बॉर्डर ऑटो-फिल करता है?
एक्सपोर्ट और एसेट्स पर निर्भर; स्वीकृति हमेशा इंजन Sliced/StyleBox ही है। डिज़ाइन में inset न हो → इंजीनियरिंग Editor में बॉर्डर सेट करे और स्पेक में रिकॉर्ड करे।

क्या VberAI Studio, Google AI Studio के समान है?
नहीं। देखें comparison।