Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David...
-
Upload
david-luz -
Category
Technology
-
view
390 -
download
1
Transcript of Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David...
![Page 1: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/1.jpg)
Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5
David Melo da Luz
![Page 2: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/2.jpg)
Sobre mimDavid 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 instrucionalFundação Padre Anchieta (TV Cultura)
Consultor Plataforma Geekie
![Page 3: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/3.jpg)
Meus projetos pessoais
Plataforma de educação especial Escola de design intrucional
![Page 4: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/4.jpg)
O que é faço hoje exatamente ?
Jogos e objetos de aprendizagem para EAD e Elarning( famoso joguinho educativo)
Jogo das placas Detran.SP Regaste SolidariunsSecretaria Educação Estado SP joANNINHA
SP GameJAM 2015
![Page 5: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/5.jpg)
Como vim para aqui...
![Page 6: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/6.jpg)
Vamos ao que interessa...
![Page 7: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/7.jpg)
Alguém aqui faz/já fez jogo usando javascript?
![Page 8: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/8.jpg)
Objetivo dessa apresentação
Entender como escolher a melhor game engine dependendo do nosso contexto
![Page 9: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/9.jpg)
Principais conceitos de programação de jogos
![Page 10: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/10.jpg)
De forma BEM GERAL existem basicamente 2 estilos de programação de jogos:
• Orientado a eventos
• Baseado em frames
![Page 11: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/11.jpg)
Orientado a eventos
Muito parecida com programação pra web
![Page 12: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/12.jpg)
Implementam o conceito de Game loop
Baseado em frames
![Page 13: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/13.jpg)
Game Loop
![Page 14: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/14.jpg)
Fonte: tutsplus
![Page 15: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/15.jpg)
Game ObjectÉ geralmente a menor unidade de um jogo – é a abstração mais ampla de um
componente em um jogo.
![Page 16: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/16.jpg)
Game WorldÉ geralmente um objeto de jogo abstrato utilizado para controlar os eventos gerais
- não associados a nenhum objeto específico.
![Page 17: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/17.jpg)
StateRepresenta um estado específico do jogo ( seta por exemplo valores de variáveis ).
No contexto dos games é utilizado para implementar mudanças de fases.
![Page 18: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/18.jpg)
Assets
São recursos externos e necessários ao jogo ( sprites, música, textura, vídeo e etc).
![Page 19: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/19.jpg)
Por que falei destes conceitos?
![Page 20: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/20.jpg)
Por que o contexto importa?
![Page 21: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/21.jpg)
Outras características importantes...• Física• Partículas• Animações• Áudio
![Page 22: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/22.jpg)
Jogos HTML5
![Page 23: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/23.jpg)
Jogos HTML5São jogos que rodam utilizando tecnologias nativas do navegador
![Page 24: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/24.jpg)
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.
![Page 25: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/25.jpg)
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
![Page 26: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/26.jpg)
Canvasvar ctx = document.getElementById("meucanvas").getContext("2d");
WebGLvar gl = document.getElementById("meucanvas").getContext("webgl");
![Page 27: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/27.jpg)
Eu, em 2010, recebendo a notícia que o HTML implementaria o elemento canvas que permitiria o desenvolvimento de jogos sem plugins de navegador...
![Page 28: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/28.jpg)
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>
![Page 29: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/29.jpg)
APIs Canvas e WebGL são genéricas –
Não foram feitas exclusivamente para jogos
![Page 30: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/30.jpg)
Frameworks para games HTML5
(game engines javascript)
![Page 31: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/31.jpg)
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
![Page 32: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/32.jpg)
Comparando as melhores games engines disponíveis
atualmente
![Page 33: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/33.jpg)
![Page 34: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/34.jpg)
![Page 35: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/35.jpg)
![Page 36: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/36.jpg)
CREATE JS
![Page 37: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/37.jpg)
Outras soluções (usam libs de javascript – masabstraem muito mais a parte de código dodesenvolvedor).
![Page 38: Um comparativo entre engines JavaScript para o desenvolvimento de games HTML5 - SorocabaJS - David Luz](https://reader035.fdocument.pub/reader035/viewer/2022070519/58f2c1e81a28ab2f028b456b/html5/thumbnails/38.jpg)
Exemplo prático com PhaserJS