Un gioco di prossimità, ispirato al campo minato.
Il team che ti 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 Campo minato. Il gioco si trova nello spazio e il tuo compito è scoprire dove sono i buchi neri. Funziona su tutti i tipi di dispositivi, dai computer ai feature phone. Gli utenti possono giocare utilizzando mouse, tastiera, D-pad anche con uno screen reader.
Il nostro valore basale
Prima di creare il gioco, abbiamo impostato i seguenti obiettivi e budget per l'applicazione:
- Stessa esperienza di base: tutti i dispositivi devono funzionare allo stesso modo
- Accessibili: mouse, tastiera, tocco, D-pad, screen reader
- Artista:
- Payload iniziale di meno di 25 kB
- TTI (tempo all'interattività) inferiore a 5 secondi su 3G lento
- Animazione coerente a 60 f/s
Web worker
Il gioco è composto da quattro entità principali: la logica di base, il servizio UI, il servizio di stato e la grafica dell'animazione. Poiché sapevamo fin dall'inizio che avremmo dovuto eseguire grafiche molto animate sul thread principale, abbiamo trasferito la logica di gioco e il servizio dello stato a un web worker per mantenere il thread principale il più libero possibile.
Pre-rendering del tempo di build
La nostra UI è basata su Preact, in quanto ci consente di raggiungere il nostro target aggressivo per un payload iniziale inferiore a 25 kB. Per offrire una buona esperienza di caricamento iniziale, abbiamo deciso di eseguire il pre-rendering della nostra prima visualizzazione. Eseguiamo il prerendering in fase di build utilizzando Puppeteer per accedere alla pagina superiore e consentire il completamento del DOM in modalità pre-azione. 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 una tela utilizzando WebGL. Una tela è responsabile dell'animazione di sfondo e un'altra tela per la griglia del gioco. Abbiamo anche una tabella HTML con pulsanti per motivi di accessibilità, che si trova sopra a entrambi i canvas, ma è resa invisibile (opacità: 0). Anche se vedi un rendering canvas dello stato del gioco, il player interagisce con la tabella DOM invisibile, dandoci la possibilità di collegare gli ascoltatori di eventi e fare affidamento sulla gestione dello stato attivo del browser.
Mantenendo l'elemento DOM nel canvas, siamo in grado di attingere alle funzioni di accessibilità integrate nei browser. Ad esempio, impostando role="grid" sulla nostra tabella di gioco, gli screen reader possono annunciare la riga e la colonna della cella attiva senza che Google debba implementare questa funzionalità.
Riepilogo per raggruppamento e suddivisione del codice
Le nostre dimensioni totali per l'app si riducono a 100 kB per il formato gzip. Di questi, 20 kB sono per il payload iniziale (index.html). Per questo progetto utilizziamo Rollup.js. Abbiamo dipendenze condivise tra il thread principale e il nostro web worker e Rollup può inserirle in un blocco separato che deve essere caricato una sola volta. Altri bundler come webpack duplicano le dipendenze condivise, generando un doppio caricamento.
Supporto di feature phone
Gli smart phone, come i telefoni KaiOS, stanno guadagnando rapidamente popolarità. Si tratta di dispositivi con risorse limitate, ma il nostro approccio di utilizzare web worker ogni volta che possiamo consentirci di rendere l'esperienza altamente reattiva anche su questi telefoni. Poiché i feature phone hanno un'interfaccia di input diversa (tasti D e numerici, nessun touchscreen), abbiamo anche implementato un'interfaccia basata su tasti.
Passaggi successivi
Ci è stato molto tempo per creare questo gioco in tempo per il Google I/O 2019, quindi ci prenderemo un po' di tempo libero per riposarci, ma abbiamo intenzione di tornare con una documentazione più approfondita su ciascuna di queste aree del gioco.
Fino ad allora, guarda il discorso tenuto da Mariko all'I/O su questo progetto.
Puoi sfogliare il codice nel repository GitHub di proxx.
Un saluto! Sara, Gianni, Mariko