Un juego de proximidad inspirado en el Buscaminas.
¡Volvió el equipo que creó squoosh.app! Esta vez, creamos un juego basado en la Web llamado PROXX (proxx.app). PROXX es un juego de proximidad inspirado en el legendario juego Buscaminas. El juego se desarrolla en el espacio y tu tarea es descubrir dónde están los agujeros negros. Funciona en todo tipo de dispositivos, desde computadoras de escritorio hasta teléfonos con funciones básicas. Los usuarios pueden jugar con un mouse, un teclado, un pad direccional o incluso con un lector de pantalla.
Nuestro modelo de referencia
Antes de compilar este juego, establecimos los siguientes objetivos y presupuestos para la aplicación:
- La misma experiencia principal: Todos los dispositivos deben funcionar de la misma manera.
- Accesible: mouse, teclado, panel táctil, mando de control, lectores de pantalla
- Rendimiento:
- Menos de 25 KB de carga útil inicial
- Menos de 5 segundos de TTI (tiempo de interacción) en 3G lenta
- Animación coherente a 60 fps
Web Workers
El juego consta de 4 entidades principales, la lógica principal del juego, el servicio de IU, el servicio de estado y los gráficos de animación. Como sabíamos desde el principio que teníamos que ejecutar gráficos muy animados en el subproceso principal, trasladamos la lógica del juego y el servicio de estado a un trabajador web para mantener el subproceso principal lo más libre posible.
Renderización previa al tiempo de compilación
Nuestra IU se compiló con Preact, ya que nos permite alcanzar nuestro objetivo agresivo de una carga útil inicial de menos de 25 KB. Para brindar una buena experiencia de carga inicial, decidimos renderizar previamente nuestra primera vista. Realizamos la renderización previa en el tiempo de compilación con Puppeteer para acceder a la página superior y permitir que preact propague el DOM. Luego, el DOM resultante se serializa en HTML y se guarda como index.html.
Lienzo para animación, DOM (invisible) para accesibilidad
Renderizamos los gráficos del juego en un lienzo con WebGL. Un lienzo es responsable de la animación de fondo y otro de la cuadrícula del juego en la parte superior. También tenemos una tabla HTML con botones por motivos de accesibilidad, que se encuentra sobre ambos lienzos, pero que se vuelve invisible (opacidad: 0). Aunque lo que ves es una renderización de lienzo del estado del juego, el jugador interactúa con la tabla invisible del DOM, lo que nos permite adjuntar objetos de escucha de eventos y depender de la administración de enfoque del navegador.
Si mantenemos el elemento del DOM en el lienzo, podemos aprovechar las funciones de accesibilidad integradas de los navegadores. Por ejemplo, si configuramos role="grid" en nuestra tabla de juegos, los lectores de pantalla pueden anunciar la fila y la columna de la celda enfocada sin que tengamos que implementarlo.
Combinación para el empaquetado y la división de código
El tamaño total de la app se reduce a 100 KB comprimidos. De eso, 20 KB son para la carga útil inicial (index.html). En este proyecto, usamos Rollup.js. Compartimos dependencias entre el subproceso principal y nuestro trabajador web, y Rollup puede colocar estas dependencias compartidas en un fragmento independiente que solo se debe cargar una vez. Otros empaquetadores, como webpack, duplican las dependencias compartidas, lo que genera una carga doble.
Compatibilidad con teléfonos de gama media
Los teléfonos inteligentes de gama media, como los KaiOS, están ganando popularidad rápidamente. Estos son dispositivos con recursos muy limitados, pero nuestro enfoque de usar trabajadores web siempre que podemos nos permitió hacer que la experiencia también fuera muy responsiva en estos teléfonos. Como los teléfonos de gama media vienen con una interfaz de entrada diferente (pad direccional y teclas numéricas, sin pantalla táctil), también implementamos una interfaz basada en teclas.
¿Qué sigue?
Fue una experiencia increíble, pero muy ocupada, crear este juego a tiempo para Google I/O 2019, por lo que nos tomaremos un tiempo para descansar, pero planeamos volver con documentación más detallada sobre cada una de estas áreas del juego.
Mientras tanto, mira la charla que Mariko dio en I/O sobre este proyecto.
Puedes explorar el código en el repositorio proxx de GitHub.
¡Salud! Surma, Jake y Mariko