Um jogo de proximidade inspirado no campo minado.
A equipe que criou o squoosh.app está de volta. Desta vez, criamos um jogo baseado na Web chamado PROXX (proxx.app). O PROXX é um jogo de proximidade inspirado no lendário jogo Campo minado. O jogo está no espaço, e seu trabalho é descobrir onde estão os buracos negros. Ele funciona em todos os tipos de dispositivos, de computadores a celulares simples. Os usuários podem jogar usando mouse, teclado ou botão direcional, mesmo com um leitor de tela.
Nossa linha de base
Antes de criar este jogo, definimos as metas e os orçamentos a seguir para o aplicativo:
- Mesma experiência principal: todos os dispositivos precisam funcionar da mesma maneira.
- Acessíveis: mouse, teclado, toque, botão direcional e leitores de tela
- Desempenho:
- Menos de 25 KB de payload inicial
- Menos de 5 segundos de TTI (tempo para interação) em 3G lento
- Animação consistente de 60 fps
Web workers
O jogo consiste em quatro entidades principais: a lógica principal do jogo, o serviço de interface, o serviço de estado e os gráficos de animação. Como sabíamos desde o início que precisaríamos executar gráficos muito animados na linha de execução principal, movemos a lógica do jogo e o serviço de estado para um worker da Web a fim de manter a linha de execução principal o mais livre possível.
Pré-renderização do tempo de build
Nossa IU é criada com o Preact (link em inglês), porque ele nos permite atingir nosso objetivo agressivo de um payload inicial com menos de 25 KB. Para oferecer uma boa experiência de carregamento inicial, decidimos pré-renderizar nossa primeira visualização. Nós pré-renderizamos no tempo de criação usando o Puppeteer para acessar a página superior e permitiremos que a ação preencha o DOM. O DOM resultante é serializado em HTML e salvo como index.html.
Tela para animação, DOM (invisível) para acessibilidade
Processamos os gráficos do jogo em uma tela usando o WebGL. Uma tela é responsável pela animação em segundo plano e outra uma tela para a grade do jogo na parte de cima. Também temos uma tabela HTML com botões por motivos de acessibilidade, que fica sobre as duas telas, mas é invisível (opacidade: 0). Embora o que você veja seja uma renderização de tela do estado do jogo, o jogador está interagindo com a tabela DOM invisível, permitindo anexar listeners de eventos e confiar no gerenciamento de foco do navegador.
Ao manter o elemento DOM na tela, podemos usar os recursos de acessibilidade integrados dos navegadores. Por exemplo, ao definir role="grid" na nossa tabela
de jogos, os leitores de tela podem anunciar a linha e a coluna da célula em foco
sem que isso seja necessário.
Rollup para agrupamento e divisão de código
O tamanho total do app é de 100 KB comprimido com gzip. Dessas, 20 KB é para o payload inicial (index.html). Usamos o Rollup.js para esse projeto. Compartilhamos dependências entre a linha de execução principal e o Web worker, e o Rollup pode colocar essas dependências compartilhadas em um bloco separado que só precisa ser carregado uma vez. Outros bundlers, como o webpack, duplicam as dependências compartilhadas, o que resulta em carregamento duplo.
Compatibilidade com telefones básicos
Recursos inteligentes, como os KaiOS, estão ganhando popularidade rapidamente. Esses dispositivos têm recursos muito limitados, mas nossa abordagem de usar web workers sempre que possível nos permitiu tornar a experiência altamente responsiva nesses smartphones também. Como os feature phone têm uma interface de entrada diferente (teclas direcional e numéricas, sem tela touchscreen), também implementamos uma interface baseada em teclas.
A seguir
Tivemos um grande tempo, mas ocupado criando este jogo a tempo do Google I/O 2019, então tiraremos um tempo merecido para descansar, mas planejamos voltar com uma documentação mais detalhada sobre cada uma dessas áreas do jogo.
Até lá, confira a palestra que Mariko deu na I/O sobre este projeto.
Procure o código no repositório proxx do GitHub (link em inglês).
Saúde! Surma, Jake e Mariko