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

Apresentação em tema: "Introdução ao desenvolvimento de jogos educativos HTML5 para o Moodle David Melo da Luz."— Transcrição da apresentação:

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 davidmelo8@gmail.com

9

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 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 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();

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

39

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

41

42

43 CreateJS

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

45 Comparativo das soluções que exportam para HTML5 CaptivateGameMakerConstructUnityPhaserJS Curva de aprendizagem ÓtimoBom média CustoUS$2.139,00U$74,00R$474.00Grátis* U$1500 Grátis FlexibilidadeRuimBom Ótimo DesempenhoRuimRegular ÓtimoBom Integação com moodle ÓtimoFácil DifícilFácil Experiência Mobile Regular BoaÓtimo Permite fluxo de produção Multidisciplinar RegularBom Ó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.comdavidmelo8@gmail.com