परिचय
साल 2010 की गर्मियों में, हमने Sand Trap नाम का एक गेम बनाया. हमने इस गेम को मोबाइल फ़ोन के लिए HTML5 गेम की प्रतियोगिता में शामिल किया था. हालांकि, ज़्यादातर मोबाइल फ़ोन पर गेम का सिर्फ़ एक हिस्सा दिखता था या गेम को बहुत छोटा कर दिया जाता था. इस वजह से, गेम को खेला नहीं जा सकता था. इसलिए, हमने यह फ़ैसला लिया कि गेम को किसी भी रिज़ॉल्यूशन के हिसाब से आसानी से अडजस्ट किया जा सके. इस लेख में बताए गए आइडिया का इस्तेमाल करके और गेम को फिर से प्रोग्राम करने के बाद, हमारे पास एक ऐसा गेम था जो किसी भी आधुनिक ब्राउज़र पर काम करता था. भले ही, वह डेस्कटॉप या मोबाइल डिवाइस पर चलता हो.


यह तरीका Sand Trap के लिए अच्छा काम आया. इसलिए, हमने अपने नए गेम Thwack! में भी यही तरीका अपनाया. गेम, फ़ुलस्क्रीन और पसंद के मुताबिक साइज़ वाली विंडो, दोनों में फ़िट होने के लिए स्क्रीन रिज़ॉल्यूशन को अपने-आप अडजस्ट करता है. इसकी जानकारी नीचे दिए गए स्क्रीनशॉट में दी गई है.
इसे लागू करने के लिए, सीएसएस और JavaScript, दोनों का फ़ायदा लेना ज़रूरी है. पूरी स्क्रीन को भरने के लिए सीएसएस का इस्तेमाल करना आसान है. हालांकि, सीएसएस की मदद से कैनवस और गेम एरिया को स्ट्रेच होने से बचाने के लिए, चौड़ाई-ऊंचाई का एक ही अनुपात बनाए रखना मुश्किल है. ऐसे में, JavaScript का इस्तेमाल किया जाता है. JavaScript की मदद से, दस्तावेज़ के एलिमेंट का साइज़ फिर से तय किया जा सकता है. साथ ही, विंडो इवेंट पर साइज़ बदलने की सुविधा को ट्रिगर किया जा सकता है.
पेज तैयार करना
पहला चरण, पेज पर वह जगह तय करना है जहां गेम खेला जाएगा. अगर इसे डिव ब्लॉक के तौर पर शामिल किया जाता है, तो इसमें दूसरे टैग या कैनवस एलिमेंट डाले जा सकते हैं. इसे सही तरीके से सेट अप करने पर, ये चाइल्ड एलिमेंट पैरंट div ब्लॉक की स्केलिंग को इनहेरिट कर लेंगे.
अगर आपके गेम एरिया में दो हिस्से हैं, तो यह इस तरह दिख सकता है:
<div id="gameArea">
<canvas id="gameCanvas"></canvas>
<div id="statsPanel"></div>
</div>
दस्तावेज़ का बुनियादी स्ट्रक्चर तैयार होने के बाद, इन एलिमेंट को कुछ सीएसएस प्रॉपर्टी दी जा सकती हैं, ताकि उन्हें साइज़ में बदला जा सके. “gameArea” के लिए कई सीएसएस प्रॉपर्टी को सीधे JavaScript से मैनिप्युलेट किया जाता है. हालांकि, इन प्रॉपर्टी के काम करने के लिए, पैरंट gameArea div ब्लॉक से शुरू करके कुछ अन्य सीएसएस प्रॉपर्टी सेट अप करें:
#gameArea {
position: absolute;
left: 50%;
top: 50%;
}
ऐसा करने पर, कैनवस का सबसे ऊपर बायां कोना स्क्रीन के बीच में दिखता है. अगले सेक्शन में बताया गया JavaScript का अपने-आप साइज़ बदलने वाला फ़ंक्शन, गेम एरिया का साइज़ बदलने और उसे विंडो के बीच में सेंटर करने के लिए, अन्य CSS प्रॉपर्टी में बदलाव करता है.
गेम एरिया का साइज़, विंडो के डाइमेंशन के हिसाब से अपने-आप बदल जाता है. इसलिए, आपको gameArea div ब्लॉक के चाइल्ड एलिमेंट के लिए डाइमेंशन, पिक्सल में नहीं, बल्कि प्रतिशत में चाहिए. पिक्सल वैल्यू की मदद से, पैरंट div के बदलने पर, अंदरूनी एलिमेंट को स्केल नहीं किया जा सकता. हालांकि, पिक्सल से शुरुआत करके, अपने पसंदीदा लेआउट को प्रतिशत में बदलना मददगार हो सकता है.
इस उदाहरण के लिए, गेम के क्षेत्र को 300 पिक्सल ऊंचा और 400 पिक्सल चौड़ा रखें. कैनवस, गेम के पूरे हिस्से को कवर करता है. साथ ही, आंकड़े दिखाने वाला सेमी-ट्रांसफ़रेंट पैनल, नीचे की ओर 24 पिक्सल की ऊंचाई पर चलता है, जैसा कि पहली इमेज में दिखाया गया है.

इन वैल्यू को प्रतिशत में बदलने पर, कैनवस की चौड़ाई और ऊंचाई (gameArea की, न कि विंडो की) 100% हो जाती है. 24 को 300 से भाग देने पर, स्टेटस पैनल की ऊंचाई 8% होती है. साथ ही, यह गेम एरिया के नीचे वाले हिस्से को कवर करेगा, इसलिए इसकी चौड़ाई भी 100% होगी, जैसा कि दूसरे चित्र में दिखाया गया है.

अब आपने गेम एरिया और उसके चाइल्ड एलिमेंट के डाइमेंशन तय कर लिए हैं. इसलिए, इन दो एलिमेंट के लिए सीएसएस प्रॉपर्टी को इस तरह से जोड़ा जा सकता है:
#gameCanvas {
width: 100%;
height: 100%;
}
#statsPanel {
position: absolute;
width: 100%;
height: 8%;
bottom: 0;
opacity: 0.8;
}
गेम का साइज़ बदलना
अब आपके पास, रीसाइज़ की जा रही विंडो को मैनेज करने के लिए फ़ंक्शन बनाने का विकल्प है. सबसे पहले, पैरंट gameArea दस्तावेज़ एलिमेंट का रेफ़रंस पाएं.
var gameArea = document.getElementById('gameArea');
आपको इमेज की सटीक चौड़ाई या ऊंचाई की जानकारी नहीं चाहिए. इसलिए, आपको चौड़ाई और ऊंचाई के अनुपात की जानकारी सेट करनी होगी. गेम के उस हिस्से का इस्तेमाल करके जिसकी चौड़ाई 400 पिक्सल और ऊंचाई 300 पिक्सल है, आपको पता है कि आपको आसपेक्ट रेशियो को 4 यूनिट चौड़ाई और 3 यूनिट ऊंचाई पर सेट करना है.
var widthToHeight = 4 / 3;
जब भी विंडो का साइज़ बदला जाता है, तब इस फ़ंक्शन को कॉल किया जाता है. इसलिए, आपको विंडो के नए डाइमेंशन भी चाहिए, ताकि आप अपने गेम के डाइमेंशन को उससे मैच करने के लिए अडजस्ट कर सकें. इसके लिए, विंडो की innerWidth और innerHeight प्रॉपर्टी का इस्तेमाल करें.
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
आपने अपनी पसंद के हिसाब से चौड़ाई-ऊंचाई का अनुपात तय किया था. अब आपके पास विंडो की मौजूदा चौड़ाई-ऊंचाई का अनुपात तय करने का विकल्प है:
var newWidthToHeight = newWidth / newHeight;
इससे यह तय किया जा सकता है कि गेम को स्क्रीन पर वर्टिकल या हॉरिज़ॉन्टल दिखाना है या नहीं. इसकी जानकारी, तीसरे चित्र में दी गई है.

अगर गेम के लिए चुना गया आकार, विंडो के आकार से चौड़ा है और उसकी ऊंचाई कम है, तो आपको विंडो को हॉरिज़ॉन्टल तौर पर भरना होगा. साथ ही, ऊपर और नीचे मार्जिन छोड़ने होंगे. इसी तरह, अगर गेम के लिए चुना गया आकार, विंडो के आकार से ज़्यादा है और चौड़ाई कम है, तो आपको विंडो को वर्टिकल तौर पर भरना होगा और बाईं और दाईं ओर मार्जिन छोड़ने होंगे.
इसके लिए, विंडो की मौजूदा चौड़ाई-ऊंचाई के अनुपात के साथ, अपनी पसंद के अनुपात की जांच करें. इसके बाद, यहां दिए गए तरीके से सही अडजस्टमेंट करें:
if (newWidthToHeight > widthToHeight) {
// window width is too wide relative to desired game width
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else { // window height is too high relative to desired game height
newHeight = newWidth / widthToHeight;
gameArea.style.width = newWidth + 'px';
gameArea.style.height = newHeight + 'px';
}
अब आपने गेम एरिया की चौड़ाई और ऊंचाई में बदलाव कर लिया है. अब आपको चीज़ों को बीच में रखना होगा. इसके लिए, ऊपर ऊंचाई का आधा और बाईं ओर चौड़ाई का आधा हिस्सा नेगेटिव मार्जिन के तौर पर रखें. याद रखें कि सीएसएस पहले से ही gameArea div के सबसे ऊपर बाएं कोने को विंडो के बीच में रख रही है. इसलिए, यह विंडो में गेम एरिया को बीच में रखती है:
gameArea.style.marginTop = (-newHeight / 2) + 'px';
gameArea.style.marginLeft = (-newWidth / 2) + 'px';
आपको फ़ॉन्ट का साइज़ अपने-आप अडजस्ट करने की सुविधा भी चाहिए. अगर आपके सभी चाइल्ड एलिमेंट em का इस्तेमाल कर रहे हैं, तो gameArea div ब्लॉक की fontSize CSS प्रॉपर्टी को उसके साइज़ के हिसाब से तय की गई वैल्यू पर सेट किया जा सकता है.
gameArea.style.fontSize = (newWidth / 400) + 'em';
आखिर में, आपको कैनवस ड्रॉइंग के डाइमेंशन को उसकी नई चौड़ाई और ऊंचाई से मैच करना होगा. ध्यान दें कि डाइनैमिक कैनवस रिज़ॉल्यूशन के लिए, गेम के बाकी कोड में गेम इंजन डाइमेंशन को कैनवस ड्रॉइंग डाइमेंशन से अलग रखना ज़रूरी है.
var gameCanvas = document.getElementById('gameCanvas');
gameCanvas.width = newWidth;
gameCanvas.height = newHeight;
इसलिए, साइज़ बदलने की सुविधा कुछ इस तरह दिख सकती है:
function resizeGame() {
var gameArea = document.getElementById('gameArea');
var widthToHeight = 4 / 3;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = newWidth / newHeight;
if (newWidthToHeight > widthToHeight) {
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else {
newHeight = newWidth / widthToHeight;
gameArea.style.width = newWidth + 'px';
gameArea.style.height = newHeight + 'px';
}
gameArea.style.marginTop = (-newHeight / 2) + 'px';
gameArea.style.marginLeft = (-newWidth / 2) + 'px';
var gameCanvas = document.getElementById('gameCanvas');
gameCanvas.width = newWidth;
gameCanvas.height = newHeight;
}
अब, आपको यह तय करना है कि जब भी विंडो का साइज़ बदला जाए या मोबाइल डिवाइसों के मामले में, स्क्रीन का ओरिएंटेशन बदला जाए, तब ये अडजस्टमेंट अपने-आप हो जाएं. इन इवेंट को हैंडल करने के लिए, resizeGame() फ़ंक्शन को इस तरह कॉल करें:
window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
अगर विंडो का साइज़ बहुत ज़्यादा बढ़ाया गया है या स्क्रीन का ओरिएंटेशन वर्टिकल है, तो इसका मतलब है कि आपने विंडो की चौड़ाई 100% कर दी है. वहीं, अगर विंडो का साइज़ बहुत ज़्यादा बढ़ाया गया है या स्क्रीन का ओरिएंटेशन हॉरिज़ॉन्टल है, तो इसका मतलब है कि आपने विंडो की ऊंचाई 100% कर दी है. बाकी डाइमेंशन का साइज़, पहले से तय चौड़ाई-ऊंचाई के आसपेक्ट रेशियो के हिसाब से तय किया जाता है.
खास जानकारी
Gopherwood Studios ने अपने सभी HTML5 गेम के लिए, इस स्ट्रक्चर के वर्शन का इस्तेमाल किया है. यह कई स्क्रीन रिज़ॉल्यूशन और अलग-अलग मोबाइल डिवाइसों के हिसाब से गेम बनाने में काफ़ी मददगार साबित हुआ है. साथ ही, फ़ुल स्क्रीन ब्राउज़र की मदद से, हमारे वेब गेम को बेहतरीन अनुभव मिलता है. यह अनुभव, ब्राउज़र पर चलने वाले कई गेम के मुकाबले, डेस्कटॉप पर चलने वाले गेम जैसा ही होता है. HTML5 और वेब टेक्नोलॉजी के लगातार बेहतर होते रहने से, हमें वेब गेम में और भी नए-नए इनोवेशन देखने को मिलेंगे.