O documento apresenta uma comparação entre principais engines JavaScript para desenvolvimento de jogos HTML5, discutindo conceitos de programação de jogos, características importantes e vantagens das engines. Apresenta exemplos práticos utilizando a engine PhaserJS.

1. Um comparativo entre engines JavaScript para o
desenvolvimento de games HTML5
David Melo da Luz

2. Sobre mim
David 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 instrucional
Fundação Padre Anchieta (TV Cultura)
Consultor
Plataforma Geekie

3. Meus projetos pessoais
Plataforma de educação especial Escola de
design intrucional

4. O que é faço hoje exatamente ?
Jogos e objetos de aprendizagem para EAD e Elarning
( famoso joguinho educativo)
Jogo das placas Detran.SP
Regaste Solidariuns
Secretaria Educação Estado SP
joANNINHA
SP GameJAM 2015

5. Como vim para
aqui...

6. Vamos ao que
interessa...

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

8. Objetivo dessa apresentação
Entender como escolher a melhor game engine
dependendo do nosso contexto

9. Principais conceitos de programação de jogos

10. De forma BEM GERAL existem basicamente 2 estilos de programação de jogos
• Orientado a eventos
• Baseado em frames

11. Orientado a eventos
Muito parecida com programação pra web

12. Implementam o conceito de Game loop
Baseado em frames

13. Game Loop

14. Fonte: tutsplus

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

16. Game World
É geralmente um objeto de jogo abstrato utilizado para controlar os eventos gerais
- não associados a nenhum objeto específico.

17. State
Representa um estado específico do jogo ( seta por exemplo valores de variáveis ).
No contexto dos games é utilizado para implementar mudanças de fases.

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

19. Por que falei destes conceitos?

20. Por que o contexto importa?

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

22. Jogos HTML5

23. Jogos HTML5
São jogos que rodam utilizando tecnologias nativas do navegador

24. 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.

25. 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

26. Canvas
var ctx = document.getElementById("meucanvas").getContext("2d");
WebGL
var gl = document.getElementById("meucanvas").getContext("webgl");

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

28. 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>

29. APIs Canvas e WebGL são genéricas –
Não foram feitas exclusivamente para
jogos

30. Frameworks para games HTML5
(game engines javascript)

31. 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

32. Comparando as melhores
games engines disponíveis
atualmente

36. CREATE JS

37. Outras soluções (usam libs de javascript – m
abstraem muito mais a parte de código do
desenvolvedor).

38. Exemplo prático com PhaserJS