Roll It, Chrome एक्सपेरिमेंट है. इसमें, आपके फ़ोन और कंप्यूटर पर ब्राउज़र का इस्तेमाल करके, बोर्डवॉक गेम को नए अंदाज़ में खेला जा सकता है. आपके फ़ोन के ब्राउज़र की मदद से, अपनी कलाई को झटककर गेंद को निशाना लगाया जा सकता है और उसे रोल किया जा सकता है. वहीं, आपके कंप्यूटर के ब्राउज़र में, WebGL और कैनवस की मदद से, Roll It गेम के अले की रीयल टाइम ग्राफ़िक्स रेंडर की जाती हैं. दोनों डिवाइस, वेबसोकेट के ज़रिए आपस में जानकारी शेयर करते हैं. कोई ऐप्लिकेशन नहीं. कोई डाउनलोड नहीं. कोई टोकन नहीं. इसके लिए, आपको सिर्फ़ एक मॉडर्न ब्राउज़र की ज़रूरत है.
Google Creative Lab के निर्देशों के तहत, Legwork ने उपयोगकर्ता अनुभव, इंटरफ़ेस, और गेम एनवायरमेंट को डेवलप किया. इसके बाद, Roll It बनाने के लिए, डेवलपमेंट पार्टनर Mode Set के साथ मिलकर काम किया. प्रोजेक्ट के दौरान, हमें कई तरह की चुनौतियों का सामना करना पड़ा. इस लेख में, 'रोल आइट' को तैयार करने के दौरान इस्तेमाल की गई कुछ तकनीकों, खोजी गई कुछ तरकीबों, और सीखे गए कुछ सबकों के बारे में बताया गया है.
3D वर्कफ़्लो
शुरुआत में, हमारे सॉफ़्टवेयर से 3D मॉडल को वेब के लिए तैयार फ़ाइल फ़ॉर्मैट में बदलने का सबसे अच्छा तरीका ढूंढना एक समस्या थी. Cinema 4D में एसेट बनाने के बाद, मॉडल को आसान बनाया गया और उन्हें कम पॉलीगॉन वाले मेश में बदल दिया गया. हर मेश को कुछ पॉलीगॉन सिलेक्शन टैग दिए गए थे, ताकि रंग और टेक्सचर के लिए ऑब्जेक्ट के हिस्सों में अंतर किया जा सके. इसके बाद, हमने इसे Collada 1.5 (.dae) फ़ाइल के तौर पर एक्सपोर्ट किया और three.js के साथ काम करने वाली फ़ाइलें बनाने के लिए, ओपन सोर्स 3D प्रोग्राम Blender में इंपोर्ट किया. जब हमें यह पक्का हो गया कि हमारे मॉडल सही तरीके से इंपोर्ट हो गए हैं, तब हमने मेश को JSON फ़ाइल के तौर पर एक्सपोर्ट किया. साथ ही, कोड का इस्तेमाल करके लाइटिंग लागू की. हमने जो कदम उठाए उनके बारे में ज़्यादा जानकारी यहां दी गई है:
कोड लिखना
Roll It को ओपन सोर्स लाइब्रेरी की मदद से बनाया गया है. यह आधुनिक ब्राउज़र में नेटिव तौर पर काम करता है. WebGL और WebSockets जैसी टेक्नोलॉजी की मदद से, वेब पर कंसोल-क्वालिटी वाले गेम और मल्टीमीडिया अनुभव मिल रहे हैं. HTML डेवलपमेंट के लिए ज़्यादा आधुनिक टूल उपलब्ध होने की वजह से, डेवलपर के लिए इन सुविधाओं को बनाने का तरीका आसान और बेहतर हो गया है.
डेवलपमेंट एनवायरमेंट
Roll It का ज़्यादातर ओरिजनल कोड, CoffeeScript में लिखा गया था. यह एक आसान और कम शब्दों वाली भाषा है, जो अच्छी तरह से बनाई गई और linted JavaScript में ट्रांसकंपाइल होती है. ओओपी (ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग) डेवलपमेंट के लिए, CoffeeScript का इस्तेमाल करना बेहतर होता है. इसकी वजह यह है कि इसमें इनहेरिटेंस मॉडल और स्कोप को बेहतर तरीके से मैनेज किया जा सकता है. सीएसएस को SASS फ़्रेमवर्क की मदद से लिखा गया था. इससे डेवलपर को प्रोजेक्ट की स्टाइलशीट को बेहतर बनाने और मैनेज करने के लिए कई बेहतरीन टूल मिलते हैं. इन सिस्टम को बिल्ड प्रोसेस में जोड़ने के लिए, सेट अप करने में थोड़ा समय लगता है. हालांकि, खास तौर पर Roll It जैसे बड़े प्रोजेक्ट के लिए, यह समय बिल्कुल सही साबित होता है. हमने Ruby on Rails सर्वर सेट अप किया है, ताकि डेवलपमेंट के दौरान हमारी ऐसेट अपने-आप कंपाइल हो सकें. इससे, कंपाइल करने के सभी चरणों को साफ़ तौर पर देखा जा सकता है.
हमने कोडिंग के लिए आसान और बेहतर माहौल बनाने के साथ-साथ, ऐसेट को मैन्युअल तरीके से ऑप्टिमाइज़ किया है, ताकि साइट तेज़ी से लोड हो सके. इससे अनुरोधों की संख्या कम हो जाती है. हमने हर इमेज को कंप्रेस करने वाले कुछ प्रोग्राम से चलाया—ImageOptim और ImageAlpha. हर प्रोग्राम, इमेज को अपने तरीके से ऑप्टिमाइज़ करता है. जैसे, लॉसलेस और लॉस वाली इमेज. सही सेटिंग का इस्तेमाल करके, इमेज के फ़ाइल साइज़ को काफ़ी कम किया जा सकता है. इससे बाहरी इमेज लोड करते समय, बैंडविड्थ की बचत होती है. साथ ही, इमेज को ऑप्टिमाइज़ करने के बाद, वे एचटीएमएल, सीएसएस, और JavaScript में इनलाइन एम्बेड करने के लिए, बहुत छोटी बेस64 एन्कोड की गई स्ट्रिंग में बदल जाएंगी. बेस64 कोड में बदलने की सुविधा का इस्तेमाल करके, हमने 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;
एक्सलरोमीटर पर आधारित गेम कंट्रोल
Roll It गेम का ज़्यादातर मज़ा, गेंद को फ़ोन से लुढ़काने के जेस्चर से मिलता है. मोबाइल डिवाइसों के पास ब्राउज़र में ऐक्सेलेरोमीटर का ऐक्सेस कुछ समय से है. हालांकि, हम इंडस्ट्री के तौर पर, वेब पर मोशन पर आधारित जेस्चर की पहचान करने की सुविधा को अभी एक्सप्लोर कर रहे हैं. फ़ोन के ऐक्सीलरॉमीटर से मिलने वाले डेटा की वजह से, हम कुछ हद तक सीमित हैं. हालांकि, थोड़ी क्रिएटिविटी से हम कुछ बेहतरीन नए अनुभव दे सकते हैं.
Roll It के मुख्य "रोल" जेस्चर का पता लगाने के लिए, सबसे हाल ही के 10 ऐक्सीलरॉमीटर अपडेट को ट्रैक किया जाता है. ये अपडेट, विंडो के deviceorientation इवेंट से मिलते हैं. मौजूदा झुकाव की वैल्यू से पिछली झुकाव की वैल्यू को घटाकर, हम इवेंट के बीच के ऐंगल डेल्टा को सेव करते हैं. इसके बाद, पिछले 10 ऐंगल डेल्टा को लगातार जोड़कर, हम फ़ोन के स्पेस में घूमने पर, लगातार घूमने का पता लगा सकते हैं. जब फ़ोन स्वीपिंग ऐंगल में बदलाव की थ्रेशोल्ड को पार कर जाता है, तो हम रोल को ट्रिगर करते हैं. इसके बाद, उस स्वीप में सबसे ज़्यादा टिल्ट डेल्टा ढूंढकर, गेंद की स्पीड का अनुमान लगाया जा सकता है. Roll It में, इस स्पीड को टाइमस्टैंप का इस्तेमाल करके नॉर्मलाइज़ किया जाता है. हम हर ऐक्सीलेरोमीटर अपडेट में टाइमस्टैंप अटैच करते हैं. इससे, अलग-अलग डिवाइसों पर ब्राउज़र में ऐक्सेलेरोमीटर अपडेट की गति को आसानी से कंट्रोल किया जा सकता है.
WebSockets कम्यूनिकेशन
जब खिलाड़ी अपने फ़ोन से गेंद को रोल करता है, तो फ़ोन से लैपटॉप पर एक मैसेज भेजा जाता है. इसमें गेंद को लॉन्च करने के लिए कहा जाता है. यह "रोल" मैसेज, दो मशीनों के बीच WebSocket कनेक्शन के ज़रिए JSON डेटा ऑब्जेक्ट के ज़रिए भेजा जाता है. JSON डेटा छोटा होता है. इसमें मुख्य रूप से मैसेज का टाइप, फ़ेंकने की स्पीड, और ऐमिंग की दिशा शामिल होती है.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
लैपटॉप और फ़ोन के बीच, इस तरह के छोटे JSON मैसेज के ज़रिए सभी तरह की जानकारी शेयर की जाती है. जब भी गेम, डेस्कटॉप पर अपनी स्थिति अपडेट करता है या उपयोगकर्ता फ़ोन पर किसी बटन को टैप या झुकाता है, तो दोनों मशीनों के बीच एक वेबसोकेट मैसेज भेजा जाता है. इस कम्यूनिकेशन को आसान और मैनेज करने लायक बनाने के लिए, WebSockets मैसेज को किसी भी ब्राउज़र से एक ही एक्सिट पॉइंट का इस्तेमाल करके ब्रॉडकास्ट किया जाता है. इसके उलट, WebSocket कनेक्शन पाने वाले ब्राउज़र पर एक ही एंट्री पॉइंट होता है. इसमें एक WebSocket ऑब्जेक्ट, दोनों तरफ़ आने और जाने वाले सभी मैसेज को मैनेज करता है. जब कोई वेबसोकेट मैसेज मिलता है, तो JSON डेटा को JavaScript ऐप्लिकेशन में फिर से ब्रॉडकास्ट किया जाता है. इसके लिए, jQuery के trigger() तरीके का इस्तेमाल किया जाता है. इस समय, आने वाला डेटा किसी भी अन्य कस्टम 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));
};
जब दो डिवाइसों को गेम कोड के साथ सिंक किया जाता है, तो Roll It के वेबसोकेट सर्वर अपने-आप बन जाते हैं. Roll It के बैकएंड को Go का इस्तेमाल करके, Google Compute Engine और App Engine प्लैटफ़ॉर्म पर बनाया गया था.
मेन्यू स्क्रीन को झुकाना
गेमप्ले के दौरान इस्तेमाल किए जाने वाले इवेंट-ड्रिवन वेबसोकेट मैसेज के अलावा, Roll It में मेन्यू को फ़ोन को झुकाकर कंट्रोल किया जाता है. साथ ही, किसी विकल्प की पुष्टि करने के लिए, बटन पर टैप किया जाता है. इसके लिए, फ़ोन से लैपटॉप पर झुकाव के डेटा की स्ट्रीम को लगातार भेजना ज़रूरी है. बैंडविड्थ कम करने और ग़ैर-ज़रूरी अपडेट भेजने से बचने के लिए, ये मैसेज सिर्फ़ तब भेजे जाते हैं, जब डिवाइस का झुकाव कुछ डिग्री से ज़्यादा हो. अगर फ़ोन टेबल पर लेटा हुआ है, तो झुकाव के डेटा की स्ट्रीम भेजने का कोई मतलब नहीं है! डेटा ट्रांसफ़र की दर भी कम कर दी जाती है - Roll It में हर सेकंड ज़्यादा से ज़्यादा 15 वेबसोकेट मैसेज भेजे जाते हैं. भले ही, डिवाइस को लगातार झुकाया जा रहा हो.
कंप्यूटर पर झुकाव की वैल्यू लेने के बाद, उन्हें requestAnimationFrame का इस्तेमाल करके समय के साथ इंटरपोलेशन किया जाता है, ताकि उन्हें आसानी से महसूस किया जा सके. आखिर में, एक घूमता हुआ मेन्यू और एक बॉल दिखता है. यह बॉल, उपयोगकर्ता के चुने गए विकल्प को दिखाने के लिए रोल करता है. जब फ़ोन टिल्ट डेटा भेजता है, तो requestAnimationFrame लूप में सीएसएस ट्रांसफ़ॉर्म को फिर से कैलकुलेट करके, ये डीओएम एलिमेंट रीयल टाइम में अपडेट हो जाते हैं. मेन्यू का कंटेनर सिर्फ़ घूमता है, लेकिन बॉल फ़्लोर पर लुढ़कती हुई दिखती है. इस इफ़ेक्ट को पाने के लिए, हम कुछ बुनियादी ट्रिगोनोमेट्री का इस्तेमाल करते हैं, ताकि बॉल के एक्स-कोऑर्डिनेट को उसके रोटेशन से जोड़ा जा सके. इसका आसान समीकरण यह है: घुमाव = x / (डाइमीटर * π)
आखिर में खास जानकारी
Roll It, समय के साथ बदलाव का एक उदाहरण है. ओपन सोर्स प्रोजेक्ट की मदद से, ओपन वेब को डेवलप किया गया है. साथ ही, हमारे डेस्क और पॉकेट में मौजूद डिवाइसों की प्रोसेसिंग पावर और प्लैटफ़ॉर्म के तौर पर वेब की स्थिति भी बेहतर हो रही है. इसलिए, ओपन वेब से जुड़ना वाकई रोमांचक और बदलावों का समय है. कुछ साल पहले, ज़्यादातर टेक्नोलॉजी सिर्फ़ मालिकाना हक वाले सिस्टम में मौजूद थी. इसे बिना किसी शुल्क के इस्तेमाल और डिस्ट्रिब्यूट नहीं किया जा सकता था. आज, कम काम और ज़्यादा कल्पना से जटिल अनुभवों को साकार किया जा सकता है. ऐसा इसलिए, क्योंकि हम हर दिन पहेली के नए हिस्से बनाते और शेयर करते हैं. तो फिर इंतज़ार कैसा? कुछ बेहतर बनाएं और उसे दुनिया के साथ शेयर करें!
