introdução ao desenvolvimento de jogos educativos html5 ( moodlemoot brasília 2015 )
TRANSCRIPT
![Page 1: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/1.jpg)
Introdução ao desenvolvimento de jogos educativos HTML5 para o Moodle
David Melo da Luz
![Page 2: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/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: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/3.jpg)
Meus projetos pessoais
Plataforma de educação infantil Escola de design intrucional
![Page 4: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/4.jpg)
O que é faço hoje exatamente?
Jogo das placas Detran.SPRegaste Solidariuns
Secretaria Educação Estado SPJô ANNINHA
SP GameJAM 2015
Jogos e objetos de aprendizagem para e-learning e EaD.
![Page 5: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/5.jpg)
Quem são vocês?
Quem aqui já fez jogos educativos digitais?
Profissionais de EAD? Designers instrucionais?Administradores de sistemas/moodle?Programadores?
![Page 6: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/6.jpg)
Temos que ser rápidos...
![Page 7: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/7.jpg)
Mas fiquem a vontade para contatar em caso de dúvidas
![Page 9: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/9.jpg)
![Page 10: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/10.jpg)
Objetivo Geral
Que vocês saiam daqui com várias ideias de como produzir jogos educativos.
![Page 11: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/11.jpg)
Objetivos específicos
1. Conhecer o fluxo de desenvolvimento de um jogo educativo profissional em html5.
2. Conhecer quais são os instrumentos necessários para a construção de um jogo educativo.
3. Fazer um comparativo entre as principais soluções existentes no mercado (2015).
4. Conhecer alternativas para disponibilizar/e ou integrar um jogo HTML5 no Moodle.
![Page 12: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/12.jpg)
Muito importante!O jogo pode ser um objeto de curso, o jogo pode ser o curso.
Podemos apenas utilizar elementos de gameficação.
![Page 13: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/13.jpg)
Jogos HTML5
![Page 14: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/14.jpg)
Jogos HTML5São jogos que rodam utilizando tecnologias nativas do navegador
![Page 15: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/15.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 16: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/16.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 17: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/17.jpg)
Canvasvar ctx = document.getElementById("meucanvas").getContext("2d");
WebGLvar gl = document.getElementById("meucanvas").getContext("webgl");
![Page 18: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/18.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 19: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/19.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 20: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/20.jpg)
APIs Canvas e WebGL são genéricas –
Não foram feitas exclusivamente para jogos
![Page 21: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/21.jpg)
Conhecer o fluxo de desenvolvimento de um jogoeducativo profissional em html5.
Objetivo 1
![Page 22: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/22.jpg)
1. Elaboração do conteúdo bruto (quando não existe).
Fluxo de produção de um game
![Page 23: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/23.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.
Fluxo de produção de um game
![Page 24: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/24.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.3. Desenvolvimento do documento de High concept
Fluxo de produção de um game
![Page 25: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/25.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.3. Desenvolvimento do documento de High concept4. Desenvolvimento do Game Design Document (GDD).
Fluxo de produção de um game
![Page 26: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/26.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.3. Desenvolvimento do documento de High concept4. Desenvolvimento do Game Design Document (GDD).5. Produção dos Assets
Fluxo de produção de um game
![Page 27: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/27.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.3. Desenvolvimento do documento de High concept4. Desenvolvimento do Game Design Document (GDD).5. Produção dos Assets6. Produção Game
Fluxo de produção de um game
![Page 28: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/28.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.3. Desenvolvimento do documento de High concept4. Desenvolvimento do Game Design Document (GDD).5. Produção dos Assets6. Produção Game7. Testes
Fluxo de produção de um game
![Page 29: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/29.jpg)
1. Elaboração do conteúdo bruto (quando não existe).2. Definição dos objetivos de aprendizagem.3. Desenvolvimento do documento de High concept4. Desenvolvimento do Game Design Document (GDD).5. Produção dos Assets6. Produção Game7. Testes8. Publicação
Fluxo de produção de um game
![Page 30: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/30.jpg)
Conhecer quais são os instrumentos necessários para a construção de um jogo educativo html5.
Objetivo 2
![Page 31: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/31.jpg)
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
3 Maneiras mais comuns de produzir jogos educativos em HTML5
![Page 32: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/32.jpg)
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Maneira 2 – Utilizando Softwares autorais para Games
3 Maneiras mais comuns de produzir jogos educativos em HTML5
![Page 33: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/33.jpg)
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Maneira 2 – Utilizando Softwares autorais para Games
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
3 Maneiras mais comuns de produzir jogos educativos em HTML5
![Page 34: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/34.jpg)
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Maneira 2 – Utilizando Softwares autorais para Games
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
3 Maneiras mais comuns de produzir jogos educativos em HTML5
No próximo item vou descrever as vantagens e desvantagens de cada uma destas maneiras.
![Page 35: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/35.jpg)
Fazer um comparativo entre as principais soluções existentes no mercado (2015).
Objetivo 3
![Page 36: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/36.jpg)
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Adobe Captivate Articulate
![Page 37: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/37.jpg)
Maneira 2 – Utilizando Softwares autorais para Games.
![Page 38: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/38.jpg)
Maneira 2 – Utilizando Softwares autorais para Games.
![Page 39: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/39.jpg)
Maneira 2 – Utilizando Softwares autorais para Games.
![Page 40: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/40.jpg)
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
![Page 41: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/41.jpg)
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
![Page 42: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/42.jpg)
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
![Page 43: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/43.jpg)
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
CreateJS
![Page 44: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/44.jpg)
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
Phaser.JS
![Page 45: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/45.jpg)
Comparativo das soluções que exportam para HTML5Captivate GameMaker Construct Unity PhaserJS
Curva de aprendizagem
Ótimo Bom Bom média média
Custo US$2.139,00 U$74,00 R$474.00 Grátis*U$1500
Grátis
Flexibilidade Ruim Bom Bom Ótimo Ótimo
Desempenho Ruim Regular Regular Ótimo Bom
Integação com moodle
Ótimo Fácil Fácil Difícil Fácil
ExperiênciaMobile
Regular Regular Boa Ótimo Ótimo
Permite fluxo de produção
Multidisciplinar
Regular Bom Bom Ótimo Ótimo
![Page 46: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/46.jpg)
Conhecer alternativas para disponibilizar/e ou integrar um jogo HTML5 no Moodle.
Objetivo 4
![Page 47: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/47.jpg)
Como integrar com o Moodle?
![Page 48: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/48.jpg)
Existem 2 maneiras
![Page 49: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/49.jpg)
Maneira muito fácil: Embedar no HTML de qualquer página no (página, lição, tarefa e etc).
![Page 50: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/50.jpg)
Maneira fácil: empacotar como recurso Scorm
Template limpo disponível em:github.com/davidluz/scormJSTemplate
![Page 51: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/51.jpg)
Já acabou?
![Page 52: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/52.jpg)
Exemplo prático de integração com Moodle
![Page 53: Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )](https://reader035.vdocuments.net/reader035/viewer/2022062401/58701e1c1a28ab7f428b74df/html5/thumbnails/53.jpg)
Discussão e dúvidas