यह गेम, 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 केबी gzip किया जाता है. इसमें से 20 केबी, शुरुआती पेलोड (index.html) के लिए है. हम इस प्रोजेक्ट के लिए, Rollup.js का इस्तेमाल करते हैं. हमने मुख्य थ्रेड और वेब वर्कर के बीच डिपेंडेंसी शेयर की हैं. रोलअप टूल, शेयर की गई इन डिपेंडेंसी को अलग-अलग ग्रुप में रख सकता है. इस डेटा को सिर्फ़ एक बार लोड करना पड़ता है. webpack जैसे दूसरे बंडलर, शेयर की गई डिपेंडेंसी का डुप्लीकेट बनाते हैं. इससे डबल-लोडिंग होती है.
Google Play Books के साथ काम करने वाले फ़ीचर फ़ोन
KaiOS फ़ोन जैसे स्मार्ट फ़ीचर फ़ोन, तेज़ी से लोकप्रिय हो रहे हैं. ये सीमित संसाधन वाले डिवाइस होते हैं, लेकिन जब भी हम इन फ़ोन पर भी वेब कर्मियों का इस्तेमाल करने के हमारे तरीके को बेहतर ढंग से तैयार करने की सुविधा देते हैं. फ़ीचर फ़ोन में अलग-अलग इनपुट इंटरफ़ेस (डी-पैड और नंबर बटन, टचस्क्रीन नहीं) होते हैं. इसलिए, हमने बटन पर आधारित इंटरफ़ेस भी लागू किया है.
आगे क्या करना है
Google I/O 2019 के लिए, इस गेम को तैयार करने में हमें काफ़ी समय लग रहा था. इसलिए, हम आराम करने के लिए कुछ समय निकालेंगे. हम जल्द ही गेम से जुड़ी इन चीज़ों के बारे में ज़्यादा जानकारी वाले दस्तावेज़ तैयार करना चाहते हैं.
तब तक, देखें कि इस प्रोजेक्ट पर I/O में मैरिको ने क्या बात की.
proxx के GitHub रेपो पर जाकर, कोड को ब्राउज़ किया जा सकता है.
धन्यवाद! सूरमा, जेक, मारीको