ForVsTill
Todo jogo deste site roda sobre o mesmo motor, escrito aqui dentro, do zero. Nenhuma biblioteca, nenhum arquivo de imagem, nenhuma fonte de fora: o que você vê na tela é código desenhando. Logo abaixo tem um motor de carro girando em três dimensões e um carro se despedaçando contra um muro. Os dois estão sendo calculados agora, no seu aparelho, por este motor. Nada ali é vídeo.
Um AP 2.0 girando em 3D feito à mão
Este é um VW AP 2.0 de quatro cilindros em linha — o motor do Santana — montado peça por peça dentro de um canvas 2D. Não existe three.js, não existe WebGL, não existe um arquivo de modelo baixado de lugar nenhum: existem matrizes 4x4, uma projeção em perspectiva, o algoritmo do pintor e um cálculo de luz por face. O bloco está em corte, então dá para ver os quatro pistões trabalhando, presos às bielas, presas ao virabrequim. Arraste com o dedo ou com o mouse para girar.
Matrizes 4x4 multiplicadas à mão giram e deslocam o mundo; a projeção divide pelo Z com campo de visão de verdade. É a mesma conta de 1994, que é exatamente o espírito da casa.
As faces são ordenadas da mais distante para a mais próxima e pintadas nessa ordem. Custa alguns microssegundos por quadro. Um Z-buffer por pixel em JavaScript custaria o celular simples que a gente faz questão de atender.
A altura do pistão sai da manivela e da biela: y = r·sen θ + √(l² − (r·cos θ)²).
A defasagem é de 180°, como num quatro cilindros de verdade — 1 e 4 sobem
enquanto 2 e 3 descem.
Coletor de admissão, escapamento, cabos de vela e a correia são varreduras de anel ao longo de uma curva. É o teste mais duro do renderizador, porque um referencial mal escolhido torce o tubo e vira fita.
Um quatro tempos com quatro cilindros explode duas vezes por volta: a
frequência é rpm ÷ 60 × 2. A 850 rpm dá 28 Hz — o ronco de marcha
lenta que você ouve ao dar partida. Nenhum arquivo de áudio no projeto.
O nome não é escrito por cima da imagem: os dois vetores da própria face viram a matriz do canvas, e o texto passa a viver no plano da peça. Gira junto, encurta junto, some junto. É a diferença entre adesivo e fundição.
Observação honesta: o movimento dos pistões aparece em um oitavo da velocidade real. A 6.000 rpm o virabrequim dá cem voltas por segundo — a 60 quadros por segundo isso viraria serrilhado e o olho não veria nada. O movimento continua proporcional à rotação, só desacelerado, e o número no rodapé da bancada avisa isso.
Um carro batendo, e nada disso é animação
Desenhar é metade do trabalho de um motor de jogo. A outra metade é calcular o que acontece quando duas coisas se encontram. Então: um carro acelera contra um muro. A lataria dele é uma grade de massas ligadas por molas, integrada por Verlet. Quando uma mola é esticada além do que aguenta, ela arrebenta. Quando uma chapa perde molas demais, ela se solta e sai voando com a inércia que tinha. O capô amassa mais que a traseira porque o bloco do motor pesa mais que o porta-malas — isso está na conta, não no desenho. Bata duas vezes na mesma velocidade: o amassado sai diferente.
A integração guarda a posição anterior em vez da velocidade. Isso dá estabilidade de graça em cadeias de restrição e torna colisão trivial: para parar uma partícula, basta empurrar a posição — a velocidade se ajusta sozinha.
Corpo rígido bate e quica. Carro bate e absorve energia deformando. Com uma grade massa-mola, o amassado é o próprio resultado da simulação, não um desenho de "carro amassado" trocado no lugar do outro.
Física com passo variável é física diferente a cada quadro: num celular a 30 quadros por segundo o carro bateria com força diferente da do computador. Com passo fixo, o mesmo resultado sai em qualquer aparelho.
Um motor que cabe no carregamento de uma página
Motor de jogo costuma ser um programa gigante que exporta um arquivo de centenas de megabytes. O ForVsTill vai pelo caminho oposto: ele é o próprio site. Quando você clica em "jogar", não há download, instalação, conta obrigatória nem tela de carregamento com barrinha — o jogo já chegou junto com a página. E como não depende de nada de fora, ele não quebra quando um servidor alheio sai do ar, não carrega rastreador de terceiro e não muda de comportamento porque uma biblioteca atualizou.
Cada capa, criatura, prédio e cenário é desenhado por instruções matemáticas na hora em que você abre a página. Não existe pasta de imagens no projeto.
Nenhum arquivo de áudio. Os sons são construídos como onda no momento em que tocam — o que significa que cada impacto pode sair um pouco diferente do anterior.
Analógico flutuante que nasce onde o polegar encosta, com ângulo livre e velocidade proporcional à distância do centro, mais menu radial para o resto dos comandos.
O progresso fica guardado no próprio aparelho. Fechou a aba sem querer, abriu de novo, continua de onde parou — sem servidor no meio.
A interface do site troca de idioma na hora, sem recarregar e sem serviço de tradução externo: o texto já vem junto.
Dá para colocar na tela inicial do celular e abrir em tela cheia, com ícone próprio e sem barra de navegador. Continua sendo o site.
Qual é a melhor linguagem para jogo de navegador
A pergunta chega toda semana, então vai a resposta direta: não existe uma só, e quem disser que existe está vendendo alguma coisa. Existem três caminhos, e a escolha depende de qual problema você tem hoje. O estúdio já está elaborando o ForVsTill em cima do primeiro deles, de propósito, e sabe exatamente quando vai precisar dos outros dois.
JavaScript + Canvas 2D
A única linguagem que o navegador entende de nascença, sem passo de compilação, sem instalar nada, sem servidor. Os motores modernos compilam JavaScript para código de máquina enquanto ele roda — é rápido o suficiente para jogo em tempo real, e a prova está nas duas bancadas desta página: 3D com centenas de faces e física com centenas de molas, no seu aparelho, agora.
Por que a gente escolheu: abre em segundos, cabe em kilobytes, roda em computador velho, não tem dependência para quebrar e o código que você escreve é o código que o usuário recebe. Para o tamanho de jogo que a Sea Cloud Weed faz, nada supera isso.
WebGL e WebGPU
Continua sendo JavaScript, mas quem desenha passa a ser a placa de vídeo. É o caminho obrigatório quando a cena tem milhares de objetos, iluminação de verdade e sombra projetada — coisa que o Canvas 2D não entrega. O WebGPU, sucessor do WebGL, é o mais novo e o mais capaz, com acesso de baixo nível à GPU e computação em paralelo; já está nos navegadores atuais, mas ainda exige plano B para aparelho antigo.
Quando a gente vai mudar: no dia em que uma cena não couber em 16 milissegundos por quadro no celular. Enquanto couber, GPU é peso extra sem retorno.
WebAssembly (de C++ ou Rust)
Um formato binário que roda no navegador perto da velocidade de programa nativo. Você escreve em C, C++ ou Rust, compila para WebAssembly e o navegador executa. É por aí que motores grandes chegam à web: Unity e Godot exportam justamente para WebAssembly. Serve para o que é conta pura e pesada — física de mil corpos, geração de mundo, inteligência artificial de simulação.
O preço: volta a existir passo de compilação, ferramenta instalada, arquivo grande para baixar e uma ponte de dados entre o WebAssembly e o JavaScript que precisa ser bem feita, senão a travessia come o ganho.
- Jogo 2D, quer publicar rápido, quer que abra em qualquer aparelho: JavaScript com Canvas 2D. É onde o ForVsTill vive.
- Jogo 3D com ambição visual: JavaScript com WebGL hoje, WebGPU no horizonte — e aí faz sentido apoiar-se num renderizador pronto em vez de escrever o seu.
- Simulação pesada, ou porte de um jogo que já existe em C++: WebAssembly, com a interface e o áudio ainda em JavaScript.
- Não quer escrever motor nenhum: Godot ou Unity exportando para WebAssembly resolve — desde que você aceite dezenas de megabytes de carregamento antes da primeira tela.
O ForVsTill nasceu do lado do "abre em segundos" porque a maior parte de quem joga aqui chega por um link no celular, no meio do dia, com internet ruim. Um segundo de carregamento a mais custa jogador. Quando o jogo crescer a ponto de precisar de GPU, a troca é de renderizador — a lógica, o áudio, o controle e a física continuam onde estão. Foi por isso que essas partes foram escritas separadas desde o primeiro dia.
Onde dá para jogar
Duas portas já estão abertas hoje, e duas estão sendo construídas. A gente separa as duas coisas na sua frente porque prometer loja que ainda não existe é a forma mais rápida de perder alguém que confiou.
Navegador
Qualquer aparelho com navegador: computador, celular, tablet, a TV da sala. Sem instalar, sem cadastro, sem download. É clicar e estar dentro do jogo.
▶ Abrir o catálogoApp na tela inicial
O estúdio inteiro se instala como aplicativo no celular (PWA): ícone próprio, tela cheia, sem barra de navegador. Isso já funciona hoje, em Android e iPhone.
Como instalarGoogle Play
Meta declarada do estúdio: empacotar os jogos como aplicativo Android e publicar na loja. Ainda não estamos lá — quando estivermos, você fica sabendo primeiro.
🔔 Me avise quando sairApp Store
Mesmo plano para iPhone e iPad. É o passo seguinte depois do Android, e depende de coisas que estão listadas logo abaixo — nada de mistério.
🔔 Me avise quando sairUm jogo de navegador pode virar aplicativo de loja de verdade — a tecnologia existe e é a que a gente vai usar. O que separa o hoje do lançamento é trabalho e caixa, não sorte:
- Conta de desenvolvedor paga. Google cobra cerca de US$ 25 uma única vez; Apple, cerca de US$ 99 por ano, todo ano, mesmo sem publicar nada.
- Build nativo. No Android o caminho é empacotar o site como aplicativo confiável (TWA); no iPhone, um invólucro nativo. Em ambos os casos é um projeto a mais para manter, não um botão de exportar.
- Revisão das lojas. Cada envio passa por análise humana, com regras de classificação etária — e a linha +18 tem exigência própria.
- Manutenção. Loja quer atualização assinada a cada mudança. Site é publicar e pronto; app é fila.
Enquanto isso não sai, deixe seu e-mail no rodapé desta página: quando o primeiro aplicativo entrar na loja, a lista é avisada antes de qualquer post.
O que melhorou e quando
Uma entrada por semana, escrita depois que a mudança já está no ar. Só entra aqui o que dá para conferir abrindo o jogo — não é lista de intenção.
As duas bancadas
- Renderizador 3D próprio. Matrizes 4x4, projeção em perspectiva com campo de visão, algoritmo do pintor, descarte de face de costas e sombreamento plano por produto escalar — tudo dentro de um canvas 2D, sem uma linha de biblioteca.
- Construtor de tubo paramétrico. Varre um anel ao longo de uma curva com referencial estável. É o que faz coletor de admissão, escapamento, cabos de vela e correia.
- Manivela-biela animada. Quatro pistões presos a quatro bielas presas ao virabrequim, com defasagem de 180° e contrapeso.
- Motor de física com corpo mole. Integração de Verlet, restrição de distância com limite de ruptura e destroços que herdam a inércia da chapa que se soltou.
- Modos de bancada: vista explodida, wireframe, scanner e corte, mais conta-giros e tela de diagnóstico com custo por quadro medido ao vivo.
Controle que cabe no polegar
- Analógico flutuante. O direcional de quatro botões saiu. Agora o analógico nasce onde o polegar encostar na metade esquerda da tela, aceita qualquer ângulo e a velocidade cresce conforme você afasta do centro.
- Menu radial. Os comandos que não cabiam em botão grande foram para um menu em círculo, aberto pelo ⊕ à direita. Todo comando de teclado passou a ter caminho no toque.
- Dois controles de toque brigando viraram um. VIGÍLIA e ABISMO tinham, cada um, um controle próprio por cima do controle do motor. Os dois disputavam o mesmo dedo. Os antigos foram removidos; ficou o do motor.
- Fonte de títulos trocada, por uma com mais peso nas letras maiúsculas — e, como manda a casa, desenhada sem depender de fonte externa.
- Seletor de seis idiomas no site inteiro, trocando na hora, sem recarregar.
- Feed de notícias do estúdio e capas com figura humana em contraluz, que foi o que tirou as capas do estágio de "mancha escura bonita".