पेश है PROXX

नज़दीकियों का खेल, जो माइनस्वीपर से प्रेरित है.

Mariko Kosaka

जिस टीम ने आपको squoosh.app लाया था, वह वापस आ गई है! इस बार, हमने PROXX (proxx.app) नाम का वेब-आधारित गेम बनाया है. PROXX निकटता का एक ऐसा गेम है जो मशहूर गेम Minesweeper से प्रेरित है. गेम अंतरिक्ष में ही मौजूद है और आपका काम यह पता करना है कि ब्लैक होल कहां हैं. यह सुविधा डेस्कटॉप से लेकर फ़ीचर फ़ोन तक, हर तरह के डिवाइस पर काम करती है. उपयोगकर्ता स्क्रीन रीडर के साथ भी माउस, कीबोर्ड, डी-पैड का इस्तेमाल करके गेम खेल सकते हैं.

फ़ीचर फ़ोन पर PROXX.

हमारी बेसलाइन

यह गेम बनाने से पहले, हम ऐप्लिकेशन के लिए ये लक्ष्य और बजट तय करते हैं:

• एक जैसा मुख्य अनुभव: सभी डिवाइसों को एक ही तरह से काम करना चाहिए
• सुलभता: माउस, कीबोर्ड, टच, डी-पैड, स्क्रीन रीडर
• कलाकार:
  • शुरुआती पेलोड के 25 केबी से कम
  • धीमे 3G पर 5 सेकंड से कम टीटीआई (इंटरैक्टिव का समय)
  • लगातार 60fps (फ़्रेम प्रति सेकंड) वाला ऐनिमेशन

Pixelbook पर PROXX.

वेब वर्कर

इस गेम में चार मुख्य इकाइयां, कोर गेम लॉजिक, यूज़र इंटरफ़ेस (यूआई) सेवा, स्टेट सर्विस, और ऐनिमेशन ग्राफ़िक शामिल हैं. हमें पता था कि शुरुआत से ही हमें मुख्य थ्रेड पर बहुत ज़्यादा ऐनिमेशन वाले ग्राफ़िक चलाने होंगे. इसलिए, हमने गेम लॉजिक और राज्य सेवा को वेब वर्कर पर ले जाया गया, ताकि मुख्य थ्रेड को जितना हो सके उतना मुफ़्त रखा जा सके.

बिल्ड के लिए प्री-रेंडरिंग का समय

हमारा यूज़र इंटरफ़ेस (यूआई), Preact सुविधा के साथ बनाया गया है. इससे हम 25 केबी से कम के शुरुआती पेलोड के लिए अपने टारगेट को पूरा कर सकते हैं. पेज लोड होने का पहला अनुभव देने के लिए, हमने अपने पहले व्यू को प्री-रेंडर करने का फ़ैसला किया है. हम टॉप पेज को ऐक्सेस करने के लिए Puppeteer का इस्तेमाल करके, बिल्ड के समय प्रीरेंडरिंग करते हैं और डीओएम को प्रीैक्ट के तौर पर दिखाते हैं. इसके बाद, नतीजे वाले DOM को एचटीएमएल में सीरियलाइज़ किया जाता है. साथ ही, उसे index.html के तौर पर सेव किया जाता है.

ऐनिमेशन के लिए कैनवस, सुलभता के लिए DOM

हम WebGL का इस्तेमाल करके, गेम के ग्राफ़िक को कैनवस में रेंडर करते हैं. एक कैनवस, बैकग्राउंड ऐनिमेशन के लिए और दूसरा कैनवस ग्रिड के लिए सबसे ऊपर दिखाने के लिए ज़िम्मेदार है. हमारे पास सुलभता से जुड़ी वजहों के लिए बटन वाली एक एचटीएमएल टेबल भी है, जो इन दोनों कैनवस के ऊपर तो है, लेकिन दिखाई नहीं देती है (अपारदर्शिता: 0). आपको भले ही गेम स्थिति की कैनवस रेंडरिंग दिख रही हो, लेकिन प्लेयर नहीं दिखने वाली DOM टेबल के साथ इंटरैक्ट कर रहा है. इससे हमें इवेंट सुनने वालों को अटैच करने और ब्राउज़र के फ़ोकस मैनेजमेंट पर भरोसा करने की सुविधा मिलती है.

डीओएम एलिमेंट को कैनवस में रखने से, हम ब्राउज़र में पहले से मौजूद सुलभता सुविधाओं पर टैप कर सकते हैं. उदाहरण के लिए: हमारी गेम टेबल पर role="grid" सेट करके, स्क्रीन रीडर फ़ोकस किए गए सेल की पंक्ति और कॉलम के बारे में बता सकते हैं. इसके लिए, हमें उसे लागू करने की ज़रूरत नहीं होती.

बंडलिंग और कोड स्प्लिट करने के लिए रोलअप

ऐप्लिकेशन के लिए हमारा कुल आकार gzip किए 100KB तक. इसमें से 20 केबी, शुरुआती पेलोड (index.html) के लिए है. हम इस प्रोजेक्ट के लिए Rollup.js का इस्तेमाल करते हैं. हमने मुख्य थ्रेड और अपने वेब वर्कर के बीच डिपेंडेंसी शेयर की है. रोलअप, शेयर की गई इन डिपेंडेंसी को एक अलग हिस्से में रख सकता है, जिसे सिर्फ़ एक बार लोड करने की ज़रूरत होती है. वेबपैक जैसे दूसरे बंडलर, शेयर की गई डिपेंडेंसी को डुप्लीकेट करते हैं. इस वजह से, ये दो बार लोड हो जाते हैं.

काम करने वाले फ़ीचर फ़ोन

KaiOS जैसे स्मार्ट फ़ीचर फ़ोन तेज़ी से लोकप्रिय हो रहे हैं. ये डिवाइस बहुत सीमित संसाधनों वाले होते हैं, लेकिन जब भी संभव हो, वेब वर्कर का इस्तेमाल करने का हमारा तरीका, ताकि हम इन फ़ोन पर भी बेहतर अनुभव दे सकें. फ़ीचर फ़ोन में अलग-अलग इनपुट इंटरफ़ेस (डी-पैड और नंबर बटन, टचस्क्रीन नहीं) होता है. इसलिए, हमने कुंजी-आधारित इंटरफ़ेस भी लागू किया है.

फ़ीचर फ़ोन पर PROXX.

आगे क्या करना है

Google I/O 2019 में, इस गेम को बनाने में हमारे पास काफ़ी व्यस्त लेकिन समय था. इसलिए, हम आराम करने के लिए कुछ समय निकालेंगे. हालांकि, हम गेम के इन सभी हिस्सों के बारे में ज़्यादा गहराई से दस्तावेज़ उपलब्ध कराएंगे.

तब तक, कृपया इस प्रोजेक्ट पर I/O में मैरीको ने की गई बातचीत देखें.

कोड को proxx GitHub रेपो पर ब्राउज़ किया जा सकता है.

बधाई हो! सूरमा, जेक, मैरीको