Post on 16-Apr-2017
Introdução ao desenvolvimento de jogos educativos HTML5 para o Moodle
David Melo da Luz
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
Meus projetos pessoais
Plataforma de educação infantil Escola de design intrucional
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.
Quem são vocês?
Quem aqui já fez jogos educativos digitais?
Profissionais de EAD? Designers instrucionais?Administradores de sistemas/moodle?Programadores?
Temos que ser rápidos...
Mas fiquem a vontade para contatar em caso de dúvidas
Mas fiquem a vontade para contatar em caso de dúvidas
davidmelo8@gmail.com
Objetivo Geral
Que vocês saiam daqui com várias ideias de como produzir jogos educativos.
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.
Muito importante!O jogo pode ser um objeto de curso, o jogo pode ser o curso.
Podemos apenas utilizar elementos de gameficação.
Jogos HTML5
Jogos HTML5Sã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 de integrar• Desenvolvimento não exige
necessariamente o uso de nenhum software específico.
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
Canvasvar ctx = document.getElementById("meucanvas").getContext("2d");
WebGLvar gl = document.getElementById("meucanvas").getContext("webgl");
Eu, em 2010, recebendo a notícia que o HTML implementaria o elemento canvas que permitiria o desenvolvimento de jogos sem plugins de navegador...
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>
APIs Canvas e WebGL são genéricas –
Não foram feitas exclusivamente para jogos
Conhecer o fluxo de desenvolvimento de um jogoeducativo profissional em html5.
Objetivo 1
1. Elaboração do conteúdo bruto (quando não existe).
Fluxo de produção de um game
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
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
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
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
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
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
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
Conhecer quais são os instrumentos necessários para a construção de um jogo educativo html5.
Objetivo 2
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
3 Maneiras mais comuns de produzir jogos educativos em HTML5
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
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
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.
Fazer um comparativo entre as principais soluções existentes no mercado (2015).
Objetivo 3
Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
Adobe Captivate Articulate
Maneira 2 – Utilizando Softwares autorais para Games.
Maneira 2 – Utilizando Softwares autorais para Games.
Maneira 2 – Utilizando Softwares autorais para Games.
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
CreateJS
Maneira 3 – Utilizando bibliotecas, frameworks e plug-ins javascript
Phaser.JS
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
Conhecer alternativas para disponibilizar/e ou integrar um jogo HTML5 no Moodle.
Objetivo 4
Como integrar com o Moodle?
Existem 2 maneiras
Maneira muito fácil: Embedar no HTML de qualquer página no (página, lição, tarefa e etc).
Maneira fácil: empacotar como recurso Scorm
Template limpo disponível em:github.com/davidluz/scormJSTemplate
Já acabou?
Exemplo prático de integração com Moodle
Discussão e dúvidas