3 caminhos para criar jogos com JavaScript

Alguém que esteja tentando aprender sobre desenvolvimento de jogos hoje em dia certamente já ouviu falar das três grandes game engines do momento que são a Unity, a Unreal Engine e a Godot. Em questão do tempo necessário para o desenvolvimento e presença de uma comunidade ativa para ajudar nas dúvidas, provavelmente elas são o caminho mais eficiente para o desenvolvedor/artista indie (independente) criar um jogo, seja para participar de uma game jam ou para um projeto comercial.

Mas, às vezes, nós só queremos fazer um clone de um jogo da nossa infância e depois nunca mais mexer com game dev. Nesses casos, é mais difícil justificar o investimento de tempo e energia no aprendizado de uma das grandes engines. A boa notícia é que se você não tem grandes ambições para o seu projeto, existem inúmeras bibliotecas ou frameworks de game dev para praticamente qualquer linguagem minimamente popular (Lua/Love2D, Python/PyGame, Java/libGDX, C++/Raylib, C#/MonoGame, etc). Dessa forma, você pode continuar usando sua linguagem, editor e ecossistema favoritos.

Neste artigo, focaremos na plataforma Web. A estrutura inicial do projeto é a seguinte:

• index.html
• style.css
• main.ts

O código inicial do index.html é como segue:

E o do arquivo style.css é assim:

O main.ts ficará vazio por enquanto.

Faremos uso do bundler esbuild para gerar o arquivo JavaScript que conterá a lógica do jogo junto de possíveis bibliotecas. Também usaremos arquivos TypeScript mas só para obter uma ajuda no completamento automático. O esbuild já vem com suporte nativo a TypeScript, o que implica em não precisar instalar separadamente o compilador tsc.

Para instalar o esbuild, é como com qualquer outro pacote NPM:

npm install esbuild

yarn add esbuild

pnpm add esbuild

No arquivo package.json adicionaremos os seguintes scripts:

Além disso, precisamos servir o diretório raíz do projeto usando um servidor local. Aqui há várias opções como os pacotes http-server e serve. Eu gosto da extensão ritwickdey.LiveServer para o VS Code.

Kontra.js

É uma micro-biblioteca criada especificamente para a game jam js13k. Nessa game jam cada byte conta pois para participar, a sua submissão deve ser um arquivo .zip contendo tudo que seu jogo precisa para rodar(códigos, index.html, folhas de estilo, imagens, sons, etc) e este arquivo não pode ter mais de 13 KB de tamanho.

Dado esse viés minimalista, esta biblioteca foca apenas no essencial: carregar arquivos, implementar um game loop, ler a entrada do usuário via mouse/teclado e abstrações para sprites e tilemaps. Isso mesmo, não tem suporte a áudio, o que requer o uso de algo como um HTMLAudioElement ou da Web Audio API ou ainda de alguma ferramenta ao moldes do MiniSoundEditor que transforma efeitos sonoros em código.

A instalação é simples:

npm install kontra

yarn add kontra

pnpm add kontra

Um exemplo de aplicação que carrega imagens do disco e usa animações (arquivo main.ts):

Se quiser ver o projeto inteiro, aqui tem o repositório.

Alguns jogos feitos com essa biblioteca podem ser encontrados aqui.

Kaboom.js

Essa é uma biblioteca baseada na arquitetura ECS, o que significa que os objetos do jogo são basicamente coleções de componentes que são formas de adicionar estado e comportamento aos objetos de modo a minimizar o acoplamento.

Essa arquitetura ou alguma variação dela é fonte de inspiração para a maioria das novas game engines pois se for implementado com cuidado em relação à forma de organizar os dados, especialmente levando em conta a questão da localidade, é possível extrair muito mais performance do computador ou console onde o jogo estiver rodando.

Para instalá-la, basta executar na raíz do projeto:

npm install kaboom

yarn add kaboom

pnpm add kaboom

O código completo, para o mesmo projeto de antes, com a Kaboom.js fica assim:

Repositório com a aplicação completa: link.

Phaser.js

De longe, a opção mais rica em funcionalidades e com a maior comunidade dentre as listadas anteriormente. É mais um framework do que uma biblioteca e se levarmos em conta esse projeto feito por um membro da comunidade, dá até para considerar como uma game engine.

Há muitos jogos na Steam e no itch.io feitos com Phaser. Inclusive, o sucesso indie “Vampire Survivors” foi feito com esta biblioteca! É verdade que o autor precisou trocar de engine recentemente por ter esbarrado em limitações de performance da plataforma Web, mas durante algum tempo o mesmo criava novas funcionalidades com JavaScript e outra equipe era responsável por portar o código para a nova engine.

Agora, vamos instalar o pacote Phaser:

npm install phaser

yarn add phaser

pnpm add phaser

O código usando Phaser fica assim:

Como podemos ver, o Phaser tem uma carinha de POO(Programação Orientada a Objetos), o que pode ser uma boa porta de entrada para quem já tem familiaridade com esse paradigma.

Repositório com a aplicação completa: link.

Considerações finais

Fica assim o resultado de qualquer uma das três versões:

As imagens são desse pacote feito pelo Kenney.

Aqui é possível ver a versão live (essa versão é a baseada no Kontra mas as outras são idênticas).

Fazer jogos com tecnologias Web é uma das formas mais fáceis de começar nessa área, ainda mais agora que todo mundo, seus cachorros e seus gatos conhecem pelo menos um pouco de JavaScript.

Alguns links úteis para quem está começando com game dev:

• https://www.reddit.com/r/gamedev/wiki/index
• http://www-cs-students.stanford.edu/~amitp/gameprog.html
• https://www.gamedeveloper.com/disciplines/how-to-prototype-a-game-in-under-7-days
• https://www.kenney.nl/
• https://kaboomjs.com/
• https://newdocs.phaser.io/

Bons estudos e boa sorte!