# गेम मॉडल को बनाए रखते हुए प्रस्तुति अनुकूलित करें

> सिमुलेशन स्थिति को स्क्रीन आयामों से जोड़े बिना गेम की सतह को उसके कंटेनर में अनुकूलित करें, और बदलते व्यूपोर्ट में लेआउट का परीक्षण करें।

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

फ़ोन घूमने, ब्राउज़र बार दिखने या पैनल खुलने पर ब्राउज़र गेम वाले पेज का आकार बदल सकता है। गेम के सिमुलेशन निर्देशांकों को दिखाए जाने वाले कैनवास के आकार से अलग रखें। इससे व्यूपोर्ट बदलने पर लेआउट अनुकूलित होगा, लेकिन ऑब्जेक्ट की स्थिति, भौतिकी या हिट टेस्ट अनजाने में नहीं बदलेंगे।

## कंटेनर को मापें और एक पैमाना चुनें

यह मानने के बजाय कि विंडो खेलने योग्य क्षेत्र है, गेम कंटेनर के आयामों का उपयोग करें। एक ResizeObserver रिपोर्ट कर सकता है जब वह तत्व बदलता है, जिसमें व्यूपोर्ट आकार बदलने के बजाय आसपास के लेआउट के कारण होने वाले परिवर्तन भी शामिल हैं। तय करें कि गेम को संकीर्ण पहलू अनुपात में लेटरबॉक्स, क्रॉप या रीफ्लो करना चाहिए या नहीं, और सर्कल को अंडाकार में खींचने के बजाय विकल्प को दृश्यमान बनाएं।

एक निश्चित आभासी खेल के मैदान के लिए, एक पैमाने कारक की गणना करें जो इसकी चौड़ाई और ऊंचाई में फिट बैठता है, फिर शेष स्थान को केंद्र में रखें। हिट परीक्षण से पहले उसी परिवर्तन के व्युत्क्रम के माध्यम से सूचक निर्देशांक को परिवर्तित करें। रीफ़्लोइंग गेम के लिए, लेआउट एंकर और टकराव आकृतियों को एक साथ अपडेट करें ताकि नियंत्रण पिछले आकार से स्थितियों का उपयोग जारी न रखें।

## सिमुलेशन लूप से आकार बदलना जारी रखें

खेल की दुनिया को स्थिर इकाइयों में संग्रहीत करें और कैनवास बैकिंग रिज़ॉल्यूशन, सीएसएस आकार और डिवाइस पिक्सेल अनुपात को रेंडरिंग चिंताओं के रूप में मानें। जब आकार बदलता है, तो ड्राइंग सतह को अपडेट करें और दोबारा बनाएं; जब तक खेल के नियमों की आवश्यकता न हो, स्तर को रीसेट न करें या ऑब्जेक्ट स्थिति की पुनः गणना न करें। यह पृथक्करण टूलबार के आकार को पुनरारंभ जैसा दिखने से रोकता है।

गेम सक्रिय होने के दौरान एक संकीर्ण और विस्तृत व्यूपोर्ट, डेस्कटॉप का आकार और ओरिएंटेशन परिवर्तन का परीक्षण करें। टेक्स्ट रैपिंग की जांच करें, लक्ष्य स्थिति को स्पर्श करें और रूपांतरण का समन्वय करें। MDN का ResizeObserver गाइड तत्व आयामों का अवलोकन करने की व्याख्या करता है और चेतावनी देता है कि कॉलबैक के अंदर देखे गए आकार को बदलने से लूप बन सकते हैं।

## सवाल

**जब कैनवास का आकार बदलता है तो क्या मुझे खेल की दुनिया का आकार बदलना चाहिए?** आमतौर पर सिमुलेशन निर्देशांक स्थिर रखें और प्रस्तुति या लेआउट को अनुकूलित करें। यदि डिज़ाइन जानबूझकर खेल के मैदान को बदलता है, तो उसके नियमों, ऑब्जेक्ट और इनपुट मैपिंग को एक साथ अपडेट करें।

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

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

- [ब्राउज़र गेम में स्क्रीन ओरिएंटेशन बदलना संभालें](https://oneshotgems.ai/hi/topics/game-orientation-changes): जब कोई डिवाइस घूमता है तो लेआउट और इनपुट मैपिंग की पुनर्गणना करके, ओरिएंटेशन को गेम पुनरारंभ के रूप में देखे बिना, खेल को पढ़ने योग्य बनाए रखें।
- [ब्राउज़र गेम्स के लिए आकार स्पर्श लक्ष्य](https://oneshotgems.ai/hi/topics/game-touch-targets): दृश्य कलाकृति को इंटरैक्टिव सीमा से अलग करके और स्पर्श उपकरणों पर आकार, रिक्ति और ओवरलैप की जांच करके गेम नियंत्रण को हिट करना आसान बनाएं।
- [मैप कैनवास पर पॉइंटर की स्थिति को गेम निर्देशांकों में बदलें](https://oneshotgems.ai/hi/topics/hit-testing-canvas-coordinates): सूचक स्थिति को कैनवास गेम के वर्ल्ड निर्देशांक में परिवर्तित करें ताकि दृश्यमान लक्ष्य और क्लिक करने योग्य हिट क्षेत्र स्केलिंग के बाद संरेखित रहें।

## आगे पढ़ें

- [एमडीएन: रिसाइज़ऑब्जर्वर](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [एमडीएन: पहलू-अनुपात](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

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