Um comparativo entre engines JavaScript para o
desenvolvimento de games HTML5
David Melo da Luz
Sobre mim
David Melo da Luz
MBA em Engenharia de Software
IBTA – Instituto Brasileiro de Tecnologia Avançada (Atualmente)
...
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 p...
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 ob...
State
Representa um estado específico do jogo ( seta por exemplo valores de variáveis ).
No contexto dos games é utilizado...
Asset
s
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 HTML5
Sã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 d...
O canvas é o elemento “novo” do HTML que permite “desenhar
dinâmicamente” usando javascript. Como esse desenho é feito
dep...
Canvas
var ctx = document.getElementById("meucanvas").getContext("2d");
WebGL
var gl = document.getElementById("meucanvas"...
Eu, em 2010, recebendo a
notícia que o HTML
implementaria o elemento
canvas que permitiria o
desenvolvimento de jogos sem
...
Eu descobrindo como
desenhar um quadrado
amarelo estático no navegador
usando o Canvas
<canvas id="myCanvas" width="578" h...
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
• Ab...
Comparando as melhores
games engines disponíveis
atualmente
CREATE JS
Outras soluções (usam libs de javascript – m
abstraem muito mais a parte de código do
desenvolvedor).
Exemplo prático com PhaserJS
Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz
Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz
Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz
Próximos SlideShares
Carregando em…5
×

Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz

331 visualizações

Publicada em

Slides da apresentação realizada em 14/11/2015 no 2º SorocabaJS - David Melo da Luz

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
331
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Porque eles são importantes
  • Porque eles são importantes
  • Porque eles são importantes
  • Quem sou eu

    Falar de como cheguei aqui
    DevNaEstrada
    Estou aqui para aprender, desculpe qualquer bobagem
  • Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz

    1. 1. Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 David Melo da Luz
    2. 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. 3. Meus projetos pessoais Plataforma de educação especial Escola de design intrucional
    4. 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. 5. Como vim para aqui...
    6. 6. Vamos ao que interessa...
    7. 7. Alguém aqui faz/já fez jogo usando javascript?
    8. 8. Objetivo dessa apresentação Entender como escolher a melhor game engine dependendo do nosso contexto
    9. 9. Principais conceitos de programação de jogos
    10. 10. De forma BEM GERAL existem basicamente 2 estilos de programação de jogos • Orientado a eventos • Baseado em frames
    11. 11. Orientado a eventos Muito parecida com programação pra web
    12. 12. Implementam o conceito de Game loop Baseado em frames
    13. 13. Game Loop
    14. 14. Fonte: tutsplus
    15. 15. Game ObjectÉ geralmente a menor unidade de um jogo – é a abstração mais ampla de um componente em um jogo.
    16. 16. Game World É geralmente um objeto de jogo abstrato utilizado para controlar os eventos gerais - não associados a nenhum objeto específico.
    17. 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. 18. Asset s São recursos externos e necessários ao jogo ( sprites, música, textura, vídeo e etc).
    19. 19. Por que falei destes conceitos?
    20. 20. Por que o contexto importa?
    21. 21. Outras características importantes... • Física • Partículas • Animações • Áudio
    22. 22. Jogos HTML5
    23. 23. Jogos HTML5 São jogos que rodam utilizando tecnologias nativas do navegador
    24. 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. 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. 26. Canvas var ctx = document.getElementById("meucanvas").getContext("2d"); WebGL var gl = document.getElementById("meucanvas").getContext("webgl");
    27. 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. 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. 29. APIs Canvas e WebGL são genéricas – Não foram feitas exclusivamente para jogos
    30. 30. Frameworks para games HTML5 (game engines javascript)
    31. 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. 32. Comparando as melhores games engines disponíveis atualmente
    33. 33. CREATE JS
    34. 34. Outras soluções (usam libs de javascript – m abstraem muito mais a parte de código do desenvolvedor).
    35. 35. Exemplo prático com PhaserJS

    ×