Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

559 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×