# आकार बदलने को नियंत्रित लेआउट परिवर्तन मानें

> खिलाड़ी द्वारा विंडो का आकार या डिवाइस की दिशा बदलने पर गेम निर्देशांक, canvas के आयाम और लेआउट को एकसाथ रखें।

- URL: https://oneshotgems.ai/hi/topics/game-resize-handling
- श्रेणी: गेम डेवलपर के लिए
- प्रकार: गाइड
- अपडेट किया गया: 5 अक्टूबर 2026

विंडो बदलने, डिवाइस घूमने, ब्राउज़र नियंत्रण दिखने या पेज लेआउट बदलने पर ब्राउज़र गेम का आकार बदल सकता है। यदि canvas का आकार बदल जाए लेकिन उसका आंतरिक ड्रॉइंग बफ़र और इनपुट निर्देशांक मैपिंग अपडेट न हों, तो चित्र खिंच सकता है और क्लिक गलत जगह दर्ज हो सकते हैं। आकार को लेआउट और रेंडरिंग के इनपुट की तरह लें और उस पर निर्भर सिस्टम एकसाथ अपडेट करें। आकार बदलने से गेम की प्रगति रीसेट नहीं होनी चाहिए और न ही माप में हर छोटे उतार-चढ़ाव पर महंगा काम बार-बार होना चाहिए।

## उस तत्व को देखें जिसे गेम वास्तव में इस्तेमाल करता है

जब canvas का कंटेनर विंडो से अलग आकार बदल सकता हो—जैसे विभाजित पैनल में या बदलते नियंत्रणों वाले पेज पर—तब ResizeObserver इस्तेमाल करें। सामग्री का आकार पढ़ें, canvas का आंतरिक ड्रॉइंग रिज़ॉल्यूशन केवल वास्तव में बदलने पर अपडेट करें, फिर CSS निर्देशांकों और गेम-वर्ल्ड निर्देशांकों के बीच का पैमाना दोबारा निकालें।

लेआउट को प्रभावित करने वाले आयामों को बिना शर्त उसी देखे जा रहे तत्व में वापस न लिखें। MDN बताता है कि observer callback के भीतर आकार बदलने से लूप बन सकता है; काम सावधानी से तय करें और अपेक्षित आकार न बदला हो तो लिखना छोड़ दें। यदि डिज़ाइन में चित्र को विकृत करने के बजाय उसके चारों ओर खाली पट्टियाँ होनी चाहिए, तो गेम viewport को स्थिर world-coordinate प्रणाली से अलग रखें।

## लेआउट और इनपुट को एक साथ परखें

संकीर्ण, चौड़े और घुमाए हुए आकारों में canvas के हर किनारे के पास किसी लक्ष्य पर क्लिक या टैप करें और जाँचें कि गेम वही world position पहचानता है जो दिखाई देने वाला निशान बताता है। स्तर चलते समय आकार बदलें और पुष्टि करें कि कैमरा या खाली पट्टियों की नीति लागू होती है, लेकिन स्थितियाँ अनपेक्षित रूप से नहीं बदलतीं।

यह न मानें कि window.innerWidth हर लेआउट बदलाव पकड़ता है; कंटेनर को देखें। मोबाइल कीबोर्ड या ब्राउज़र इंटरफ़ेस उपलब्ध जगह बदलता हो तो तय करें कि खेल का क्षेत्र छोटा हो, स्थिर रहे या स्क्रॉल हो। नियंत्रण दिखाकर यह निर्णय परखें, क्योंकि वे गेम की ज़रूरी जगह घेर सकते हैं।

## सवाल

**क्या हर आकार परिवर्तन पर गेम-वर्ल्ड का आकार भी बदलना चाहिए?** नहीं। कई गेम world coordinates स्थिर रखते हैं और केवल कैमरा बदलते या खाली पट्टियाँ जोड़ते हैं। world का आकार बदलने से कठिनाई, टक्कर-जाँच और स्तर की बनावट प्रभावित हो सकती है।

**विंडो resize handler के बजाय ResizeObserver कब बेहतर है?** जब संबंधित तत्व का आकार उसके कंटेनर या आसपास के लेआउट के कारण बदल सकता हो, भले ही पूरी विंडो के आयाम समान रहें, तब ResizeObserver इस्तेमाल करें।

## अपनी जिज्ञासा के साथ आगे बढ़ें

- [गेम ग्राफ़िक्स साफ़ दिखाने के लिए Canvas रिज़ॉल्यूशन सेट करें](https://oneshotgems.ai/hi/topics/canvas-pixel-density): जब कोई गेम स्क्रीन पर स्पष्ट दिखना चाहिए तो कैनवास बैकिंग रिज़ॉल्यूशन, डिवाइस पिक्सेल अनुपात, मेमोरी उपयोग और ड्राइंग लागत को संतुलित करें।
- [Canvas रेंडरिंग की बाधाएँ खोजें](https://oneshotgems.ai/hi/topics/canvas-game-performance): दोहराए जा सकने वाले दृश्यों में 2D Canvas गेम का प्रोफ़ाइल लें और मापने के बाद ही महंगे ड्रॉइंग कार्य कम करें।

## आगे पढ़ें

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

---
मूल पेज: https://oneshotgems.ai/hi/topics/game-resize-handling