यह गेम, minesweeper से प्रेरित है. इसमें आपको आस-पास मौजूद चीज़ों को ढूंढना होता है.
squoosh.app बनाने वाली टीम वापस आ गई है! इस बार, हमने PROXX (proxx.app) नाम का वेब-आधारित गेम बनाया है. PROXX एक ऐसा गेम है जिसमें आपको अपने आस-पास मौजूद चीज़ों को ढूंढना होता है. यह गेम, मशहूर गेम Minesweeper से प्रेरित है. यह गेम अंतरिक्ष में होता है और आपका काम यह पता लगाना होता है कि ब्लैक होल कहां हैं. यह सभी तरह के डिवाइसों पर काम करता है. जैसे, डेस्कटॉप से लेकर फ़ीचर फ़ोन तक. उपयोगकर्ता, स्क्रीन रीडर के साथ-साथ माउस, कीबोर्ड, डी-पैड का इस्तेमाल करके गेम खेल सकते हैं.
हमारा बेसलाइन
इस गेम को बनाने से पहले, हमने ऐप्लिकेशन के लिए ये लक्ष्य और बजट सेट किए थे:
- एक जैसा मुख्य अनुभव: सभी डिवाइसों पर एक जैसा काम करना चाहिए
- ऐक्सेस किया जा सकता है: माउस, कीबोर्ड, टच, डी-पैड, स्क्रीन रीडर
- बेहतरीन परफ़ॉर्म करने वाले:
- शुरुआती पेलोड 25 केबी से कम होना चाहिए
- धीमे 3G पर, TTI (इंटरैक्टिव होने में लगने वाला समय) पांच सेकंड से कम
- 60 fps (फ़्रेम प्रति सेकंड) पर लगातार चलने वाला ऐनिमेशन
वेब वर्कर
इस गेम में चार मुख्य इकाइयां होती हैं: गेम का मुख्य लॉजिक, यूज़र इंटरफ़ेस (यूआई) सेवा, स्थिति सेवा, और ऐनिमेशन ग्राफ़िक. हमें शुरू से ही पता था कि हमें मुख्य थ्रेड पर ज़्यादा ऐनिमेशन वाले ग्राफ़िक चलाने होंगे. इसलिए, हमने गेम लॉजिक और स्टेटस सेवा को वेब वर्कर्स पर ले जाया, ताकि मुख्य थ्रेड को ज़्यादा से ज़्यादा खाली रखा जा सके.
बिल्ड टाइम के दौरान प्री-रेंडर करना
हमारा यूज़र इंटरफ़ेस (यूआई), Preact के साथ बनाया गया है. इससे हमें 25 केबी से कम के शुरुआती पेलोड के लिए, अपने ज़्यादा टारगेट को हासिल करने में मदद मिलती है. शुरुआती लोडिंग का बेहतर अनुभव देने के लिए, हमने अपने पहले व्यू को पहले से रेंडर करने का फ़ैसला लिया है. हम Puppeteer का इस्तेमाल करके, बिल्ड के समय पेज को पहले से रेंडर करते हैं, ताकि मुख्य पेज को ऐक्सेस किया जा सके और preact को डीओएम में जानकारी अपने-आप भरने की अनुमति दी जा सके. इसके बाद, इस DOM को एचटीएमएल में क्रम से लगाया जाता है और index.html के तौर पर सेव किया जाता है
ऐनिमेशन के लिए कैनवस, सुलभता के लिए (न दिखने वाला) डीओएम
हम WebGL का इस्तेमाल करके, गेम के ग्राफ़िक को कैनवस में रेंडर करते हैं. एक कैनवस, बैकग्राउंड ऐनिमेशन के लिए ज़िम्मेदार है और दूसरा कैनवस, सबसे ऊपर मौजूद गेम ग्रिड के लिए ज़िम्मेदार है. हमारे पास सुलभता से जुड़ी वजहों से बटन वाली एक एचटीएमएल टेबल भी है, जो इन दोनों कैनवस के ऊपर है. हालांकि, इसे अदृश्य (ओपैसिटी: 0) कर दिया गया है. आपको गेम की स्थिति का कैनवस रेंडरिंग दिखता है, लेकिन प्लेयर अदृश्य DOM टेबल के साथ इंटरैक्ट कर रहा है. इससे हमें इवेंट लिसनर अटैच करने और ब्राउज़र के फ़ोकस मैनेजमेंट पर भरोसा करने की सुविधा मिलती है.
डीओएम एलिमेंट को कैनवस में रखकर, हम ब्राउज़र में पहले से मौजूद सुलभता सुविधाओं का इस्तेमाल कर सकते हैं. उदाहरण के लिए: गेम टेबल पर role="grid"
सेट करके, स्क्रीन रीडर फ़ोकस की गई सेल की पंक्ति और कॉलम को पढ़कर सुनाए सकते हैं. इसके लिए, हमें कुछ करने की ज़रूरत नहीं है.
बंडलिंग और कोड को अलग-अलग हिस्सों में बांटने के लिए रोलअप
ज़िप किए जाने के बाद, ऐप्लिकेशन का कुल साइज़ 100 केबी हो जाता है. इसमें से 20 केबी, शुरुआती पेलोड (index.html) के लिए है. हम इस प्रोजेक्ट के लिए, Rollup.js का इस्तेमाल करते हैं. हमने मुख्य थ्रेड और वेब वर्कर्स के बीच डिपेंडेंसी शेयर की हैं. Rollup, इन शेयर की गई डिपेंडेंसी को एक अलग चंक में डाल सकता है. इसे सिर्फ़ एक बार लोड करना होता है. webpack जैसे अन्य बंडलर, शेयर की गई डिपेंडेंसी का डुप्लीकेट बनाते हैं. इस वजह से, दो बार लोडिंग होती है.
फ़ीचर फ़ोन के साथ काम करने वाले
KaiOS फ़ोन जैसे स्मार्ट फ़ीचर फ़ोन तेज़ी से लोकप्रिय हो रहे हैं. इन डिवाइसों में संसाधनों की कमी होती है. हालांकि, जब भी हो सके, वेब वर्कर्स का इस्तेमाल करने के हमारे तरीके की मदद से, हम इन फ़ोन पर भी बेहतरीन अनुभव दे पाए. फ़ीचर फ़ोन में अलग-अलग इनपुट इंटरफ़ेस (डी-पैड और नंबर बटन, टचस्क्रीन नहीं) होते हैं. इसलिए, हमने बटन पर आधारित इंटरफ़ेस भी लागू किया है.
आगे क्या करना है
Google I/O 2019 के लिए इस गेम को समय पर तैयार करने में हमें काफ़ी मज़ेदार अनुभव मिला. हालांकि, इस दौरान हम काफ़ी व्यस्त रहे. इसलिए, हम कुछ समय के लिए आराम करेंगे. हालांकि, हम गेम के इन सभी पहलुओं के बारे में ज़्यादा जानकारी देने के लिए, फिर से वापस आएंगे.
तब तक, इस प्रोजेक्ट के बारे में I/O में मारिको की दी गई बातचीत देखें.
proxx के GitHub रेपो पर जाकर, कोड को ब्राउज़ किया जा सकता है.
धन्यवाद! सुरमा, रोहन, मारिको