HTML5 game engines

A seguir estão alguns exemplos de game engines implementadas com HTML5 e JavaScript:

  • A-Frame: Um web framework para a criação de experiências 3D e VR com HTML e o ecossitema Entity-Component. Funciona no HTC Vive, Oculus Rift, desktop e plataformas móveis. Feito pela equipe Mozilla VR.
  • Canvace: Uma plataforma de jogos em HTML5 para criação de títulos 2D e 2.5D.
  • Crafty: Um framework de jogos 2D baseado em JavaScript.
  • Cocos2D JS: Prove uma experiência consistente de desenvolvimento para qualquer plataforma que quiser distribuir, seja web ou nativa. "Programar uma vez, rodar em qualquer lugar" é incrivelmente facil e natural em Cocos2D JS. Com uma única base de códigos em JavaScript você pode rodar seu jogo em navegadores e em plataformas nativas incluindo MacOS, Windows, iOS e Android. Seu jogo pode ser publicado na maioria da lojas de aplicativos como também em outros canais de distribuição.
  • Construct 2: Uma das primeiras game engines em HTML5 com WebGL disponível, exporta para HTML5 e JavaScript puros. Usa apenas Canvas e é extensível atraves de plugins em JavaScript.
  • Div GO: Um engine para desenvolvimento de jogos 2D e 3D, baseada no Div Games Studio. Inclui novas funções e variáveis para melhoras HTML5 e canvas puro. Div Go também trás um ambiente de desenvolvimento integrado com editor de código, lista de processos e funcões, editor gráfico, lista de processos em execução, compilador e gerador/empacotador de projetos.
  • EnchantJS: Um frameowrk simples em JavaScript para a criação de jogos em HTML5 2D e 3D. Também tem boa documentação e tutoriais simples-de-seguir para poder começar.
  • GDevelop: Uma plataforma de desenvolvimento de jogos que exporta para nativo e HTML5. Usa Pixi.js para renderizar projetos como WebGL / canvas.
  • Isogenic Engine: Uma das mais promissoras game engines disponíveis hoje. Tem massively multiplayer networking embutida, usa Node.js e MongoDB no server-side e pode produzir graficos canvas ou baseados no DOM.
  • Impact: Uma game engine em JavaScript que vem com editores e outras ferramentas, produz uma larga variedade de estilos de jogos (ex. 2D e 3D) e pode publicar para web, Android e iOS.
  • Jawa: Uma game engine de aventuras em point'n'click baseadas em navegador, com uma ferramenta de criação muito fácil inclusa. Jogos são exportáveis como objetos de HTML5. Grátis para uso pessoal e educacional.
  • melonJS: A recente e leve engine 2D baseada em sprites com suporte a WebGL e Tiled map.
  • MightyEngine: Uma game engine 2D suportando plataformas Web, Android e iOS. Inclui um editor para gerenciar projetos, assest e mapas.
  • Phaser: Uma game engine 2D suportando plataformas Web, Android e iOS.
  • PlayCanvas: Uma game engine cloud–hosted colaborativa com um editor visual, edição de código no navegador e publicação em um clique.
  • Stage.js: Uma leve e rápida HTML5 2D redering engine para desenvolvimento de jogos cross-platform.
  • Superpowers: Um 2D e 3D colaborativo, open-surce, HTML5 ambiente de desenvolvimeto de jogos usando TypeScript.
  • WiMi5: Um framework online para criar, publicar e monetizar jogos em HTML5. Inclui um editor de scripts visual, logo programação não é obrigatória. Publicação em um clique para diversas lojas de applicativos web. Você também pode baixar seus jogos como zip e publicar on quiser, incluido desktop nativo e plataformas móveis. Integração fácil de compras no app.
  • RPG Maker MV: Essa particular versão da série RPG Maker é construída em JavaScript. Você pode adicionar código customizado ou extensões e lançar projetos como Windows, Mac e aplicação Web. In adição, modelos em estilo anime/manga estão inclusos para uso.
  • visual-js: Essa é uma game engine em JavaScript que esa canvas 2D (native js)/ 3D (three.js). O server-side funciona em Node.js. Usuários Windows podem usar um editor gráfico (game instance creator) com ferramentas visuais (encript , multilanguage , build engine library , build resourse). Teste exemplos da API no jsfiddle. Você pode criar objetos de jogo direto na pagina web (editor mode). Contruir objetos de recurso de imagem com o Node.js. Qualquer applicativo criado nessa game engine funciona em todos os navegadores modernos. 

HTML5 - Ferramentas para jogos

  • Clay.io: Distribuição, retenção, ferramentas de monetização e Social. Fácil integração de contas de usuário, recordes, realizações, promoção cruzada, pagamentos no jogo, análises, etc...
  • Pixi.js: Motor de renderização 2D usando WebGL com um fallback.
  • stat.js: Monitor de desempenho simples em JavaScript.

Tecnologias usadas

A seguir as tecnologias usadas no desenvolvimento de jogos.

  • Canvas: Graficos 2D
  • WebGL: Graficos 3D
  • Audio: HTML5 <audio> elementos, Web Audio API
  • WebSockets: pode ser usado para comunicação em tempo real entre um jogador eo servidor do jogo, para suportar jogos multi-player.
  • Node.js: Node é frequentemente utilizado como um servidor de jogo multiplayer, o controle da lógica e mexer nas ligações WebSockets para os jogadores. Ele pode ser usado para autenticação do jogador e do armazenamento de dados para o jogo pode persistir durante várias sessões de jogo. Isso tudo é relativamente fácil com grandes módulos de terceiros, como Socket.IO para WebSockets, e outros que lidam com Redis e MongoDB para o armazenamento, por exemplo.
  • DOM Storage É ótimo para armazenar dados localmente no dispositivo do jogador. Desta forma, você pode armazenar em cache os dados do jogo e permitir que o jogo retorne  onde o jogador parou.
  • O Full Screen API permite expandir qualquer elemento HTML para preencher a tela do usuário, mesmo se o navegador não está sendo executado em tela cheia em si.
  • Application cache: Uma das principais diferenças entre os aplicativos da Web e aplicativos nativos é que os aplicativos nativos podem ser executados offline. Novas tecnologias, como o cache do aplicativo permitir um website ou uma aplicação Web para armazenar em cache activos necessários para que ele ainda pode executar enquanto offline. Isso inclui coisas como arquivos JavaScript, CSS e imagens. Combinar esta técnica com o uso inteligente de coisas como localStorage permitirá que o seu jogo para continuar a trabalhar, mesmo que a conexão com a Internet cai. Você só sincronizar todas as mudanças quando fica ligado novamente.
  • Emscripten permite portar um jogo escrito em C ou C + + sobre o JavaScript. O jogo Bananabread é baseado em Emscripten.

Não são todos os navegadores que suporta todas as partes do HTML5. Por exemplo, a tela não é suportado out of the box por qualquer Internet Explorer abaixo a versão 9. No entanto, você pode usar o Canvas Explorer para replicar a funcionalidade de tela, mas não é ideal e não funcionar tão bem. WebSockets é suportado pelo IE só no IE 10, e não é compatível com o navegador estoque do Android. Mas, novamente, você pode fingir isso usando o Flash para os soquetes, como com Socket.IO. WebGL também tem suporte irregular com absolutamente nenhum apoio no IE, e Safari e Opera requerem construir um desenvolvimento.

Game template

Você pode usar o modelo Mortar Game Stub  para obter um início rápido em um jogo de HTML5, ou você pode usá-lo para obter idéias sobre as melhores práticas.

Novas APIs

  • O Gamepad API é uma das principais melhorias de entrada que está a chegar. Google e Mozilla estão trabalhando em implementações deste e há realmente uma construção experimental do Firefox disponível para o público que tem que trabalhar. O que é mais interessante sobre o Gamepad API é que ele pode ser apenas o que finalmente justifica jogos HTML5 em uma TV ou console. Quem quer usar um teclado e mouse enquanto está sentado no sofá?
  • O Pointer Lock API É uma tentativa de melhorar o mouse como um dispositivo de entrada. Seria utilizado em situações como jogos e visualizações 3-D em que a posição do mouse gira ou move em torno de um espaço de 3-D. Tal como está, ainda haveria um cursor se movendo ao redor da tela causando todos os tipos de problemas quando você quiser clicar em algo no seu jogo. Com a nova API é possível bloquear a posição do mouse e parar de ficar no caminho e ser um incômodo.

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: elUrso, marcos_oliveira
 Última atualização por: elUrso,