Un jeu de proximité inspiré du démineur.
L'équipe qui vous a créé squoosh.app est de retour ! Cette fois, nous avons créé un jeu Web appelé PROXX (proxx.app). PROXX est un jeu de proximité inspiré du légendaire démineur. Le jeu se situe dans l'espace, et votre travail consiste à découvrir où se trouvent les trous noirs. Il fonctionne sur tous les types d'appareils, des ordinateurs aux téléphones multimédias. Les utilisateurs peuvent jouer à ce jeu avec une souris, un clavier ou un pavé directionnel, même avec un lecteur d'écran.
Notre référence
Avant de créer ce jeu, nous définissons les objectifs et les budgets suivants pour l'application:
- Même expérience de base: tous les appareils doivent fonctionner de la même manière.
- Accessibilité: souris, clavier, écran tactile, pavé directionnel, lecteurs d'écran
- Performante :
- Moins de 25 Ko de la charge utile initiale
- Moins de 5 secondes TTI (temps d'interaction) en 3G lente
- Animation cohérente à 60 ips
Web Workers
Le jeu se compose de quatre entités principales : la logique de base du jeu, le service d'interface utilisateur, le service d'état et les éléments graphiques de l'animation. Comme nous savions dès le départ que nous devions exécuter des graphismes fortement animés sur le thread principal, nous avons transféré la logique de jeu et le service d'état vers un nœud de calcul Web afin de garder le thread principal aussi sans frais que possible.
Prérendu au moment de la compilation
Notre interface utilisateur est conçue avec Preact, car elle nous permet d'atteindre notre objectif agressif pour une charge utile initiale inférieure à 25 Ko. Pour offrir une bonne expérience de chargement initial, nous avons décidé de précharger notre première vue. Nous prérenduisons au moment de la compilation à l'aide de Puppeteer pour accéder à la page supérieure et laissons Preact remplir le DOM. Le DOM obtenu est sérialisé en HTML et enregistré sous index.html
Canevas pour l'animation, DOM (invisible) pour l'accessibilité
Nous effectuons le rendu des éléments graphiques du jeu dans un canevas à l'aide de WebGL. Un canevas est responsable de l'animation en arrière-plan et un autre est responsable de la grille de jeu. Nous disposons également d'une table HTML avec des boutons pour des raisons d'accessibilité, qui se trouve au-dessus de ces deux canevas, mais qui est rendu invisible (opacité: 0). Même si vous voyez un rendu de l'état du jeu dans le canevas, le joueur interagit avec la table DOM invisible, ce qui nous permet d'associer des écouteurs d'événements et de s'appuyer sur la gestion du ciblage du navigateur.
En conservant l'élément DOM dans le canevas, nous pouvons exploiter les fonctionnalités d'accessibilité intégrées aux navigateurs. Par exemple, en définissant role="grid" sur notre table de jeu, les lecteurs d'écran peuvent énoncer la ligne et la colonne de la cellule sélectionnée sans que nous ayons à l'implémenter.
Vue d'ensemble pour le regroupement et le fractionnement du code
La taille totale de l'application est réduite à 100 Ko au format gzip. 20 Ko sont ensuite consacrés à la charge utile initiale (index.html). Nous utilisons Rollup.js pour ce projet. Nous avons partagé des dépendances entre le thread principal et notre nœud de calcul Web. Le Rollup peut les placer dans un fragment distinct qui n'a besoin d'être chargé qu'une seule fois. D'autres bundlers tels que webpack dupliquent les dépendances partagées, ce qui entraîne un double chargement.
Compatibilité avec les feature phones
Les téléphones multifonctions intelligents tels que les téléphones KaiOS gagnent rapidement en popularité. Bien qu'il s'agisse d'appareils dont les ressources sont limitées, notre approche consistant à utiliser des workers Web chaque fois que nous pouvons également rendre l'expérience très réactive sur ces téléphones également. Étant donné que les feature phones sont dotées d'interfaces de saisie différentes (pavé directionnel et numérique, pas d'écran tactile), nous avons également implémenté une interface basée sur des touches.
Étapes suivantes
Nous avons passé un temps considérable à créer ce jeu à temps pour Google I/O 2019. Nous allons donc prendre un repos bien mérité, mais nous prévoyons de revenir avec une documentation plus approfondie sur chacun de ces aspects du jeu.
En attendant, veuillez suivre la présentation de Mariko sur ce projet lors de la conférence I/O.
Vous pouvez parcourir le code dans le dépôt GitHub proxx.
Santé ! Surma, Jake, Mariko