गेम UI सेफ एरिया और डिवाइस QA: डीबग क्रम और Prefab फिक्स

सबसे आम रिपोर्ट: Game view ठीक दिखता है, लेकिन लंबे फ़ोन पर HUD नॉच के नीचे बैठ जाता है, या बटन टैप करने योग्य दिखते हैं पर हिट चूक जाते हैं। Safe Area का मतलब “Anchor को ज़रा खिसकाना” नहीं है—यह root Canvas नीति, full-bleed बैकग्राउंड बनाम inset कंटेंट, और यह कि रनटाइम safeArea चैनल से मेल खाता है या नहीं है।

विफलता वर्ग, Unity UGUI डीबग क्रम, Prefab फिक्स नियम, और चैनल/मिनी-गेम चेतावनियाँ। डिज़ाइन हैंडऑफ़ आइटम 7 के safe-zone मार्क्स “डिज़ाइन को क्या देना चाहिए” के अंतर्गत संक्षेपित हैं; प्री-शिप आइटम 1 का डिवाइस दायरा यहाँ विस्तारित है—यह इंजन + MCP चेकलिस्ट Raycast / पहले Play की पुनरावृत्ति नहीं है।

Godot / Cocos: DisplayServer.get_display_safe_area() / इंजन SafeArea विजेट्स पर मैप करें; नीचे Unity जैसा ही चरण क्रम।

विफलता मानदंड (कोई एक भी = पास नहीं): प्राथमिक पठनीय UI या आवश्यक बटन सिस्टम ऑक्लूज़न (नॉच, होम इंडिकेटर, गोल कोने) के नीचे; स्पष्ट विज़ुअल बनाम हिट ऑफ़सेट; Editor में केवल 16:9 और डिवाइस पर कोई लक्ष्य आस्पेक्ट नहीं; Dev बनाम Release Safe Area व्यवहार बिना स्पेक के भिन्न।

---

पहले वर्गीकृत करें: क्लिप, ऑफ़सेट, या केवल बैकग्राउंड

लक्षण	पहले संदेह	इंजीनियरिंग कार्रवाई
विज़ुअल क्लिप (नॉच में टेक्स्ट/आइकन)	कंटेंट inset नहीं; root को पूरी स्क्रीन माना	safeArea बनाम कंटेंट रेक्ट जाँचें
टैप ऑफ़सेट (सही दिखे, चूके)	Canvas स्केल मोड, कई Canvas, कैमरा बेमेल	EventSystem raycast + Canvas renderMode
बैकग्राउंड क्लिप, बटन ठीक	डिज़ाइन से full-bleed bg, कंटेंट inset	विफलता नहीं यदि स्पेक अनुमति दे
रोटेशन के बाद गलत	ओरिएंटेशन / safeArea परिवर्तन के लिए कोई लिसनर नहीं	रोटेट पर inset पुनर्गणना करें
केवल एक चैनल बिल्ड	SDK safeArea या रेज़ोल्यूशन बदलता है	उस बिल्ड का स्मोक करें; केवल सामान्य Android पर निर्भर न रहें

---

Unity UGUI: अनुशंसित डीबग क्रम (6 चरण)

1. रिप्रोडक्शन लॉक करें

डिवाइस, OS, Dev/Release, ओरिएंटेशन, Game view रेज़ोल्यूशन रिकॉर्ड करें। प्री-शिप आइटम 5: मुख्य HUD को Dev और Release पर चलाएँ।

2. safeArea और संदर्भ रेज़ोल्यूशन लॉग करें

मुख्य UI लोड होने के बाद लॉग करें:

• Screen.width / Screen.height
• Screen.safeArea
• Display.cutouts (Android 11+ यदि उपयोग हो)

पढ़ें: safeArea स्क्रीन से छोटा → कंटेंट inset आवश्यक। Editor में safeArea अक्सर पूरी स्क्रीन के बराबर → डिवाइस का विकल्प नहीं।

3. Canvas root और Canvas Scaler

जाँच	सामान्य गलती	फिक्स दिशा
Root Render Mode	मिश्रित Screen Space / Camera UI → रे ऑफ़सेट	UI के लिए एक मोड
Canvas Scaler	संदर्भ रेज़ोल्यूशन ≠ प्रोजेक्ट पोर्ट्रेट बेसलाइन	इंजन चेकलिस्ट आइटम 1 से मेल
Match width/height	लंबा आस्पेक्ट गलत स्केल; एज विजेट खिसकते	डिज़ाइन/प्रोड के साथ Match तय करें; Prefab में ठीक करें, केवल Scene में नहीं
कई Canvas सॉर्ट	हिट गलत लेयर पर जाते	sortingOrder और raycast टार्गेट संरेखित करें

4. लेयर: full-bleed बैकग्राउंड बनाम safe कंटेंट

सुझाया Prefab पदानुक्रम:

Canvas
├── Background_FullBleed   (full anchor, नॉच में जा सकता है, कोई इनपुट नहीं)
└── SafeRoot               (Safe Area कंपोनेंट या safeArea-चालित पैडिंग)
    ├── HUD_Content
    └── Popups

Unity Safe Area (या प्रोजेक्ट कोड जो Screen.safeArea से offsetMin/Max सेट करे) उपयोग करें। इंटरैक्टिव बटनों को inset के बिना पूरी स्क्रीन पर न फैलाएँ।

एक सपाट लेयर वाले स्टूडियो एक्सपोर्ट: देखें नाइन-स्लाइस / संरचित री-एक्सपोर्ट और canvas → Prefab।

5. डिवाइस टैप स्पॉट-चेक

मुख्य फ़्लो पर 3–5 महत्वपूर्ण बटन; विज़ुअल केंद्र की उंगली से तुलना करें। केवल एक पॉपअप पर ऑफ़सेट → नेस्टेड Canvas या डबल Scaler जाँचें।

6. रेपो में Prefab कमिट करें

पास मानदंड वर्ज़न्ड Prefab में रहते हैं, टेस्ट Scene ओवरराइड में नहीं (प्री-शिप आइटम 6)। Anchor बदलावों के बाद, स्ट्रेस भाषाओं पर लोकेल ओवरफ़्लो स्मोक चलाएँ।

---

चैनल / मिनी-गेम (इंजीनियरिंग)

परिदृश्य	नोट
नेटिव ऐप	Screen.safeArea + असली डिवाइस
कुछ मिनी-गेम / क्विक ऐप	कंटेनर safeArea / systemInfo ≠ Editor सिम
Android cutouts	cutout बनाम safeArea भिन्न हो सकते
PC / deck	safeArea अक्सर पूरी स्क्रीन

पैटर्न: ISafeAreaProvider (या समकक्ष); प्रति प्लेटफ़ॉर्म इंजेक्ट करें—HUD Prefabs में #if से बचें।

---

फिक्स रूटिंग

लक्षण	संभावित कारण	कार्रवाई	स्वामी
डिवाइस क्लिप, Editor ठीक	SafeRoot / safeArea ड्राइवर नहीं	लेयर Prefab + Safe Area; डिवाइस पर रीटेस्ट	इंजीनियरिंग
बैकग्राउंड ठीक, बटन क्लिप	बटन ब्लीड लेयर के नीचे	SafeRoot में ले जाएँ; स्टूडियो लेयर री-एक्सपोर्ट	इंजीनियरिंग + डिज़ाइन
टैप ऑफ़सेट	मल्टी Canvas / कैमरा UI / नेस्टेड Scaler	Canvas मर्ज करें या raycast कैमरा एकीकृत करें	इंजीनियरिंग
रेज़ोल्यूशन बदलने पर ड्रिफ्ट	केवल फिक्स्ड एंकर	एंकर ठीक करें; इंजन आइटम 6	इंजीनियरिंग
डिज़ाइन में safe फ़्रेम नहीं	हैंडऑफ़ आइटम 7 गायब	डिज़ाइन नॉच/होम रेफ़ जोड़े; री-एक्सपोर्ट	डिज़ाइन
सपाट स्टूडियो एक्सपोर्ट	BG + HUD अलग नहीं	इन-प्लेस स्प्लिट फिर री-एक्सपोर्ट	इंजीनियरिंग + डिज़ाइन

---

डिज़ाइन क्या देता है (द्वितीयक)

डिलीवरी	इंजीनियरिंग उपयोग
लक्ष्य रेज़ोल्यूशन + safe संदर्भ (नॉच / होम बार)	Reference Resolution और inset अपेक्षाएँ
नामित full-bleed बनाम HUD लेयर	Prefab Background_* / SafeRoot
एज टैब safe के अंदर या जानबूझकर ब्लीड	एंकर रणनीति

डिज़ाइनरों को स्क्रिप्ट लिखने की ज़रूरत नहीं—स्पष्ट मार्क्स अनुमानित inset px घटाते हैं।

---

FAQ

क्या Game view iPhone रेज़ोल्यूशन पर्याप्त है?
केवल Dev स्मोक; शिप के लिए लक्ष्य डिवाइस चाहिए (प्री-शिप आइटम 1)। Editor safeArea अक्सर भिन्न होता है।

Safe Area कंपोनेंट बनाम मैनुअल ऑफ़सेट?
टीम की पसंद; मैनुअल को safeArea/ओरिएंटेशन परिवर्तनों पर रीफ़्रेश करना होगा—डुप्लिकेट लॉजिक से बचें।

केवल Canvas Scaler से क्लिप ठीक?
Scaler स्केल करता है; inset अलग है। क्लिप कंटेंट रेक्ट है; Scaler वैश्विक स्केल है।

क्या MCP/Cursor मदद कर सकता है?
Prefab नाम बदलने, Safe Area अटैच करने, Play स्मोक के लिए अच्छा—संख्याएँ फिर भी डिवाइस लॉग से। इंजन + MCP चेकलिस्ट।

Safe Area के साथ लोकेल ओवरफ़्लो?
पहले SafeRoot लेआउट ठीक करें, फिर स्ट्रेस लोकेल—inset चौड़ाई घटाता है।

VberAI Studio बनाम Google AI Studio?
नहीं। देखें तुलना।