נעים להכיר: PROXX

משחק של קרבה, בהשראת שולה המוקשים.

Mariko Kosaka

הצוות שהביא לכם את squoosh.app חוזר! הפעם, פיתחנו משחק מבוסס-אינטרנט שנקרא PROXX‏ (proxx.app). PROXX הוא משחק של קרבה בהשראת המשחק האגדי שולה המוקשים. המשחק מתרחש בחלל, והמטרה שלכם היא למצוא את החורים השחורים. הוא פועל בכל סוגי המכשירים, ממחשבים ועד טלפונים ניידים פשוטים. המשתמשים יכולים לשחק במשחק באמצעות עכבר, מקלדת, D-pad ואפילו עם קורא מסך.

PROXX בטלפון נייד פשוט.

הבסיס שלנו

לפני שפיתחנו את המשחק הזה, הגדרנו לאפליקציה את היעדים והתקציב הבאים:

• אותה חוויית ליבה: כל המכשירים צריכים לתפקד באותה צורה.
• נגיש: עכבר, מקלדת, מגע, D-pad, קוראי מסך
• ביצועים:
  • פחות מ-25KB של עומס נתונים ראשוני
  • זמן TTI (זמן לאפשרות אינטראקטיבית) של פחות מ-5 שניות ברשת 3G איטית
  • אנימציה עקבית של 60 פריימים לשנייה

PROXX ב-Pixelbook.

Web Workers

המשחק מורכב מ-4 ישויות עיקריות: הלוגיקה של הליבה של המשחק, שירות ממשק המשתמש, שירות המצב וגרפיקה של האנימציה. תמיד ידענו שנצטרך להפעיל גרפיקה עם אנימציה גדולה בשרשור הראשי, ולכן העברנו את לוגיקת המשחק ושירות המצב לעובדי אינטרנט כדי לשמור על ה-thread הראשי חופשי ככל האפשר.

רינדור מראש בזמן ה-build

ממשק המשתמש שלנו נבנה באמצעות Preact, כי הוא מאפשר לנו לעמוד ביעד האגרסיבי שלנו של עומס נתונים ראשוני של פחות מ-25KB. כדי לספק חוויית טעינה ראשונית טובה, החלטנו לעבד מראש את התצוגה הראשונה. אנחנו מבצעים עיבוד מראש בזמן ה-build באמצעות Puppeteer כדי לגשת לדף העליון ולאפשר ל-preact לאכלס את ה-DOM. לאחר מכן, ה-DOM שנוצר עובר סריאליזציה ל-HTML ונשמר בתור index.html.

בד ציור לצורך אנימציה, DOM (לא נראה) לצורך נגישות

אנחנו מעבדים את הגרפיקה של המשחק ב-Canvas באמצעות WebGL. לוח אחד אחראי לאנימציה של הרקע ולוח אחר אחראי לרשת המשחק שמופיעה מעל. יש לנו גם טבלת HTML עם לחצנים, שנמצאת מעל שני המשטחים האלה מסיבות נגישות, אבל היא בלתי נראית (אופקטיביות: 0). למרות שמה אתם רואים הוא רינדור הקנבס של מצב המשחק, השחקן יוצר אינטראקציה עם טבלת ה-DOM הבלתי נראית, מה שמאפשר לנו לצרף מאזינים לאירועים ולהסתמך על ניהול המיקודים של הדפדפן.

כששומרים את רכיב ה-DOM ב-Canvas, אפשר להשתמש בתכונות הנגישות המובנות בדפדפנים. לדוגמה: כשמגדירים את הערך role="grid" בטבלת המשחקים, קוראי המסך יכולים להכריז על השורה והעמודה של התא שבו מופיע המיקוד, בלי שנצטרך להטמיע את זה.

אוסף ערוצים לקיבוץ ופיצול קוד

הגודל הכולל של האפליקציה הוא 100KB בפורמט GZIP. מתוך הסכום הזה, 20KB מוקצבים למטען הייעודי הראשוני (index.html). אנחנו משתמשים ב-Rollup.js בפרויקט הזה. יש לנו יחסי תלות משותפים בין הליבה לבין ה-web worker שלנו, ו-Rollup יכול להעביר את יחסי התלות המשותפים האלה לקטע נפרד שצריך לטעון רק פעם אחת. חבילות אחרות, כמו webpack, מכפילות את יחסי התלות המשותפים, וכתוצאה מכך מתרחש טעינה כפולה.

תמיכה בטלפונים ניידים פשוטים

פופולריות הטלפונים החכמים עם תכונות בסיסיות, כמו טלפונים עם מערכת ההפעלה KaiOS, עולה במהירות. אלה מכשירים עם מגבלה משמעותית על המשאבים, אבל הגישה שלנו של שימוש ב-Web Workers בכל הזדמנות אפשרית אפשרה לנו לשפר את הרספונסיביות של החוויה גם בטלפונים האלה. מכיוון שטלפונים רגילים מגיעים עם ממשק קלט שונה (לוח מקשים וספרות, ללא מסך מגע), הטמענו גם ממשק מבוסס-מקש.

PROXX בטלפון נייד.

המאמרים הבאים

היה לנו זמן מעולה אבל עמוס לבנות את המשחק הזה בזמן ל-Google I/O 2019, אז הגיע הזמן להקדיש פסק זמן מתאים למנוחה, אבל אנחנו מתכננים לחזור עם תיעוד מעמיק יותר לגבי כל אחד מהתחומים האלה במשחק.

בינתיים, מומלץ לצפות בהרצאה של Mariko בנושא הפרויקט הזה ב-I/O.

אפשר לעיין בקוד במאגר GitHub של proxx.

לחיים! סורמה, ג'ייק, מריקו