<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Luiz Carlos</title>
    <description>The latest articles on DEV Community by Luiz Carlos (@luizcarlos-devplay).</description>
    <link>https://dev.to/luizcarlos-devplay</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1184560%2F3254bf2c-46c9-45d8-a2ac-5e0660ac1437.jpeg</url>
      <title>DEV Community: Luiz Carlos</title>
      <link>https://dev.to/luizcarlos-devplay</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/luizcarlos-devplay"/>
    <language>en</language>
    <item>
      <title>Coloquei jogo de pc para rodar no navegador (e quase surtei com uma tela preta)</title>
      <dc:creator>Luiz Carlos</dc:creator>
      <pubDate>Thu, 22 Oct 2026 17:54:25 +0000</pubDate>
      <link>https://dev.to/luizcarlos-devplay/coloquei-jogo-de-pc-para-rodar-no-navegador-e-quase-surtei-com-uma-tela-preta-5bd9</link>
      <guid>https://dev.to/luizcarlos-devplay/coloquei-jogo-de-pc-para-rodar-no-navegador-e-quase-surtei-com-uma-tela-preta-5bd9</guid>
      <description>&lt;h1&gt;
  
  
  Coloquei Nexuiz para rodar no navegador (e quase surtei com uma tela preta)
&lt;/h1&gt;

&lt;p&gt;Imagine abrir o Chrome, entrar em um site e começar a jogar um FPS&lt;br&gt;
clássico de PC, sem instalar absolutamente nada.&lt;/p&gt;

&lt;p&gt;Parece streaming? Não! O jogo está rodando de verdade dentro do&lt;br&gt;
navegador.&lt;/p&gt;

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

&lt;p&gt;Mas como colocar um jogo antigo de computador dentro de uma página da&lt;br&gt;
internet?&lt;/p&gt;

&lt;h2&gt;
  
  
  O navegador não fala a língua do jogo
&lt;/h2&gt;

&lt;p&gt;O primeiro problema é que o navegador não entende programas de&lt;br&gt;
computador da mesma maneira que o Windows.&lt;/p&gt;

&lt;p&gt;O Nexuiz utiliza a engine DarkPlaces, derivada da tecnologia dos jogos&lt;br&gt;
da família Quake e escrita em C.&lt;/p&gt;

&lt;p&gt;Pense na engine como o cérebro do jogo. Ela sabe movimentar personagens,&lt;br&gt;
calcular tiros, carregar mapas e controlar tudo o que acontece.&lt;/p&gt;

&lt;p&gt;Só que o navegador não fala essa língua.&lt;/p&gt;

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

&lt;p&gt;É como pegar um livro escrito em outro idioma e traduzi-lo para que&lt;br&gt;
outra pessoa consiga entender.&lt;/p&gt;

&lt;p&gt;Assim, em vez de criar o jogo novamente do zero, consegui aproveitar boa&lt;br&gt;
parte da tecnologia original.&lt;/p&gt;

&lt;h2&gt;
  
  
  O jogo precisa encontrar as pastas dele
&lt;/h2&gt;

&lt;p&gt;Traduzir o cérebro não era suficiente. O jogo também precisava dos seus&lt;br&gt;
arquivos.&lt;/p&gt;

&lt;p&gt;Mapas, texturas, sons e outros recursos ficam separados da engine. No&lt;br&gt;
computador, tudo isso está organizado em pastas.&lt;/p&gt;

&lt;p&gt;Mas no navegador não existe aquele sistema de arquivos tradicional do&lt;br&gt;
Windows.&lt;/p&gt;

&lt;p&gt;Minha solução foi criar uma espécie de &lt;strong&gt;PC de mentira dentro do&lt;br&gt;
navegador&lt;/strong&gt;.&lt;/p&gt;

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

&lt;p&gt;É como montar uma pequena mochila com todas as peças necessárias antes&lt;br&gt;
de sair para jogar.&lt;/p&gt;

&lt;p&gt;Também preparei o armazenamento para guardar configurações e progresso&lt;br&gt;
usando o IndexedDB, que funciona como uma gaveta particular do&lt;br&gt;
navegador.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Quem desenha a tela é o navegador
&lt;/h2&gt;

&lt;p&gt;Com a engine funcionando e os arquivos carregados, faltava fazer o jogo&lt;br&gt;
aparecer.&lt;/p&gt;

&lt;p&gt;É aí que entra o &lt;strong&gt;WebGL2&lt;/strong&gt;.&lt;/p&gt;

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

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

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

&lt;h2&gt;
  
  
  O que quase deu errado?
&lt;/h2&gt;

&lt;p&gt;Nem tudo funcionou de primeira.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A primeira grande inimiga foi uma tela preta.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;O jogo carregava, o menu aparecia, a vida e a mira estavam visíveis...&lt;br&gt;
mas o mundo 3D simplesmente desaparecia.&lt;/p&gt;

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

&lt;p&gt;Ajustei a engine e finalmente o cenário apareceu!&lt;/p&gt;

&lt;p&gt;Outro problema foram os sons e algumas imagens que não carregavam.&lt;/p&gt;

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

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

&lt;p&gt;O objetivo era simples: fazer o jogo funcionar antes de tentar deixá-lo&lt;br&gt;
bonito.&lt;/p&gt;

&lt;h2&gt;
  
  
  E agora?
&lt;/h2&gt;

&lt;p&gt;Depois de vários ajustes, consegui colocar o Nexuiz Classic para rodar&lt;br&gt;
dentro de uma aba do navegador.&lt;/p&gt;

&lt;p&gt;São 33 mapas disponíveis na campanha, progresso salvo no próprio&lt;br&gt;
navegador e uma versão com controles adaptados para celular.&lt;/p&gt;

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

&lt;p&gt;Mas o mais interessante dessa experiência não foi apenas conseguir jogar&lt;br&gt;
Nexuiz no Chrome.&lt;/p&gt;

&lt;p&gt;Foi descobrir que um jogo originalmente desenvolvido para computadores&lt;br&gt;
pode ganhar uma nova vida na web sem precisar ser recriado do zero.&lt;/p&gt;

&lt;p&gt;No fim, não foi mágica. Foi tradução, adaptação e uma boa dose de&lt;br&gt;
teimosia.&lt;/p&gt;

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

</description>
      <category>gamedev</category>
      <category>opensource</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
