নৈকট্যের একটি খেলা, মাইনসুইপার দ্বারা অনুপ্রাণিত।
যে দলটি আপনাকে squoosh.app নিয়ে এসেছে তা ফিরে এসেছে! এইবার, আমরা PROXX ( proxx.app ) নামে একটি ওয়েব-ভিত্তিক গেম তৈরি করেছি। PROXX কিংবদন্তি গেম মাইনসুইপার দ্বারা অনুপ্রাণিত একটি প্রক্সিমিটি গেম। গেমটি মহাকাশে অবস্থিত এবং আপনার কাজ হল ব্ল্যাক হোল কোথায় তা খুঁজে বের করা। এটি ডেস্কটপ থেকে ফিচার ফোন পর্যন্ত সব ধরনের ডিভাইসে কাজ করে। ব্যবহারকারীরা মাউস, কীবোর্ড, ডি-প্যাড এমনকি স্ক্রিন রিডার দিয়েও গেমটি খেলতে পারবেন।
আমাদের বেসলাইন
এই গেমটি তৈরি করার আগে, আমরা অ্যাপ্লিকেশনটির জন্য নিম্নলিখিত লক্ষ্য এবং বাজেট সেট করি:
- একই মূল অভিজ্ঞতা : সমস্ত ডিভাইস একই ভাবে কাজ করতে হবে
- অ্যাক্সেসযোগ্য : মাউস, কীবোর্ড, টাচ, ডি-প্যাড, স্ক্রিন রিডার
- পারফরম্যান্স :
- প্রাথমিক পেলোডের 25kb-এর কম
- ধীর 3G-তে 5 সেকেন্ডেরও কম TTI ( ইন্টারেক্টিভ করার সময় )
- সামঞ্জস্যপূর্ণ 60fps অ্যানিমেশন
ওয়েব কর্মী
গেমটিতে 4টি প্রধান সত্তা, মূল গেম লজিক, UI পরিষেবা, রাষ্ট্রীয় পরিষেবা এবং অ্যানিমেশন গ্রাফিক্স রয়েছে৷ যেহেতু আমরা গেট-গো থেকে জানতাম যে আমাদের প্রধান থ্রেডে ভারী অ্যানিমেটেড গ্রাফিক্স চালাতে হবে, তাই মূল থ্রেডটিকে যতটা সম্ভব বিনামূল্যে রাখার জন্য আমরা গেম লজিক এবং স্টেট সার্ভিসকে একজন ওয়েব ওয়ার্কারের কাছে সরিয়ে নিয়েছি।
বিল্ড টাইম প্রি-রেন্ডার
আমাদের UI Preact দিয়ে তৈরি করা হয়েছে, কারণ এটি 25kb-এর কম প্রারম্ভিক পেলোডের জন্য আমাদের আক্রমণাত্মক লক্ষ্যে আঘাত করতে দেয়। একটি ভাল প্রাথমিক লোডিং অভিজ্ঞতা দেওয়ার জন্য, আমরা আমাদের 1ম ভিউ প্রি-রেন্ডার করার সিদ্ধান্ত নিয়েছি। আমরা বিল্ড টাইমে প্রি-রেন্ডার করি Puppeteer ব্যবহার করে উপরের পৃষ্ঠাটি অ্যাক্সেস করতে এবং DOM-কে প্রিঅ্যাক্ট করতে দিন। ফলস্বরূপ DOM তারপর HTML-এ সিরিয়ালাইজ করা হয় এবং index.html হিসাবে সংরক্ষণ করা হয়
অ্যানিমেশনের জন্য ক্যানভাস, অ্যাক্সেসযোগ্যতার জন্য (অদৃশ্য) DOM
আমরা WebGL ব্যবহার করে একটি ক্যানভাসে গেমের গ্রাফিক্স রেন্ডার করি। একটি ক্যানভাস ব্যাকগ্রাউন্ড অ্যানিমেশনের জন্য দায়ী এবং উপরে গেম গ্রিডের জন্য আরেকটি ক্যানভাস। আমাদের কাছে অ্যাক্সেসযোগ্যতার কারণে বোতাম সহ একটি এইচটিএমএল টেবিল রয়েছে, যা এই উভয় ক্যানভাসের উপরে রয়েছে, তবে এটি অদৃশ্য (অস্বচ্ছতা: 0)। যদিও আপনি যা দেখছেন তা গেম স্টেটের ক্যানভাস রেন্ডারিং, প্লেয়ারটি অদৃশ্য DOM টেবিলের সাথে ইন্টারঅ্যাক্ট করছে, আমাদের ইভেন্ট শ্রোতাদের সংযুক্ত করার এবং ব্রাউজারের ফোকাস পরিচালনার উপর নির্ভর করার ক্ষমতা দেয়।
ক্যানভাসে DOM উপাদান রেখে, আমরা ব্রাউজারগুলির অন্তর্নির্মিত অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলিতে ট্যাপ করতে সক্ষম হই। উদাহরণ স্বরূপ: আমাদের গেম টেবিলে role="grid" সেট করে, স্ক্রীন রিডাররা আমাদের তা বাস্তবায়ন না করেই ফোকাস করা ঘরের সারি এবং কলাম ঘোষণা করতে পারে।
বান্ডলিং এবং কোড বিভাজনের জন্য রোলআপ
অ্যাপের জন্য আমাদের মোট সাইজ 100KB জিজিপ করা হয়েছে। এর মধ্যে, 20KB প্রাথমিক পেলোডের জন্য (index.html)। আমরা এই প্রকল্পের জন্য Rollup.js ব্যবহার করি। আমরা প্রধান থ্রেড এবং আমাদের ওয়েব কর্মীর মধ্যে নির্ভরতা ভাগ করে নিয়েছি, এবং রোলআপ এই ভাগ করা নির্ভরতাগুলিকে একটি পৃথক অংশে রাখতে পারে যা শুধুমাত্র একবার লোড করা প্রয়োজন। অন্যান্য বান্ডলার যেমন ওয়েবপ্যাক শেয়ার করা নির্ভরতাকে নকল করে যার ফলে ডাবল-লোড হয়।
সাপোর্টিং ফিচার ফোন
স্মার্ট ফিচার ফোন যেমন KaiOS ফোন দ্রুত জনপ্রিয়তা পাচ্ছে। এগুলি খুব রিসোর্স সীমাবদ্ধ ডিভাইস, তবে ওয়েব কর্মীদের ব্যবহার করার আমাদের পদ্ধতি যখনই আমরা এই ফোনগুলিতেও অভিজ্ঞতাটিকে অত্যন্ত প্রতিক্রিয়াশীল করার অনুমতি দিতে পারি। যেহেতু ফিচার ফোনগুলি বিভিন্ন ইনপুট ইন্টারফেসের সাথে আসে (ডি-প্যাড এবং নম্বর কী, টাচস্ক্রিন নেই), তাই আমরা কী-ভিত্তিক ইন্টারফেসও প্রয়োগ করেছি।
এরপর কি
Google I/O 2019-এর জন্য সময়মতো এই গেমটি তৈরি করতে আমাদের দুর্দান্ত কিন্তু ব্যস্ত সময় ছিল, তাই আমরা বিশ্রামের জন্য কিছু উপযুক্ত সময় নেব, তবে গেমের এই প্রতিটি ক্ষেত্রে আরও গভীরভাবে ডকুমেন্টেশন নিয়ে ফিরে আসার পরিকল্পনা করছি .
ততক্ষণ পর্যন্ত, অনুগ্রহ করে এই প্রকল্পে I/O-তে Mariko যে আলোচনা দিয়েছেন তা দেখুন।
আপনি proxx github রেপোতে কোডটি ব্রাউজ করতে পারেন।
চিয়ার্স! সুরমা, জেক, মারিকো