Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

557 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×