Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )

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

[email protected]

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.


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


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


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


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


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


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


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 2 – Utilizando Softwares autorais para Games




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






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


Adobe Captivate Articulate

Maneira 2 – Utilizando Softwares autorais para Games.


CreateJS


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

Contato: [email protected]

mailto:[email protected]

Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )

Education

Transcript of Introdução ao desenvolvimento de jogos educativos HTML5 ( MoodleMoot Brasília 2015 )