Roll It एक Chrome प्रयोग है, जो आपके फ़ोन और कंप्यूटर पर केवल ब्राउज़र का उपयोग करके क्लासिक बोर्डवॉक गेम की कल्पना करता है. आपके फ़ोन का ब्राउज़र आपको अपनी कलाई को फ़्लिक कर बॉल को लक्षित करने और रोल करने की सुविधा देता है, जबकि आपके कंप्यूटर का ब्राउज़र WebGL और Canvas के साथ रोल इट एली के रीयल टाइम ग्राफ़िक्स को रेंडर करता है. दोनों डिवाइस Websockets के ज़रिए कम्यूनिकेट करते हैं. कोई ऐप्लिकेशन नहीं है. कोई डाउनलोड नहीं. कोई टोकन नहीं. आपको बस एक आधुनिक ब्राउज़र की ज़रूरत है.
Google Creative Lab के निर्देशों का पालन करते हुए, Legwork ने उपयोगकर्ता अनुभव, इंटरफ़ेस, और गेम एनवायरमेंट डेवलप किया. इसके बाद, रोल इट बनाने के लिए, डेवलपमेंट पार्टनर, Mode Set के साथ मिलकर काम किया. इस प्रोजेक्ट के दौरान कई अनोखी चुनौतियों का सामना करना पड़ा. इस लेख में, रोल इट को सफल बनाने के दौरान इस्तेमाल की गई कुछ तकनीकों, सीखे गए तरीकों, और सीखे गए सबक के बारे में बताया गया है.
3D वर्कफ़्लो
शुरुआत में सबसे बड़ी परेशानी हमारे सॉफ़्टवेयर से 3D मॉडल को वेब के लिए तैयार फ़ाइल फ़ॉर्मैट में लाने का सबसे अच्छा तरीका पता लगाना था. Cinema 4D में एसेट बनाने के बाद, मॉडल को आसान बनाया गया और उन्हें लो-पॉलीगॉन मेश में बदल दिया गया. हर मेश को कुछ पॉलीगॉन चुनने के टैग दिए गए, ताकि रंग और बनावट के लिए ऑब्जेक्ट के हिस्सों के बीच अंतर किया जा सके. इसके बाद हम कोलाडा 1.5 (.dae) फ़ाइल के तौर पर एक्सपोर्ट कर पाए और तीसरे पक्ष के 3D प्रोग्राम ब्लेंडर में इंपोर्ट कर पाए, ताकि तीन.js के साथ काम करने वाली फ़ाइलें बनाई जा सकें. यह पक्का करने के बाद कि हमारे मॉडल सही तरीके से इंपोर्ट हो गए हैं, हमने मेश को JSON फ़ाइल के तौर पर एक्सपोर्ट कर दिया और कोड का इस्तेमाल करके लाइटिंग को लागू कर दिया. हमने जो कदम उठाए हैं उनके बारे में यहां ज़्यादा जानकारी दी गई है:
कोड लिखना
रोल इसे, ओपन सोर्स लाइब्रेरी की मदद से बनाया गया है और यह मॉडर्न ब्राउज़र में नेटिव तौर पर चलता है. वेब, WebGL और WebSockets जैसी टेक्नोलॉजी की मदद से, कंसोल-क्वालिटी वाले गेमिंग और मल्टीमीडिया अनुभवों का हिस्सा बन रहा है. डेवलपर आसानी और सुविधा के हिसाब से इन अनुभवों को बना सकते हैं. इसलिए, एचटीएमएल डेवलपमेंट के लिए ज़्यादा आधुनिक टूल उपलब्ध होने की वजह से, यह सुविधा काफ़ी आसानी से बनाई जा रही है.
डेवलपमेंट एनवायरमेंट
रोल इट के ज़्यादातर मूल कोड CoffeeScript के साथ लिखे गए थे. यह एक ऐसी साफ़ और कम शब्दों वाली भाषा है जो अच्छी तरह से बने और लिंटेड JavaScript में बदल जाती है. CoffeeScript अपने इनहेरिटेंस मॉडल और बेहतर स्कोप हैंडलिंग की मदद से, OOP डेवलपमेंट में बेहतर तरीके से काम करता है. सीएसएस को SASS फ़्रेमवर्क के साथ लिखा गया था. इससे डेवलपर को प्रोजेक्ट की स्टाइलशीट को बेहतर बनाने और मैनेज करने के लिए कई शानदार टूल मिलते हैं. इन सिस्टम को बिल्ड प्रोसेस में जोड़ने में सेट अप होने में थोड़ा समय लगता है, लेकिन इससे फ़ायदा होता है. खास तौर पर, रोल इट जैसे बड़े प्रोजेक्ट के मामले में. हमने डेवलपमेंट के दौरान अपनी ऐसेट को अपने-आप कंपाइल करने के लिए, Ruby on Rails सर्वर को सेट अप किया था. इससे, कंपाइलेशन के सभी चरणों को पारदर्शी बनाया गया.
कोडिंग को आसान और बेहतर बनाने के अलावा, हमने अनुरोधों को कम करने के लिए ऐसेट को मैन्युअल तरीके से ऑप्टिमाइज़ किया है, ताकि साइट तेज़ी से लोड हो सके. हमने हर इमेज को कई कंप्रेशन प्रोग्राम की मदद से चलाया, जैसे कि ImageOptim और ImageAlpha. हर प्रोग्राम, इमेज को अपने हिसाब से ऑप्टिमाइज़ करता है—लॉसलेस और लॉसी. सेटिंग के सही कॉम्बिनेशन से, वे किसी इमेज के फ़ाइल साइज़ को काफ़ी कम कर सकती हैं. इससे बाहरी इमेज लोड करते समय न सिर्फ़ बैंडविड्थ बचती है, बल्कि ऑप्टिमाइज़ होने के बाद आपकी इमेज एचटीएमएल, सीएसएस, और JavaScript में इनलाइन एम्बेड करने के लिए, बहुत छोटी Base64 कोड में बदली गई स्ट्रिंग में बदल जाएंगी. Base64 एन्कोडिंग के मामले में, हमने इस तकनीक का इस्तेमाल करके अपनी Open Sans WOFF और SVG फ़ॉन्ट फ़ाइलों को सीधे सीएसएस में भी एम्बेड कर दिया, जिसकी वजह से कुल अनुरोधों की संख्या और भी कम हो गई.
फ़िज़िक्स पर काम करने वाला 3D सीन
THREE.js, वेब के लिए इस्तेमाल की जाने वाली 3D JavaScript लाइब्रेरी है. इसमें लो-लेवल के 3D मैथ और हार्डवेयर-आधारित WebGL ऑप्टिमाइज़ेशन को शामिल किया गया है. इसकी मदद से, सिर्फ़ इंसान आसानी से अच्छी रोशनी और खूबसूरत इंटरैक्टिव 3D सीन बना सकते हैं. इसके लिए, कस्टम शेडर बनाने या मैन्युअल तरीके से मैट्रिक्स ट्रांसफ़ॉर्मेशन की ज़रूरत नहीं होती. Physijs, एक लोकप्रिय C++ भौतिकी लाइब्रेरी के लिए THREE.js का खास रैपर है जिसका अनुवाद JavaScript में किया गया है. हमने इस लाइब्रेरी का फ़ायदा लिया, ताकि 3D में बॉल को रोल करते, कूदते, और अपने डेस्टिनेशन की ओर बाउंस करने के अनुभव को सिम्युलेट किया जा सके.
शुरुआत से, हमने बॉल को रोल करने के अनुभव को न सिर्फ़ हकीकत में बदलने का काम किया, बल्कि यह भी पक्का किया कि गेम में मौजूद चीज़ें असली लगे. इसके लिए फ़िज़िज के दृश्य की पूरी गुरुत्वाकर्षण, प्लेयर के फेंकने से ली गई बॉल की गति, लेन के कूदने का स्लोप, और बॉल और लेन की सामग्री के घर्षण और पुनर्स्थापन (बाउंसनेस) के गुणों को अडजस्ट करने की कई बार ज़रूरत पड़ी. ज़्यादा गुरुत्व और ज़्यादा स्पीड की वजह से, गेम खेलने का असल अनुभव मिलता है.
स्मूद आउट
ज़्यादातर आधुनिक ब्राउज़र और वीडियो कार्ड के कॉम्बिनेशन को WebGL वातावरण में हार्डवेयर-आधारित एंटी-एलियासिंग का फ़ायदा उठाना चाहिए, लेकिन कुछ अच्छे नहीं चल पाएंगे. अगर एंटी-एलियासिंग मूल रूप से काम नहीं करती, तो THREE.js सीन में सख्त और कंट्रास्ट वाले किनारे, नुकीले और बदसूरत होंगे. (कम से कम, हमारी नज़र एकदम ऊपर है).
अच्छी बात यह है कि इसका समाधान है: कोड के एक स्निपेट के ज़रिए, हम यह पता लगा सकते हैं कि प्लैटफ़ॉर्म में मूल रूप से एंटीएलियासिंग की सुविधा काम करेगी या नहीं. अगर ऐसा है, तो हम जा सकते हैं. अगर ऐसा नहीं होता है, तो THREE.js के साथ आने वाले कई पोस्ट-प्रोसेस शेडर मौजूद हैं जो हमारी मदद कर सकते हैं. जैसे, FXAA एंटी-एलियासिंग फ़िल्टर. इस शेडर की मदद से, रेंडर किए गए सीन के हर फ़्रेम को फिर से बनाया जाता है. इससे, हमारी लाइन और किनारों को बेहतर तरीके से दिखाया जा सकता है. नीचे दिया गया डेमो देखें:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
एक्सलरोमीटर वाले गेम कंट्रोल
रोल का ज़्यादातर हिस्सा बॉल-रोलिंग जेस्चर के ज़रिए मिलता है, जिसे खिलाड़ी फ़ोन पर परफ़ॉर्म करता है. कुछ समय के लिए मोबाइल डिवाइस के पास ब्राउज़र में एक्सीलरोमीटर की पहुंच थी, लेकिन एक उद्योग के रूप में हम बस वेब पर गति आधारित हाव-भाव की पहचान को एक्सप्लोर करने की शुरुआत कर रहे हैं. फ़ोन के एक्सलरोमीटर से मिलने वाले डेटा की वजह से, हमारे पास कुछ हद तक सीमित है. हालांकि, अपनी क्रिएटिविटी के साथ हम बेहतर नए अनुभव दे सकते हैं.
रोल यह मुख्य "रोल" जेस्चर का पता लगाने के लिए, विंडो के deviceorientation इवेंट से मिले सबसे हाल ही के 10 एक्सलरोमीटर अपडेट को ट्रैक किया जाता है. मौजूदा झुकाव वैल्यू में से पिछली झुकाव वैल्यू को घटाकर, हम इवेंट के बीच ऐंगल डेल्टा स्टोर करते हैं. इसके बाद, आखिरी दस कोणों के डेल्टा का योग निकालने पर, हम अंतरिक्ष के दौरान फ़ोन के लगातार घूमने का पता लगा सकते हैं. जब फ़ोन, कैमरे के ऐंगल में बदलाव के थ्रेशोल्ड से ज़्यादा हो जाता है, तब हम रोल ट्रिगर करते हैं. फिर, उस स्वीप में सबसे बड़े एकल झुकाव डेल्टा का पता लगाकर, हम बॉल की गति का अनुमान लगा सकते हैं. 'रोल इट' में, इस स्पीड को उन टाइमस्टैंप का इस्तेमाल करके सामान्य किया जाता है जिन्हें हम हर एक्सीलरोमीटर अपडेट के साथ जोड़ते हैं. इससे अलग-अलग डिवाइसों पर ब्राउज़र में एक्सलरोमीटर के अपडेट होने की स्पीड को आसान बनाने में मदद मिलती है.
WebSockets कम्यूनिकेशन
जब खिलाड़ी अपने फ़ोन से बॉल को घुमाता है, तब लैपटॉप से फ़ोन पर एक मैसेज भेजा जाता है. इसमें उसे बॉल लॉन्च करने के लिए कहा जाता है. यह "रोल" मैसेज, दो मशीन के बीच WebSocket कनेक्शन के ज़रिए, JSON डेटा ऑब्जेक्ट के ज़रिए भेजा जाता है. JSON डेटा छोटा होता है. इसमें मुख्य रूप से मैसेज का टाइप, थ्रो स्पीड, और लक्ष्य तय करने की जानकारी शामिल होती है.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
लैपटॉप और फ़ोन के बीच सबकुछ इस तरह के छोटे JSON मैसेज के ज़रिए होता है. जब भी गेम, डेस्कटॉप पर अपनी स्थिति अपडेट करता है या उपयोगकर्ता फ़ोन पर किसी बटन को झुकाता या टैप करता है, तो मशीनों के बीच एक WebSocket मैसेज ट्रांसमिट होता है. इस कम्यूनिकेशन को आसान और मैनेज करने में आसान बनाए रखने के लिए, WebSockets मैसेज को किसी भी ब्राउज़र से एक एग्ज़िट पॉइंट का इस्तेमाल करके ब्रॉडकास्ट किया जाता है. इसके ठीक उलट, पाने वाले ब्राउज़र पर एक ही एंट्री पॉइंट होता है, जिसमें एक WebSocket ऑब्जेक्ट होता है. यह ऑब्जेक्ट, आने वाले सभी मैसेज और आउटगोइंग मैसेज को दोनों सिरों पर हैंडल करता है. जब कोई WebSocket मैसेज मिलता है, तब jQuery की trigger() तरीके का इस्तेमाल करके, JavaScript ऐप्लिकेशन में JSON डेटा का फिर से ब्रॉडकास्ट किया जाता है. इस समय, इनकमिंग डेटा किसी भी दूसरे कस्टम DOM इवेंट की तरह ही काम करता है. साथ ही, इसे ऐप्लिकेशन में मौजूद किसी भी अन्य ऑब्जेक्ट से पिक अप और प्रोसेस किया जा सकता है.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
जब दो डिवाइस किसी गेम कोड के साथ सिंक हो जाते हैं, तो इसके WebSocket सर्वर तुरंत बन जाते हैं. रोल इट का बैकएंड, Go का इस्तेमाल करके Google Compute Engine और App Engine प्लैटफ़ॉर्म पर बनाया गया.
मेन्यू स्क्रीन झुकाएं
गेमप्ले के दौरान इस्तेमाल किए जाने वाले इवेंट-ड्रिवन WebSocket मैसेज के अलावा, रोल इट में मौजूद मेन्यू को कंट्रोल करने के लिए, फ़ोन को झुकाया जाता है. इसके बाद, किसी बटन पर टैप करके चुने गए विकल्प को चुना जाता है. इसके लिए, फ़ोन से लैपटॉप पर ट्रांसमिट होने वाले टिल्ट डेटा की स्ट्रीम, एक जैसी होनी चाहिए. बैंडविड्थ कम करने और ग़ैर-ज़रूरी अपडेट से बचने के लिए, ये मैसेज सिर्फ़ तब भेजे जाते हैं, जब डिवाइस के झुकाने में कुछ डिग्री से ज़्यादा का बदलाव हुआ हो. अगर फ़ोन टेबल पर लेटा हुआ है, तो झुकाव का डेटा भेजने का कोई फ़ायदा नहीं है! ट्रांसमिशन की दर भी थ्रॉटल की जाती है - 'रोल इट' में हर सेकंड 15 से ज़्यादा WebSockets मैसेज नहीं भेजे जाते, भले ही डिवाइस को झुकाया गया हो.
कंप्यूटर पर झुकाने की वैल्यू इकट्ठा करने के बाद, उन्हें समय के साथ requestAnimationFrame का इस्तेमाल करके इंटरपोलेट किया जाता है, ताकि उनके अनुभव को बेहतर बनाया जा सके. आखिरी नतीजा एक घूमता हुआ मेन्यू और एक बॉल होती है, जो उपयोगकर्ता के चुने हुए विकल्प को दिखाने के लिए घूमती है. जब फ़ोन टिल्ट डेटा भेजता है, तो ये डीओएम एलिमेंट रीयल टाइम में अपडेट हो जाते हैं. इसके लिए, requestAnimationFrame लूप में एक सीएसएस ट्रांसफ़ॉर्म का फिर से हिसाब लगाया जाता है. मेन्यू का कंटेनर बस घूमता है, लेकिन ऐसा लगता है कि बॉल फ़र्श पर घूम रही है. यह प्रभाव हासिल करने के लिए, हमने कुछ बुनियादी त्रिकोणमिति लागू की है, जो बॉल x-निर्देशांक को इसके घूर्णन से जुड़ी है. आसान समीकरण है: घूर्णन = x / (व्यास * लर्निंग)
आखिर में खास जानकारी
इसे रोल करें समय का संकेत है. अपने डेवलपमेंट को चलाने वाले ओपन सोर्स प्रोजेक्ट, हमारे डेस्क और हमारी जेब में मौजूद डिवाइसों की प्रोसेसिंग पावर, और एक प्लैटफ़ॉर्म के रूप में वेब की स्थिति के बीच, ओपन वेब से कनेक्ट होना सच में रोमांचक और बदलाव लाने वाला समय है. कुछ साल पहले, इस टेक्नोलॉजी का ज़्यादातर हिस्सा सिर्फ़ मालिकाना सिस्टम में मौजूद था. साथ ही, इसे बिना किसी शुल्क के इस्तेमाल और डिस्ट्रिब्यूट नहीं किया जा सकता. फ़िलहाल, हम हर दिन पहेली के नए हिस्से बनाते और शेयर करते हैं. इसलिए, कम मेहनत और सोच-समझकर मुश्किल से मुश्किल अनुभवों को हकीकत में बदल दिया जा सकता है. तो फिर इंतज़ार कैसा? कुछ शानदार बनाएं और उसे दुनिया के साथ शेयर करें!
