معرفی PROXX

بازی نزدیکی، الهام گرفته از مین روب.

Mariko Kosaka

تیمی که squoosh.app را برای شما آورده است بازگشته است! این بار، ما یک بازی مبتنی بر وب به نام PROXX ( proxx.app ) ساختیم. PROXX یک بازی نزدیکی است که از بازی افسانه ای Minesweeper الهام گرفته شده است. بازی در این فضا قرار دارد و وظیفه شما این است که بفهمید سیاهچاله ها کجا هستند. بر روی انواع دستگاه ها کار می کند - از دسکتاپ گرفته تا تلفن های همراه. کاربران می توانند با استفاده از ماوس، کیبورد، d-pad حتی با صفحه خوان این بازی را انجام دهند.

PROXX در یک تلفن ویژه.

خط پایه ما

قبل از ساخت این بازی، اهداف و بودجه های زیر را برای اپلیکیشن تعیین می کنیم:

• تجربه اصلی یکسان : همه دستگاه ها باید یکسان عمل کنند
• قابل دسترسی : ماوس، صفحه کلید، لمسی، d-pad، صفحه خوان
• مجری :
  • کمتر از 25 کیلوبایت بار اولیه
  • کمتر از 5 ثانیه TTI ( زمان برای تعامل ) در 3G کند
  • انیمیشن ثابت 60 فریم در ثانیه

PROXX در یک پیکسل بوک.

کارگران وب

بازی از 4 موجودیت اصلی تشکیل شده است، منطق اصلی بازی، سرویس UI، ​​سرویس دولتی و گرافیک انیمیشن. از آنجایی که از همان ابتدا می‌دانستیم که باید گرافیک‌های متحرک بسیار زیادی را روی رشته اصلی اجرا کنیم، منطق بازی و سرویس حالت را به یک وب‌کارگر منتقل کردیم تا تا آنجا که ممکن است موضوع اصلی آزاد بماند.

ساخت زمان پیش رندر

رابط کاربری ما با Preact ساخته شده است، زیرا به ما امکان می دهد برای بار اولیه کمتر از 25 کیلوبایت به هدف تهاجمی خود ضربه بزنیم. برای ارائه یک تجربه بارگذاری اولیه خوب، تصمیم گرفتیم نمای اول خود را از قبل رندر کنیم. ما در زمان ساخت با استفاده از Puppeteer از قبل اجرا می کنیم تا به صفحه بالا دسترسی داشته باشیم و اجازه دهیم preact DOM را پر کند. سپس DOM به‌دست‌آمده به HTML سریال می‌شود و به‌عنوان index.html ذخیره می‌شود

بوم برای انیمیشن، (نامرئی) DOM برای دسترسی

ما گرافیک بازی را در بوم با استفاده از WebGL رندر می کنیم. یک بوم برای انیمیشن پس زمینه و یک بوم دیگر برای شبکه بازی در بالای صفحه است. ما همچنین یک جدول HTML با دکمه‌هایی به دلایل دسترسی داریم که در بالای هر دوی این بوم‌ها قرار دارد، اما نامرئی می‌شود (تاری: 0). حتی اگر آنچه می‌بینید رندر بوم حالت بازی است، بازیکن در حال تعامل با جدول نامرئی DOM است و به ما این امکان را می‌دهد که شنوندگان رویداد را ضمیمه کنیم و به مدیریت تمرکز مرورگر تکیه کنیم.

با نگه داشتن عنصر DOM در بوم، می‌توانیم از ویژگی‌های دسترسی داخلی مرورگرها استفاده کنیم. به عنوان مثال: با تنظیم role="grid" در جدول بازی ما، صفحه خوان ها می توانند ردیف و ستون سلول متمرکز را بدون نیاز به اجرای آن اعلام کنند.

جمع‌آوری برای بسته‌بندی و تقسیم کد

حجم کل برنامه ما به 100 کیلوبایت gzip می رسد. از این مقدار، 20 کیلوبایت برای بار اولیه (index.html) است. ما برای این پروژه از Rollup.js استفاده می کنیم. ما وابستگی‌هایی را بین رشته اصلی و وب‌کارگر خود به اشتراک گذاشته‌ایم، و Rollup می‌تواند این وابستگی‌های مشترک را در یک تکه جداگانه قرار دهد که فقط یک بار باید بارگذاری شود. سایر بسته‌ها مانند وب‌پک وابستگی‌های مشترک را کپی می‌کنند که منجر به بارگذاری مضاعف می‌شود.

پشتیبانی از تلفن های همراه

تلفن های هوشمند مانند تلفن های KaiOS به سرعت در حال افزایش محبوبیت هستند. این‌ها دستگاه‌هایی با محدودیت منابع هستند، اما رویکرد ما در استفاده از وب‌کارگرها در هر زمان که بتوانیم به ما این امکان را می‌دهد که تجربه را در این تلفن‌ها نیز بسیار پاسخگو کنیم. از آنجایی که تلفن‌های ویژگی دارای رابط ورودی متفاوتی هستند (د-پد و کلیدهای عددی، بدون صفحه لمسی)، ما رابط مبتنی بر کلید را نیز اجرا کردیم.

PROXX در یک تلفن ویژگی.

بعدش چی

ما زمان بسیار خوبی اما پرمشغله ای برای ساخت این بازی برای Google I/O 2019 داشتیم، بنابراین استراحت شایسته ای را برای استراحت خواهیم داشت، اما قصد داریم با مستندات عمیق تر در مورد هر یک از این قسمت های بازی بازگردیم. .

تا آن زمان، لطفاً سخنرانی ماریکو در I/O در مورد این پروژه را بررسی کنید.

می توانید کد را در مخزن github proxx مرور کنید.

به سلامتی! سورما، جیک، ماریکو