Un gioco di prossimità, ispirato al campo minato.
Il team che ha creato squoosh.app è tornato! Questa volta abbiamo creato un gioco basato sul web chiamato PROXX (proxx.app). PROXX è un gioco di prossimità ispirato al leggendario gioco di Campo minato. Il gioco si svolge nello spazio e il tuo compito è scoprire dove si trovano i buchi neri. Funziona su tutti i tipi di dispositivi, dai computer ai cellulari. Gli utenti possono giocare utilizzando un mouse, una tastiera, un d-pad o anche uno screen reader.
Il nostro valore basale
Prima di creare questo gioco, abbiamo impostato i seguenti scopi e budget per l'applicazione:
- Stessa esperienza di base: tutti i dispositivi devono funzionare allo stesso modo
- Accessibile: mouse, tastiera, tocco, pad direzionale, screen reader
- Efficace:
- Meno di 25 kB di payload iniziale
- TTI (tempo all'interattività) inferiore a 5 secondi su rete 3G lenta
- Animazione costante a 60 f/s
Web worker
Il gioco è costituito da quattro entità principali: la logica di gioco di base, il servizio UI, il servizio di stato e le animazioni grafiche. Dato che sapevamo fin dall'inizio che avremmo dovuto eseguire grafica fortemente animata sul thread principale, abbiamo spostato la logica di gioco e il servizio di stato in un web worker per mantenere il thread principale il più possibile libero.
Pre-rendering in fase di compilazione
La nostra UI è realizzata con Preact, in quanto ci consente di raggiungere il nostro obiettivo aggressivo per un payload iniziale inferiore a 25 KB. Per offrire un'esperienza di caricamento iniziale positiva, abbiamo deciso di eseguire il pre-rendering della prima visualizzazione. Eseguiamo il prerendering in fase di creazione utilizzando Puppeteer per accedere alla pagina superiore e lasciamo che il prerendering completi il DOM. Il DOM risultante viene poi serializzato in HTML e salvato come index.html
Canvas per l'animazione, DOM (invisibile) per l'accessibilità
Eseguiamo il rendering della grafica del gioco in un canvas utilizzando WebGL. Un canvas è responsabile dell'animazione di sfondo e un altro della griglia del gioco in alto. Per motivi di accessibilità, abbiamo anche una tabella HTML con pulsanti che si trova sopra entrambi i canvas, ma è resa invisibile (opacità: 0). Anche se quello che vedi è un rendering in canvas dello stato del gioco, il giocatore interagisce con la tabella DOM invisibile, il che ci consente di associare ascoltatori di eventi e fare affidamento sulla gestione dell'attenzione del browser.
Mantenendo l'elemento DOM in Canvas, possiamo sfruttare le funzionalità di accessibilità integrate dei browser. Ad esempio, impostando role="grid" nella nostra tabella di gioco, gli screen reader possono annunciare la riga e la colonna della cella attiva senza che sia necessario implementare questa funzionalità.
Rollup per il bundling e la suddivisione del codice
Le dimensioni totali dell'app si riducono a 100 KB compressi. Di questi, 20 KB sono per il payload iniziale (index.html). Utilizziamo Rollup.js per questo progetto. Abbiamo dipendenze condivise tra il thread principale e il nostro worker web e Rollup può inserire queste dipendenze condivise in un chunk separato che deve essere caricato solo una volta. Altri bundler come webpack duplicano le dipendenze condivise, il che comporta un doppio caricamento.
Supporto per feature phone
Gli smartphone con funzionalità avanzate, come i telefoni KaiOS, stanno guadagnando rapidamente popolarità. Si tratta di dispositivi con risorse molto limitate, ma il nostro approccio di utilizzo di web worker, quando possibile, ci ha permesso di rendere l'esperienza molto reattiva anche su questi telefoni. Poiché i feature phone sono dotati di un'interfaccia di input diversa (pad direzionale e tasti numerici, senza touchscreen), abbiamo anche implementato un'interfaccia basata su tasti.
Passaggi successivi
Abbiamo trascorso un periodo impegnativo, ma fantastico, a creare questo gioco in tempo per Google I/O 2019, quindi ci prenderemo un po' di meritato riposo, ma torneremo con una documentazione più approfondita su ciascuna di queste aree del gioco.
Nel frattempo, dai un'occhiata al talk di Mariko su questo progetto tenuto alla conferenza I/O.
Puoi sfogliare il codice nel repository GitHub di proxx.
Un saluto! Surma, Jake, Mariko