Você conhece a biblioteca Phaser.JS para criação de jogos em JavaScript?
Phaser é uma biblioteca para criação de jogos que foi idealizada pela Photon Storm. Com ela, podemos criar jogos que rodam tanto em ambiente mobile quanto desktops. Ela roda nos principais navegadores atuais de desktop. Em dispositivos móveis, é suportado no Chrome mobile, no navegador Safari (no IOS5 para cima). Acesse a biblioteca: phaser.io
Principais recursos:
O Phaser não utiliza nenhuma prática interna de orientação a objeto, não possui heranças de código e componentes. Mas você pode alterar as funções do Phaser.
Para renderização de gráficos, o Phaser utiliza o Pixi.js. Nos jogos, se o navegador suportar WebGL, o usuário terá uma melhor experiência. Os jogos em HTML5 caminham para o futuro de WebGL disponível em dispositivos móveis. Para isso acontecer, é apenas uma questão de tempo.
O carregamento do Phaser suporta:
-
Imagens;
-
Sprite Sheets;
-
Texture Atlases;
-
Arquivos de áudio;
-
Arquivos de dados;
-
Arquivos JavaScript;
-
Tilemaps;
-
Fontes Bitmap.
Áudio:
Com a WebAudio API, podemos ter uma integração apropriada de áudio, com múltiplas rotas, canais e os mais variados tipos de efeitos.
Inputs:
Multi-Touch, Keyboard, Pointer e Mouse: O Phaser suporta os mais variados tipos de inputs, como toques na tela, cliques de mouse, teclas pressionadas, entre outros.
Física, Partículas, Tweens:
O sistema de Física e gravidade pode ser facilmente alterado no PhaserJS. Estes recursos não são necessários em alguns tipos de jogos, então o Phaser permite que você alterne entre objetos e propriedades facilmente.
Plugins:
O Phaser possui um sistema de plugins, para que a ferramenta receba novas funcionalidades, sem alterar o conteúdo principal da biblioteca.
No site da biblioteca, existem diversos exemplos com diferentes tipos de animações e eventos disponíveis para o seu jogo. Você pode ver também o guia para iniciantes (link) e descobrir como fazer seu primeiro jogo.
Para fazer o download do npm:
npm install phaser@3.18.1
Com CDN:
<script src="//cdn.jsdelivr.net/npm/phaser@3.18.1/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.18.1/dist/phaser.min.js"></script>
Gostou deste artigo? Comente abaixo!