Jeu de proximité inspiré du jeu de démineur.
L'équipe qui vous a apporté 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 jeu Démineur. Le jeu se déroule dans l'espace, et votre tâche consiste à trouver où se trouvent les trous noirs. Il fonctionne sur tous les types d'appareils, des ordinateurs de bureau aux téléphones basiques. Les utilisateurs peuvent jouer au jeu à l'aide d'une souris, d'un clavier, d'un pavé directionnel, voire d'un lecteur d'écran.
Notre référence
Avant de créer ce jeu, nous avons défini 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.
- Accessible: souris, clavier, écran tactile, croix directionnelle, lecteurs d'écran
- Performant :
- Charge utile initiale inférieure à 25 ko
- TTI (délai avant interactivité) inférieur à cinq secondes sur une 3G lente
- Animation cohérente à 60 fps
Nœuds de calcul Web
Le jeu se compose de quatre entités principales : la logique de jeu principale, le service d'UI, le service d'état et les graphismes d'animation. Comme nous savions dès le départ que nous devions exécuter des graphiques fortement animés sur le thread principal, nous avons déplacé la logique de jeu et le service d'état vers un worker Web afin de laisser le thread principal aussi libre que possible.
Prérendu au moment de la compilation
Notre interface utilisateur est conçue avec Preact, car cela nous permet d'atteindre notre cible agressive pour une charge utile initiale inférieure à 25 Ko. Afin de proposer une bonne expérience de chargement initiale, nous avons décidé de pré-rendre notre première vue. Nous effectuons un prérendu au moment de la compilation à l'aide de Puppeteer pour accéder à la page de premier plan et laisser preact remplir le DOM. Le DOM résultant est ensuite sérialisé en HTML et enregistré en tant qu'index.html.
Canevas pour l'animation, DOM (invisible) pour l'accessibilité
Nous affichons les graphismes du jeu dans un canevas à l'aide de WebGL. Un canevas est responsable de l'animation en arrière-plan et un autre est chargé de la grille de jeu en haut. Nous avons également un tableau HTML avec des boutons pour des raisons d'accessibilité, au-dessus de ces deux canevas, mais qui est rendu invisible (opacité: 0). Même si ce que vous voyez est un rendu de canevas de l'état du jeu, le joueur interagit avec la table DOM invisible, ce qui nous permet d'associer des écouteurs d'événements et de nous appuyer sur la gestion du focus 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.
Regroupement pour le regroupement et le fractionnement du code
La taille totale de l'application se réduit à 100 ko compressée. Sur ce total, 20 Ko sont réservés à la charge utile initiale (index.html). Nous utilisons Rollup.js pour ce projet. Nous avons des dépendances partagées entre le thread principal et notre worker Web, et Rollup peut placer ces dépendances partagées dans un bloc distinct qui ne doit être chargé qu'une seule fois. D'autres outils de regroupement tels que webpack dupliquent les dépendances partagées, ce qui entraîne une double importation.
Prise en charge des téléphones basiques
Les téléphones multifonctions intelligents tels que les téléphones KaiOS gagnent rapidement en popularité. Il s'agit d'appareils très limités en ressources, mais notre approche consistant à utiliser des web workers chaque fois que possible nous a permis de rendre l'expérience très réactive sur ces téléphones également. Étant donné que les téléphones basiques sont livrés avec une interface de saisie différente (pavé directionnel et touches numériques, pas d'écran tactile), nous avons également implémenté une interface basée sur les touches.
Étape suivante
Nous avons passé un excellent moment à créer ce jeu à temps pour Google I/O 2019, mais nous allons prendre un peu de repos bien mérité. Nous prévoyons de revenir avec une documentation plus détaillée sur chacun de ces aspects du jeu.
En attendant, regardez la conférence que Mariko a donnée à I/O sur ce projet.
Vous pouvez parcourir le code dans le dépôt GitHub de proxx.
Santé ! Surma, Jake, Mariko