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.
Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz
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
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
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.
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
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