Coloquei Nexuiz para rodar no navegador (e quase surtei com uma tela preta)

Imagine abrir o Chrome, entrar em um site e começar a jogar um FPS
clássico de PC, sem instalar absolutamente nada.

Parece streaming? Não! O jogo está rodando de verdade dentro do
navegador.

Foi essa a experiência que decidi construir com Nexuiz Classic
2.5.2, um FPS de código aberto lançado originalmente para PC. E,
sinceramente, fazer isso funcionar foi uma aventura à parte.

Mas como colocar um jogo antigo de computador dentro de uma página da
internet?

O navegador não fala a língua do jogo

O primeiro problema é que o navegador não entende programas de
computador da mesma maneira que o Windows.

O Nexuiz utiliza a engine DarkPlaces, derivada da tecnologia dos jogos
da família Quake e escrita em C.

Pense na engine como o cérebro do jogo. Ela sabe movimentar personagens,
calcular tiros, carregar mapas e controlar tudo o que acontece.

Só que o navegador não fala essa língua.

Foi aí que entrou o Emscripten, uma espécie de tradutor. Ele
transforma o código original em WebAssembly (WASM), um formato que o
navegador consegue executar com bom desempenho.

É como pegar um livro escrito em outro idioma e traduzi-lo para que
outra pessoa consiga entender.

Assim, em vez de criar o jogo novamente do zero, consegui aproveitar boa
parte da tecnologia original.

O jogo precisa encontrar as pastas dele

Traduzir o cérebro não era suficiente. O jogo também precisava dos seus
arquivos.

Mapas, texturas, sons e outros recursos ficam separados da engine. No
computador, tudo isso está organizado em pastas.

Mas no navegador não existe aquele sistema de arquivos tradicional do
Windows.

Minha solução foi criar uma espécie de PC de mentira dentro do
navegador.

O JavaScript baixa os arquivos necessários e organiza tudo em uma pasta
virtual na memória do navegador. Dessa forma, quando a engine procura um
mapa ou uma textura, encontra tudo no lugar esperado.

É como montar uma pequena mochila com todas as peças necessárias antes
de sair para jogar.

Também preparei o armazenamento para guardar configurações e progresso
usando o IndexedDB, que funciona como uma gaveta particular do
navegador.

E tem um detalhe interessante: o site fica hospedado na Vercel como um
conjunto de arquivos estáticos. Ela simplesmente entrega os arquivos ao
navegador. Não existe um computador na nuvem executando o jogo por trás.

Quem desenha a tela é o navegador

Com a engine funcionando e os arquivos carregados, faltava fazer o jogo
aparecer.

É aí que entra o WebGL2.

Imagine que a engine seja um artista que sabe exatamente o que precisa
desenhar, mas precisa de um pincel compatível com a tela. O WebGL faz
esse papel, permitindo que o navegador desenhe os cenários e personagens
em 3D.

Já o JavaScript funciona como um controle remoto: recebe os comandos do
teclado, mouse e até dos dedos na tela do celular, transformando tudo em
ações que o jogo consegue entender.

Também criei uma página específica para dispositivos móveis, com
joystick virtual e botões de tiro, pulo e troca de armas.

O que quase deu errado?

Nem tudo funcionou de primeira.

A primeira grande inimiga foi uma tela preta.

O jogo carregava, o menu aparecia, a vida e a mira estavam visíveis...
mas o mundo 3D simplesmente desaparecia.

Inicialmente parecia que o jogo estava funcionando quase perfeitamente.
Depois de investigar, descobri que o problema estava no mecanismo
responsável por desenhar a cena. Uma configuração de renderização não
estava sendo tratada corretamente pelo navegador.

Ajustei a engine e finalmente o cenário apareceu!

Outro problema foram os sons e algumas imagens que não carregavam.

No computador original, o jogo conseguia abrir certas bibliotecas quando
precisava delas. No navegador, esse comportamento não funcionava da
mesma maneira. A solução foi incorporar essas bibliotecas diretamente à
engine.

Também precisei fazer algumas concessões visuais. Certos efeitos
gráficos não eram compatíveis com o ambiente WebGL utilizado. Então
desliguei recursos como algumas sombras dinâmicas e o lightgrid por
pixel.

O objetivo era simples: fazer o jogo funcionar antes de tentar deixá-lo
bonito.

E agora?

Depois de vários ajustes, consegui colocar o Nexuiz Classic para rodar
dentro de uma aba do navegador.

São 33 mapas disponíveis na campanha, progresso salvo no próprio
navegador e uma versão com controles adaptados para celular.

Ainda existem limitações. O multiplayer real, por exemplo, é uma próxima
etapa do projeto. E o desempenho em celulares depende bastante do
hardware e dos ajustes gráficos.

Mas o mais interessante dessa experiência não foi apenas conseguir jogar
Nexuiz no Chrome.

Foi descobrir que um jogo originalmente desenvolvido para computadores
pode ganhar uma nova vida na web sem precisar ser recriado do zero.

No fim, não foi mágica. Foi tradução, adaptação e uma boa dose de
teimosia.

Se você chegou até aqui, abra o jogo e experimente. A parte difícil eu
já fiz; a divertida é sua!