Os 8 melhores mecanismos e bibliotecas de jogos JavaScript de código aberto

Os navegadores da Web percorreram um longo caminho nas últimas duas décadas. A introdução de padrões da web em melhoria contínua e desenvolvedores que os implementam em uma variedade de navegadores agora nos permite fazer coisas diretamente dentro dos navegadores que não eram possíveis ou muito difíceis de conseguir antes.

Quando combinados com todos os recursos e poder de processamento que agora vêm com smartphones e computadores modernos, agora é possível criarmos jogos que podem ser executados diretamente no navegador do usuário. Embora os jogos baseados em navegador ainda não possam competir de frente com os jogos desenvolvidos de forma nativa, podemos executar jogos moderadamente complexos em um navegador sem exigir nenhuma instalação.

Desenvolver um jogo é uma tarefa gigantesca. Felizmente, existem muitos mecanismos e bibliotecas de jogos baseados em JavaScript para ajudá-lo a cobrir o básico sem a necessidade de implementar recursos comuns, como detecção de colisão. Neste tutorial, apresentaremos a você alguns dos melhores mecanismos e bibliotecas de jogos JavaScript de código aberto e gratuito que você pode usar em seus próprios projetos.

PixiJS

PixiJS é uma das bibliotecas mais populares que você pode usar para criar gráficos impressionantes para seus jogos. A biblioteca usa WebGL para renderização e retorna automaticamente para a tela em plataformas mais antigas, para que você não precise se preocupar com nada. Existem recursos suficientes na biblioteca para apresentar um argumento convincente de que você deve tentar pelo menos uma vez.

A demonstração CodePen a seguir de Omar Shehata mostra como você pode criar esse efeito esfumaçado usando PixiJS.

Com PixiJS, você tem suporte para folhas de sprite com recursos que incluem corte e embalagem rotacional. Também existe um carregador de ativos para ajudá-lo a carregar e gerenciar coisas como gráficos, fontes e dados de animação. A entrada e o rastreamento multitoque permitem que você implemente interações do usuário como panorâmica e pinça para escalar.

A biblioteca também oferece uma variedade de filtros WebGL, modos de tingimento e mistura, bem como renderização de texto avançada para ajudá-lo a fornecer uma experiência visual de alta qualidade.

Uma das maneiras mais fáceis de aprender mais sobre a biblioteca e descobrir o que ela tem a oferecer é examinar a longa lista de exemplos que demonstram suas capacidades.

Phaser

Phaser é outra biblioteca que você pode usar para criar rapidamente jogos baseados em HTML5 para celulares, bem como navegadores de desktop. Existem muitas semelhanças, bem como algumas diferenças em termos de recursos oferecidos. Por exemplo, o Phaser também permite renderizar gráficos usando WebGL e canvas.

A demonstração CodePen a seguir de Aaron Buchanan mostra como você pode implementar a funcionalidade principal do popular jogo Fruit Ninja no Phaser.

A estrutura principal da biblioteca é gratuita para uso comercial, mas você pode obter recursos e funcionalidades extras usando plug-ins pagos. Você pode desenvolver seus próprios jogos em JavaScript ou TypeScript.

O Phaser tem muitos recursos interessantes, como suporte avançado para várias câmeras. Isso basicamente permite que você crie câmeras extras que podem ser colocadas em qualquer lugar da tela. As câmeras são roláveis ​​e vêm com efeitos como tremor, flash e fade.

Imagens, sons, folhas de sprite e outros recursos podem ser carregados e gerenciados facilmente no jogo com a ajuda de um pré-carregador integrado na biblioteca.

Uma das coisas de que você vai gostar no Phaser é que ele foi criado para dispositivos móveis. Isso basicamente significa que os desenvolvedores tomaram cuidado extra para que qualquer recurso adicionado à biblioteca principal tenha um bom desempenho em dispositivos móveis.

Stage.js

A biblioteca Stage.js é ideal para pessoas que desejam desenvolver jogos 2D simples que não precisam de recursos complicados. Os jogos são renderizados usando o canvaselemento em HTML5.

Aqui está uma implementação de um jogo Tic-Tac-Toe simples da creotip usando stage.js. Você pode encontrar alguns exemplos mais avançados na página inicial do site .

Embora o canvaselemento HTML5 possa ser usado para criar gráficos e animações, ele tem algumas limitações que tornam o desenvolvimento de jogos um pouco mais difícil. A biblioteca Stage.js contorna essa limitação implementando sua própria estrutura semelhante a DOM para os elementos que você desenha na tela. Ele também lida e propaga adequadamente diferentes eventos de mouse e toque em diferentes objetos para você.

A biblioteca vem com um loop de jogo integrado, bem como outros recursos de que você precisa para criar jogos 2D básicos rapidamente. Isso inclui manipular o tamanho, a posição e a transparência de diferentes elementos, bem como ouvir e lidar com diferentes eventos de mouse e toque.

MelonJS

O MelonJS é um mecanismo de jogo gratuito baseado em JavaScript, fácil de aprender e poderoso o suficiente para criar jogos de plataforma simples. É uma biblioteca de jogos leve e livre de dependências, portanto, não há necessidade de carregar mais nada para fazê-la funcionar. Tudo que você precisa é um navegador compatível com HTML5.

O MelonJS usa um renderizador WebGL com fallback de canvas, assim como nossas duas primeiras bibliotecas. Ele vem com sua própria implementação de física leve para garantir baixos requisitos de CPU. Ele também oferece suporte para folhas de sprite e texturas junto com gerenciamento de animação.

Você tem acesso a eventos de mouse e toque, bem como a fontes de sistema e bitmap. A detecção de movimento, orientação e acelerômetro do dispositivo também é suportada.

Depois de desenvolver seu jogo, você pode usar o Corodova para transformá-lo em um aplicativo móvel híbrido. O mecanismo de jogo também fornece integração nativa para muitos outros plug-ins de terceiros.

BabylonJS

As bibliotecas e mecanismos que discutimos até agora são todos destinados à criação de jogos 2D. E se você estiver procurando por um mecanismo de renderização que o ajude a criar jogos 3D? BabylonJS será de grande ajuda nesse caso.

Aqui está uma floresta simples criada usando a biblioteca BabylonJS de Pavel Starý . Você pode se mover nele pressionando as teclas de seta.

Existem muitos recursos no mecanismo de renderização que fazem com que valha a pena tentar. Existem muitos editores para ajudá-lo a economizar tempo e criar efeitos básicos. Isso inclui um editor de partículas para criar e configurar rapidamente sistemas de partículas, bem como um editor de material de nó, etc.

A biblioteca oferece muitos efeitos especiais como neblina, profundidade de campo, reflexos de lente e nitidez. Também há muita otimização envolvendo instâncias aceleradas por hardware, juntamente com telas fora da tela, etc.

Three.js

O nome da popular biblioteca Three.js deve surgir sempre que estamos discutindo qualquer coisa relacionada a gráficos 3D ou visualizações no navegador. É uma biblioteca de renderização 3D de propósito geral que você pode usar para muitas coisas. Isso significa que também pode ser usado para renderizar gráficos para seus jogos 3D.

Aqui está uma demonstração do CodePen por Lisa Kobrazova que cria um planeta semelhante a Saturno usando Three.js para mostrar o que você pode fazer com a biblioteca.

A biblioteca oferece suporte para cenas, animações, câmeras e objetos. Você também pode adicionar luz a uma cena enquanto a faz parecer ambiente, direcional ou vinda de um ponto. Da mesma forma, você pode criar uma variedade de formas geométricas, como um cubo, esfera, toro e texto 3D.

A biblioteca Three.js tem uma enorme comunidade ativa para ajudá-lo ao longo do processo de aprendizagem. A documentação detalhada e esta página de exemplos podem ajudá-lo a aprender e explorar o que você pode fazer com a biblioteca.

Matter.js

Agora que falamos sobre bibliotecas de jogos 2D completas e mecanismos de renderização 3D, é hora de incluir alguns mecanismos de física na discussão também.

Matter.js é um mecanismo de física rico em recursos para corpos rígidos 2D que você pode incorporar em seus jogos. Você pode usá-lo para ir além da detecção de colisão básica em qualquer jogo 2D que você desenvolver. Ele permite que você especifique valores para propriedades físicas como massa e densidade para diferentes objetos.

Aqui está um exemplo que criei para mostrar como Matter.js pode ser usado para aplicar forças em qualquer corpo rígido.

Há muitas coisas que você pode simular com a biblioteca, como gravidade, fricção e colisões elásticas ou inelásticas. Também escrevemos uma série de tutoriais sobre este tópico para ajudá-lo a começar a usar Matter.js .

Cannon.js

A biblioteca Cannon.js é um mecanismo de física 3D leve para a web. Este mecanismo de física vem com uma variedade de recursos como detecção de colisão, suporte para diferentes formatos de corpo e fricção, bem como restrições como dobradiças.

Esses recursos do mecanismo de física podem ser combinados com uma biblioteca de renderização 3D como Three.js para criar alguns jogos 3D como o popular jogo de pilha mostrado no CodePen abaixo, criado por Hunor Marton Borbely .

Você também pode usar alguns outros mecanismos de física 3D alternativos, como Oimo.js, dependendo de como gostaria de desenvolver diferentes recursos em um jogo. A biblioteca Oimo.js parece semelhante ao Matter.js em alguns aspectos, então aprender pode ser um pouco mais fácil se você já tiver alguma experiência com Matter.js. Também é relativamente mais recente em comparação com Cannon.js.

Pensamentos finais

É emocionante pensar que chegamos tão longe em termos de desenvolvimento web que é possível criar e executar jogos dentro de navegadores. No entanto, você deve se lembrar que o desenvolvimento de jogos é uma tarefa muito exigente, mesmo com todos esses avanços e bibliotecas para ajudá-lo. Isso é especialmente verdadeiro para jogos 3D.