Godot 4 HUD और Theme: Control Tree हैंडऑफ़ और Play स्वीकृति

Godot 4 HUD तब पूरा नहीं होता जब PNG फ़ाइलें TextureRect नोड्स पर पड़ी हों: Theme में StyleBox, डिफ़ॉल्ट फ़ॉन्ट, container chain (MarginContainer → HBoxContainer / VBoxContainer), और anchors / offsets मिलकर तय करते हैं कि लेआउट सभी रेज़ोल्यूशन पर टिकता है या नहीं। Figma Auto Layout बिल्कुल सही दिख सकता है, फिर भी Play में नीचे का बार खिसकना, शून्य-min बटन, या लंबे टेक्स्ट का कटना दिखता रहता है—आम तौर पर Control tree या Theme resource हैंडऑफ़ स्पेक से मेल नहीं खाता।

नीचे Godot 4.x Control + Theme पर ध्यान है। Unity टीमें वही बार engine + MCP checklist से लागू कर सकती हैं। पूरा Figma → Godot फ़्लो: Figma to Godot (VberAI Studio Control tree एक्सपोर्ट करता है)। यह पोस्ट केवल HUD शेल: Theme, नोड नामकरण, Play स्मोक कवर करती है—MCP इंस्टॉल चरण नहीं।

फ़ेल मानदंड (कोई एक भी = पास नहीं): लक्ष्य aspect पर प्राथमिक HUD के पठनीय नियंत्रण कटे हुए (जिसमें Safe Area के समतुल्य DisplayServer.get_display_safe_area() शामिल है); लिखित स्पेक के बिना वही बटन Editor बनाम एक्सपोर्टेड बिल्ड में आकार भिन्न; Theme बटन स्टेट्स (normal / hover / pressed / disabled आदि) गायब होने पर भी शिप किया जाना; केवल एक लोकेल के लिए Scene tree बदलना (समान-संरचना i18n से टकराव—देखें locale overflow); minimum_size सेट न होना जिससे nine-slice पैनल बैकग्राउंड ठीक दिखे पर टेक्स्ट किनारों से चिपका रहे।

---

Theme और नोड्स: हैंडऑफ़ में क्या मेल खाना चाहिए

डिज़ाइन डिलीवरी	Godot में लैंडिंग
रंग / radius / बॉर्डर वाले पैनल	Theme में StyleBoxFlat / StyleBoxTexture (patch margins nine-slice के अनुसार)
बॉडी / टाइटल आकार	Theme डिफ़ॉल्ट font_size + ज़रूरत हो तो Label type variations
बटन स्टेट्स	Button पर चार StyleBox सेट: normal / hover / pressed / disabled
आइकन + कॉपी	आइकन TextureRect निश्चित min के साथ; कॉपी Label expandable container में
फ़ुल-स्क्रीन HUD रूट	रूट Control anchor preset + safe area के लिए MarginContainer

नामकरण: Scene नोड नाम Figma कंपोनेंट अर्थ से मेल खाएँ (HUD_BottomBar, Btn_Shop) ताकि MCP / स्क्रिप्ट $ पाथ स्थिर रहें (engine + MCP checklist)।

---

Play स्वीकृति क्रम (6 चरण)

1. Viewport और safe area लॉक करें

• Project Settings → Display में लक्ष्य बेस चौड़ाई/ऊँचाई सेट करें (टीम का portrait कन्वेंशन)।
• HUD रूट को DisplayServer.get_display_safe_area() या Godot 4.2+ SafeArea नोड से इनसेट करें; एक लंबे फ़ोन पर स्मोक करें (Safe Area पोस्ट देखें)।

2. Theme को एकमात्र स्रोत बनाएँ

• HUD सबट्री एक Theme resource इनहेरिट करे, प्रति-Button मैनुअल ओवरराइड नहीं।
• कोई भी ओवरराइड नोड स्पेक में सूचीबद्ध हो, वरना reskin में छूट जाएगा।

3. Container chain और size flags

जाँच	आम गलती
size_flags_horizontal / vertical	जिस Label को बढ़ना चाहिए उसमें Fill/Expand नहीं → लोकेल क्लिप
custom_minimum_size	बटन ऊँचाई 0 → टच टारगेट बहुत छोटा
नेस्टेड MarginContainer	दोहरे मार्जिन → अतिरिक्त खाली रिंग

4. लोकेल स्मोक

• Localization में stress भाषाएँ (DE/ES आदि) और शिप भाषा बदलें; केवल tr() टेक्स्ट बदलें, नोड tree नहीं।
• ओवरफ़्लो → locale overflow पाथ (min width / कॉपी / पुनः-एक्सपोर्ट)।

5. स्टेट्स और फ़ोकस

• कीबोर्ड/गेमपैड फ़ोकस (यदि समर्थित): Theme में focus StyleBox परिभाषित।
• Disabled बटन अब भी क्लिक रोक रहे हैं (mouse_filter, disabled स्टेट)।

6. एक्सपोर्टेड बिल्ड पुनः-परीक्षण

• मुख्य HUD Debug और Release में 30s चलाएँ; यदि फ़ॉन्ट fallback चौड़ाई बदलता है, तो डिवाइस पर पुनः-परीक्षण (pre-ship item 5 Dev/Release; सभी लोकेल item 2)।

---

Figma Auto Layout की मोटी मैपिंग

Figma	Godot 4
Vertical Auto Layout	VBoxContainer + separation
Horizontal Auto Layout	HBoxContainer
Padding	MarginContainer या StyleBox content margin
Fill container	size_flags Expand + Fill
Hug contents	चाइल्ड Expand नहीं; पैरेंट hug करता है

यदि VberAI Studio (या आपकी पाइपलाइन) पहले ही containers एक्सपोर्ट कर चुकी है, तो Play में स्वीकार करें—केवल स्थिर Editor फ़्रेम देखकर अंदाज़ा न लगाएँ।

---

फ़िक्स रूटिंग

लक्षण	संभावित कारण	कार्रवाई	ज़िम्मेदार
नॉच के नीचे बॉटम बार	safe inset नहीं	रूट मार्जिन + safe area API	Eng
एक लोकेल ओवरफ़्लो	min width / फ़ॉन्ट आकार	Theme या container min; छोटी loc कॉपी	Design + eng
Reskin के बाद स्टाइल गलत	ओवरराइड बिखरे	Theme समेकित करें; पुनः-एक्सपोर्ट	Eng + design
StyleBox में nine-slice सीम	गलत patch margin	डिज़ाइन px से मिलाएँ; nine-slice पोस्ट देखें	Eng + design
MCP नोड बाइंड नहीं कर पाता	नाम ≠ एक्सपोर्ट	नामकरण एकीकृत करें; Scene/PackedScene पुनः-एक्सपोर्ट	Eng

---

FAQ

प्रति स्क्रीन एक Theme या पूरे गेम के लिए एक?
आम पैटर्न: ग्लोबल Theme + दुर्लभ theme_override; इवेंट स्किन के लिए reskin Theme स्वैप, प्रति-नोड tint संपादन नहीं।

Control को raw CanvasItem लेआउट के साथ मिलाएँ?
2D HUD को एक ही Control tree पर रखें; उसी HUD में हाथ से रखे CanvasLayer coords के साथ न मिलाएँ।

कीबोर्ड/गेमपैड के लिए अलग focus स्टाइल चाहिए?
यदि प्रोजेक्ट कीबोर्ड/गेमपैड फ़ोकस समर्थित करता है, तो Theme में Button, LineEdit आदि पर focus StyleBox परिभाषित करें (या दृश्य theme_override), और Play में Tab/d-pad स्मोक करें। केवल-टच HUD के लिए कोई focus स्टाइलिंग आवश्यक नहीं स्पेक कर सकते हैं ताकि QA और eng एक ही बार साझा करें।

Unity Prefab स्वीकृति से यह कैसे भिन्न है?
वही बार (क्लिप, लोकेल, स्टेट्स, Release); नाम बदलकर StyleBox / size_flags / PackedScene।

क्या Figma ज़रूरी है?
नहीं। Figma के बिना भी Theme + container स्पेक चाहिए; Figma के साथ, design handoff checklist फिर Godot।