Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5

David Melo da Luz

Sobre mimDavid Melo da Luz

MBA em Engenharia de Software IBTA – Instituto Brasileiro de Tecnologia Avançada (Atualmente)

Pós graduação em Programação e produção de jogos Serviço Nacional de Aprendizagem Comercial – SENAC SP

Graduação em Psicologia Pontifícia Universidade Católica de São Paulo (PUC-SP)

Últimos trabalhos formais:

Consultor em tecnologia | Designer instrucional (Atual) Fundação Vanzolini

Designer instrucionalFundação Padre Anchieta (TV Cultura)

Consultor Plataforma Geekie

Meus projetos pessoais

Plataforma de educação especial Escola de design intrucional

O que é faço hoje exatamente ?

Jogos e objetos de aprendizagem para EAD e Elarning( famoso joguinho educativo)

Jogo das placas Detran.SP Regaste SolidariunsSecretaria Educação Estado SP joANNINHA

SP GameJAM 2015

Como vim para aqui...

Vamos ao que interessa...

Alguém aqui faz/já fez jogo usando javascript?

Objetivo dessa apresentação

Entender como escolher a melhor game engine dependendo do nosso contexto

Principais conceitos de programação de jogos

De forma BEM GERAL existem basicamente 2 estilos de programação de jogos:

• Orientado a eventos

• Baseado em frames

Orientado a eventos

Muito parecida com programação pra web

Implementam o conceito de Game loop

Baseado em frames

Game Loop

Fonte: tutsplus

Game ObjectÉ geralmente a menor unidade de um jogo – é a abstração mais ampla de um

componente em um jogo.

Game WorldÉ geralmente um objeto de jogo abstrato utilizado para controlar os eventos gerais

- não associados a nenhum objeto específico.

StateRepresenta um estado específico do jogo ( seta por exemplo valores de variáveis ).

No contexto dos games é utilizado para implementar mudanças de fases.

Assets

São recursos externos e necessários ao jogo ( sprites, música, textura, vídeo e etc).

Por que falei destes conceitos?

Por que o contexto importa?

Outras características importantes...• Física• Partículas• Animações• Áudio

Jogos HTML5

Jogos HTML5São jogos que rodam utilizando tecnologias nativas do navegador

Principais vantagens• Rodam diretamente no navegador• Não depende de plugins de terceiros• São portáveis • São fáceis de integrar• Desenvolvimento não exige

necessariamente o uso de nenhum software específico.

O canvas é o elemento “novo” do HTML que permite “desenhar dinâmicamente” usando javascript. Como esse desenho é feito depende do contexto (context) utilizado.

Atualmente existem dois contextos disponíveis: 2D e WebGl. Cada um deles é um objeto que expõe uma API diferente que pode ser usada para desenhar ( o canvas 2D, e o WebGL3D).

Elemento Canvas

Canvasvar ctx = document.getElementById("meucanvas").getContext("2d");

WebGLvar gl = document.getElementById("meucanvas").getContext("webgl");

Eu, em 2010, recebendo a notícia que o HTML implementaria o elemento canvas que permitiria o desenvolvimento de jogos sem plugins de navegador...

Eu descobrindo como desenhar um quadrado amarelo estático no navegador usando o Canvas

<canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');

context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke(); </script>

APIs Canvas e WebGL são genéricas –

Não foram feitas exclusivamente para jogos

Frameworks para games HTML5

(game engines javascript)

Vantagens

• Implementam recursos focados em jogos (citados anteriormente).

• Simplificam e aceleram o desenvolvimento• Abstraem tarefas extremamente difíceis• Tornam o desenvolvimento de jogos acessível

Comparando as melhores games engines disponíveis

atualmente

CREATE JS

Outras soluções (usam libs de javascript – masabstraem muito mais a parte de código dodesenvolvedor).

Exemplo prático com PhaserJS