Palestra realizada no dia 28/11/2015 na 11ª Edição do MoodleMoot (Brasília)

1. Introdução ao desenvolvimento
de jogos educativos HTML5 para o Moodle
David Melo da Luz

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. Meus projetos pessoais
Plataforma de educação infantil Escola de
design intrucional

4. O que é faço hoje exatamente?
Jogo das placas Detran.SP
Regaste Solidariuns
Secretaria Educação Estado SP
Jô ANNINHA
SP GameJAM 2015
Jogos e objetos de aprendizagem para e-learning e EaD.

5. Quem são vocês?
Quem aqui já fez jogos educativos digitais?
Profissionais de EAD?
Designers instrucionais?
Administradores de sistemas/moodle?
Programadores?

6. Temos que ser rápidos...

7. Mas fiquem a vontade para contatar em caso de dúvidas

8. Mas fiquem a vontade para contatar em caso de dúvidas
davidmelo8@gmail.com

10. Objetivo Geral
Que vocês saiam daqui com várias ideias de como
produzir jogos educativos.

11. 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.

12. Muito importante!
O jogo pode ser um objeto de curso, o jogo pode ser o curso.
Podemos apenas utilizar elementos de gameficação.

13. Jogos HTML5

14. Jogos HTML5
São jogos que rodam utilizando tecnologias nativas do navegador

15. 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.

16. 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

17. Canvas
var ctx = document.getElementById("meucanvas").getContext("2d");
WebGL
var gl = document.getElementById("meucanvas").getContext("webgl");

18. Eu, em 2010, recebendo a
notícia que o HTML
implementaria o elemento
canvas que permitiria o
desenvolvimento de jogos sem
plugins de navegador...

19. 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>

20. APIs Canvas e WebGL são genéricas –
Não foram feitas exclusivamente para
jogos

21. Conhecer o fluxo de desenvolvimento de um jogo
educativo profissional em html5.
Objetivo 1

22. 1. Elaboração do conteúdo bruto (quando não existe).
Fluxo de produção de um game

23. 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

24. 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

25. 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
4. Desenvolvimento do Game Design Document (GDD).
Fluxo de produção de um game

26. 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
4. Desenvolvimento do Game Design Document (GDD).
5. Produção dos Assets
Fluxo de produção de um game

27. 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
4. Desenvolvimento do Game Design Document (GDD).
5. Produção dos Assets
6. Produção Game
Fluxo de produção de um game

28. 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
4. Desenvolvimento do Game Design Document (GDD).
5. Produção dos Assets
6. Produção Game
7. Testes
Fluxo de produção de um game

29. 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
4. Desenvolvimento do Game Design Document (GDD).
5. Produção dos Assets
6. Produção Game
7. Testes
8. Publicação
Fluxo de produção de um game

30. Conhecer quais são os instrumentos necessários
para a construção de um jogo educativo html5.
Objetivo 2

31. Maneira 1 – Utilizando Softwares autorais de EaD e e-learning
3 Maneiras mais comuns de
produzir jogos educativos em HTML5

32. 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

33. 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

34. 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.

35. Fazer um comparativo entre as principais soluções
existentes no mercado (2015).
Objetivo 3

36. Maneira 1 – Utilizando Softwares autorais de EaD
e e-learning
Adobe Captivate Articulate

37. Maneira 2 – Utilizando Softwares autorais para
Games.

38. Maneira 2 – Utilizando Softwares autorais para
Games.

39. Maneira 2 – Utilizando Softwares autorais para
Games.

40. Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript

41. Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript

42. Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript

43. Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
CreateJS

44. Maneira 3 – Utilizando bibliotecas, frameworks e
plug-ins javascript
Phaser.JS

45. Comparativo das soluções que exportam para HTML5
Captivate 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ência
Mobile
Regular Regular Boa Ótimo Ótimo
Permite fluxo de
produção
Multidisciplinar
Regular Bom Bom Ótimo Ótimo

46. Conhecer alternativas para disponibilizar/e ou
integrar um jogo HTML5 no Moodle.
Objetivo 4

47. Como integrar com o Moodle?

48. Existem 2 maneiras

49. Maneira muito fácil: Embedar no HTML de
qualquer página no (página, lição, tarefa e etc).

50. Maneira fácil: empacotar como recurso Scorm
Template limpo disponível em:
github.com/davidluz/scormJSTemplate

51. Já acabou?

52. Exemplo prático de integração
com Moodle

53. Discussão e dúvidas

54. Contato: davidmelo8@gmail.com