शुरुआती जानकारी
साल 2010 की गर्मियों में, हमने सैंड ट्रैप बनाया. यह एक ऐसा गेम है जिसमें हमने मोबाइल फ़ोन के लिए HTML5 गेम की प्रतियोगिता में हिस्सा लिया था. हालांकि, ज़्यादातर मोबाइल फ़ोन पर या तो गेम का सिर्फ़ एक हिस्सा दिखता था या फिर गेम का साइज़ छोटा होता था, जिसकी वजह से वह गेम पूरी तरह से खेला नहीं जा सकता था. इसलिए, हमने यह फ़ैसला खुद किया कि गेम किसी भी रिज़ॉल्यूशन के हिसाब से अडजस्ट हो जाएगा. इस लेख में बताए गए आइडिया को फिर से प्रोग्राम करने और उनका इस्तेमाल करने के बाद, हमने एक गेम शुरू किया. उसे सभी मॉडर्न ब्राउज़र के लिए इस्तेमाल किया जा सकता है. भले ही, वह डेस्कटॉप पर हो या मोबाइल डिवाइस पर.
यह तरीका सैंड ट्रैप के लिए काफ़ी कारगर साबित हुआ. इसलिए, हमने अपने नए गेम Thwack! के लिए भी यही तरीका अपनाया. जैसा कि नीचे दिए गए स्क्रीनशॉट में दिखाया गया है, गेम फ़ुल-स्क्रीन और कस्टम साइज़ वाली विंडो, दोनों में फ़िट होने के लिए स्क्रीन रिज़ॉल्यूशन को अपने-आप अडजस्ट कर लेता है.
इसे लागू करने के लिए सीएसएस और JavaScript, दोनों का फ़ायदा लेना ज़रूरी है. पूरी स्क्रीन को भरने के लिए सीएसएस का इस्तेमाल करना आसान है. हालांकि, सीएसएस आपको कैनवस और गेम एरिया को खिंचाव रोकने से रोकने के लिए, चौड़ाई-ऊंचाई का अनुपात एक जैसा रखने की अनुमति नहीं देती. ऐसी ही स्थिति में JavaScript का काम शुरू होता है. JavaScript की मदद से दस्तावेज़ के एलिमेंट को फिर से स्केल किया जा सकता है. साथ ही, विंडो इवेंट पर साइज़ बदलने को ट्रिगर किया जा सकता है.
पेज तैयार किया जा रहा है
सबसे पहले, पेज पर वह जगह तय करें जहां गेम खेला जाएगा. अगर आप इसे एक div ब्लॉक के रूप में शामिल करते हैं, तो आप इसमें अन्य टैग या कैनवस तत्व रख सकते हैं. इसे सही तरीके से सेट अप करने पर ये चाइल्ड एलिमेंट, पैरंट div ब्लॉक की स्केलिंग को इनहेरिट कर लेंगे.
अगर आपके गेम एरिया में दो हिस्से, खेलने की जगह और स्कोर रखने की जगह, दोनों हैं, तो ये इस तरह से दिखेंगे:
<div id="gameArea">
<canvas id="gameCanvas"></canvas>
<div id="statsPanel"></div>
</div>
दस्तावेज़ का बुनियादी स्ट्रक्चर तैयार करने के बाद, इन एलिमेंट का साइज़ बदलने के लिए कुछ सीएसएस प्रॉपर्टी दी जा सकती हैं. “gameArea” के लिए कई सीएसएस प्रॉपर्टी में सीधे JavaScript से बदलाव किया जाता है, लेकिन उन्हें सही तरीके से काम करने के लिए पैरंट gameArea div block से शुरू करते हुए कुछ दूसरी सीएसएस प्रॉपर्टी सेट अप करें:
#gameArea {
position: absolute;
left: 50%;
top: 50%;
}
इससे कैनवस के ऊपरी बाएं कोने को स्क्रीन के बीच में दिखाई देता है. अगले सेक्शन में बताया गया JavaScript का 'अपने-आप साइज़ बदलने वाला' फ़ंक्शन, गेम एरिया का साइज़ बदलने और उसे विंडो में बीच में करने के लिए, अतिरिक्त सीएसएस प्रॉपर्टी में बदलाव करता है.
विंडो के डाइमेंशन के हिसाब से, गेम एरिया अपने-आप बदल जाता है. इसलिए, आपको gameArea div ब्लॉक के चाइल्ड एलिमेंट के लिए डाइमेंशन को पिक्सल में नहीं रखना है, बल्कि आपको इसे प्रतिशत में दिखाना है. Pixel की वैल्यू, अंदरूनी एलिमेंट को पैरंट div के हिसाब से स्केल करने की अनुमति नहीं देतीं, क्योंकि यह बदलाव करता है. हालांकि, पिक्सल से शुरुआत करना और फिर अपनी पसंद का लेआउट मिलने पर, उन्हें प्रतिशत में बदलना फ़ायदेमंद हो सकता है.
उदाहरण के लिए, गेम एरिया को 300 पिक्सल ऊंचाई और 400 पिक्सल चौड़ा रखने से शुरुआत करें. कैनवस, पूरे गेम एरिया को कवर करता है और नीचे की ओर 24 पिक्सल ऊंचाई वाला एक सेमी-पारदर्शी आंकड़ा पैनल चलता है, जैसा कि इमेज 1 में दिखाया गया है.
इन वैल्यू को प्रतिशत में बदलने पर कैनवस 100% चौड़ाई और 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;
विंडो का साइज़ बदलने पर, इस फ़ंक्शन को कॉल किया जाता है. इसलिए, विंडो के नए डाइमेंशन भी देखे जा सकते हैं, ताकि मैच करने के लिए गेम के डाइमेंशन में बदलाव किए जा सकें. इसे ढूंढने के लिए, विंडो की इनरविड्थ और इनरहाइट प्रॉपर्टी का इस्तेमाल करें.
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
जिस तरह से आपने अपनी पसंद की चौड़ाई और ऊंचाई का अनुपात तय किया है उसी तरह अब विंडो की मौजूदा चौड़ाई और ऊंचाई का अनुपात भी तय किया जा सकता है:
var newWidthToHeight = newWidth / newHeight;
इससे आपको यह तय करने की सुविधा मिलती है कि गेम को स्क्रीन पर वर्टिकल तरीके से भरना है या हॉरिज़ॉन्टल, जैसा कि इमेज 3 में दिखाया गया है.
अगर गेम एरिया का साइज़, विंडो के साइज़ से ज़्यादा चौड़ा और उसकी लंबाई कम है, तो आपको विंडो को हॉरिज़ॉन्टल तौर पर भरना होगा. साथ ही, ऊपर और नीचे मार्जिन को छोड़ना होगा. इसी तरह, अगर गेम एरिया का आकार विंडो के आकार से ज़्यादा है (और चौड़ाई कम है), तो आपको विंडो को वर्टिकल तरीके से भरना होगा. साथ ही, आपको बाईं और दाईं ओर मार्जिन भी छोड़ने होंगे.
ऐसा करने के लिए, वर्तमान विंडो के चौड़ाई और ऊंचाई के अनुपात के साथ चौड़ाई से ऊंचाई के अपने मनचाहे अनुपात की जांच करें और नीचे दिए गए तरीके से उचित बदलाव करें:
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 सीएसएस प्रॉपर्टी को साइज़ के हिसाब से तय की गई वैल्यू पर सेट करें.
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;
}
अब, आपकी इच्छा है कि विंडो का साइज़ बदलने पर या मोबाइल डिवाइसों के मामले में, स्क्रीन ओरिएंटेशन बदलने पर, ये बदलाव अपने-आप हो जाएं. इन इवेंट को इस तरह से अपने OptimizeGame() फ़ंक्शन को कॉल करने के लिए कहें:
window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
अगर विंडो का साइज़ बहुत ज़्यादा किया गया है या स्क्रीन का ओरिएंटेशन वर्टिकल है, तो इसका मतलब है कि विंडो की 100% चौड़ाई बनाई जा रही है. साथ ही, अगर विंडो का साइज़ बहुत चौड़ा है या स्क्रीन का ओरिएंटेशन हॉरिज़ॉन्टल है, तो इसका मतलब है कि विंडो की ऊंचाई 100% है. बाकी डाइमेंशन का साइज़, पहले से तय चौड़ाई-ऊंचाई के आसपेक्ट रेशियो के मुताबिक होता है.
खास जानकारी
Gopherwood Studios ने हमारे सभी HTML5 गेम के लिए इस संरचना के वर्शन का इस्तेमाल किया है और यह एक से ज़्यादा स्क्रीन रिज़ॉल्यूशन और अलग-अलग मोबाइल डिवाइस को शामिल करने में बहुत मददगार साबित हुआ है. इसके अलावा, एक फ़ुल स्क्रीन ब्राउज़र की मदद से, यह हमारे वेब गेम को कई ब्राउज़र-आधारित गेम की तुलना में परंपरागत डेस्कटॉप गेमिंग जैसा ज़्यादा अनुभव देता है. जैसे-जैसे HTML5 और वेब टेक्नोलॉजी का लगातार विकास हो रहा है, हम वेब गेम में और इनोवेशन की उम्मीद करते हैं.