Como um jogo roda no navegador, sem instalar nada

Há alguns anos, jogar no navegador quase sempre exigia instalar um plugin, aceitar atualizações e torcer para funcionar. Hoje, você abre uma página no celular ou no computador e, em poucos segundos, está jogando. O que mudou? Não foi um programa novo, e sim um conjunto de tecnologias abertas que todo navegador moderno entende. Neste artigo, explicamos cada uma delas de um jeito simples, mostramos onde elas aparecem nos jogos do Jogali e deixamos dicas práticas para quem joga.

O fim da era dos plugins

Durante muito tempo, os jogos de navegador dependiam do Adobe Flash, um plugin que rodava dentro da página. Ele permitiu uma geração inteira de joguinhos criativos, mas tinha problemas: consumia bateria, abria brechas de segurança e funcionava mal no celular. A Adobe encerrou o suporte ao Flash em 31 de dezembro de 2020 e passou a bloquear o conteúdo feito com ele em 12 de janeiro de 2021.

Quando isso aconteceu, o próprio navegador já tinha aprendido a fazer quase tudo o que o plugin fazia. O conjunto dessas novidades ficou conhecido como HTML5, nome da versão da linguagem das páginas que virou recomendação oficial do W3C, o consórcio que define os padrões da web, em outubro de 2014. Hoje, a linguagem é atualizada continuamente, mas o nome HTML5 ficou como sinônimo de "jogo que roda direto no navegador".

Canvas: a folha em branco

O elemento canvas é uma área retangular da página onde o código pode desenhar o que quiser: formas, imagens, textos, brilhos e partículas. Ele foi criado pela Apple em 2004 e depois virou padrão para todos os navegadores.

A ideia é parecida com um desenho animado feito à mão. A cada quadro, o jogo apaga a tela e desenha tudo de novo, um pouquinho diferente. Fazendo isso dezenas de vezes por segundo, o olho enxerga movimento. O Prisma desenha assim o campo, as peças, a sombra de queda e as partículas de cada linha limpa. Joias Mágicas usa canvas para as joias, os brilhos e as explosões das especiais. E o Órbita monta cenários, personagens e efeitos em 2D com o mesmo recurso.

O ritmo da animação

Para a animação ficar lisa, o jogo precisa desenhar no momento certo. O navegador oferece uma função chamada requestAnimationFrame, que funciona como um aviso: "a tela vai se atualizar, desenhe agora". Assim, o jogo acompanha a taxa de atualização do aparelho, que costuma ser de 60 quadros por segundo em muitas telas e pode ser maior em celulares e monitores mais novos.

Esse recurso tem uma vantagem escondida: quando você troca de aba, o navegador para de pedir quadros, e o jogo deixa de gastar bateria. O Prisma aproveita esse momento para pausar a partida sozinho e salvar onde você parou.

WebGL: quando o jogo precisa de 3D

Desenhar em 2D com canvas é suficiente para muitos jogos. Para mundos em 3D, com luz, sombra e milhares de triângulos, o navegador oferece o WebGL, cuja primeira versão oficial foi publicada em 2011. Ele dá ao código da página acesso à placa de vídeo do aparelho, a mesma peça que faz os jogos de console parecerem tão detalhados.

No Jogali, jogos como a GelaTina e o Kinetik Strike usam WebGL para mostrar cenários e personagens em 3D. Muitos desenvolvedores usam bibliotecas prontas, como a Three.js, que cuidam da parte mais trabalhosa e deixam o foco no jogo.

WebAssembly e trabalhadores em segundo plano

Algumas tarefas exigem muita conta, como simular a física de objetos que se chocam. Para isso existe o WebAssembly, um formato que permite rodar no navegador código escrito em outras linguagens, com velocidade próxima à de um programa instalado. Ele virou recomendação oficial do W3C em dezembro de 2019. O Kinetik Strike, por exemplo, usa um motor de física que roda dessa forma.

Outra ferramenta é o Web Worker, que deixa o jogo fazer contas pesadas "nos bastidores", sem travar a tela. A GelaTina usa esse recurso para recalcular os pedaços de fruta cortados enquanto a animação continua fluindo.

Web Audio: som sem arquivos

A Web Audio API permite criar e processar sons por código. Em vez de baixar arquivos de música, o Prisma e Joias Mágicas criam efeitos e melodias na hora, com osciladores e filtros. Isso deixa o carregamento leve e permite ajustar volume, tom e ritmo com precisão. Outros jogos usam arquivos de áudio gravados quando faz mais sentido, e a mesma API também cuida deles. Explicamos tudo isso em detalhes no artigo sobre música sintetizada no navegador.

Armazenamento local: o jogo lembra de você

O navegador pode guardar pequenas informações no próprio aparelho. É assim que o Prisma lembra quais órbitas você desbloqueou, quantas estrelas ganhou e até a partida que ficou pausada, e que Joias Mágicas guarda a sua fase, as estrelas e as ajudas. Funciona sem conta e sem cadastro.

Há um lado importante para saber: esses dados ficam naquele navegador, naquele aparelho. Se você limpar os dados de navegação, usar uma janela anônima ou trocar de celular, o progresso guardado ali não vai junto. No Jogali, entrar com a conta Google é opcional e serve para o que precisa ser compartilhado, como o ranking com o seu nome.

Toque, teclado e controle

O mesmo jogo pode ser controlado de jeitos diferentes. O navegador entrega ao código os eventos de cada aparelho: teclas apertadas, cliques, toques, arrastos e deslizes. O jogo traduz cada um em uma ação.

• No Prisma, você arrasta para mover a peça, toca para girar, desliza para baixo para soltar e para cima para reservar. No computador, as setas e o Espaço fazem o mesmo.
• Em Joias Mágicas, dá para arrastar uma joia para o lado ou tocar em duas vizinhas. No teclado, as setas movem um cursor.
• No Órbita, um círculo na tela faz as vezes de manche no celular, e o teclado dá controle completo no computador.

Tela cheia e atalho na tela inicial

Muitos navegadores permitem que a página ocupe a tela inteira, o que dá a sensação de um aplicativo. Para evitar sustos, eles só fazem isso depois de um toque ou clique da pessoa. Também dá para adicionar o site à tela inicial do celular, criando um atalho com ícone. No iPhone, o Safari não oferece tela cheia para páginas comuns do mesmo jeito que outros aparelhos, por isso o atalho na tela inicial é o caminho mais próximo de uma experiência de aplicativo.

Segurança: cada página na sua caixa

Uma das maiores vantagens dos jogos no navegador é que eles rodam numa espécie de caixa isolada. A página não consegue mexer nos seus arquivos, nas suas fotos ou em outros aplicativos sem a sua permissão. É bem diferente de baixar um programa desconhecido e instalar no computador. Para famílias, isso é um alívio: dá para experimentar um jogo sem instalar nada.

Cada aparelho é diferente

Um mesmo jogo pode rodar num computador potente e num celular simples. Por isso, jogos mais pesados precisam se adaptar. A GelaTina, por exemplo, mede o desempenho enquanto você joga e ajusta sozinha o nível de detalhe, para ficar bonita nos aparelhos mais fortes e leve nos mais simples. Jogos 2D como o Prisma e Joias Mágicas são naturalmente leves e rodam bem até em aparelhos mais antigos.

Dicas para jogar melhor no navegador

1. Mantenha o navegador atualizado. Versões novas trazem correções e deixam os jogos mais rápidos.
2. Feche as abas que não está usando. Elas disputam memória e bateria com o jogo.
3. Cuidado com o modo de economia de bateria. Ele pode reduzir o desempenho do aparelho e deixar jogos 3D mais lentos.
4. Não limpe os dados do site se quiser manter o progresso salvo naquele aparelho.

E os limites?

Vale ser honesto sobre eles. Jogos 3D muito pesados ainda exigem mais do aparelho, e um navegador nunca vai ter exatamente o mesmo acesso a hardware que um jogo instalado. O primeiro carregamento depende da internet. E, como vimos, o progresso salvo localmente pode se perder se os dados forem apagados.

Mesmo assim, para jogos de puzzle, aventuras 2D e muitas experiências 3D, o navegador já é mais do que suficiente. Dá até para jogar com amigos em tempo real, como contamos em como amigos jogam juntos no navegador. Da próxima vez que abrir um jogo do Jogali, lembre que, por trás daquele toque em "Jogar", existe um pequeno estúdio inteiro funcionando dentro da página.