נעים להכיר: PROXX

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

Mariko Kosaka

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

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

הבסיס שלנו

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

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

PROXX ב-pixelbook.

עובדי אינטרנט

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

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

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

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

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

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

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

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

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

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

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

מה עושים אחר כך

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

עד אז, אתם מוזמנים לצפות בהרצאה ומריקו נתנה בכנס I/O על הפרויקט הזה.

תוכלו לעיין בקוד במאגר Proxx של GitHub.

תודה, סורמה, ג'ייק, מריקו