Plano de Trabalho

Identificação
Nome do acadêmico: HEITOR CAMESCHI || GABRIEL BARRETO
E-mail: heitorcameschi@gmail.com
Curso/Instituição/Campus: TECNOLOGIA EM SISTEMAS PARA INTERNET
Telefones: (67) 9207-8509
Nome do Orientador:
E-mail:
Curso/Instituição/Campus:
Telefones:

Nome do Co-orientador:
E-mail:
Curso/Instituição/Campus:
Telefones:

Dados do Projeto

Título: Brainstorm – Desenvolvimento de jogo em HTML5

I – Introdução
Atualmente a Internet é o maior veículo de comunicação livre global. Castells
(2003) em sua obra compara a Internet como a veia fundamental que move esta era,
tal qual a eletricidade foi o marco fundamental na Era Industrial. Esta não é uma
comparação exagerada. Megatendências de mercado, atividades econômicas,
sociais e culturais são disseminadas e estruturadas através da Internet, para a
Internet e ao redor da Internet.
Podemos notar sua importância nos baseando em números de pesquisa. O
autor, ainda citando Castells, contextualiza a expansão colossal da Internet dentre
1995, quando fora disseminada pela primeira vez e contava com 19 milhões de
usuários, e 2001, dois anos antes da publicação de seu livro, quando a quantia de
internautas superava a margem de 400 milhões.
Atualmente, no último relatório da União Internacional de Telecomunicações
(UIT), o MIS Report (Measuring the Information Society) de 2013, é demonstrado que
2,7 bilhões de pessoas estejam conectadas à Internet. O registro de 6,8 bilhões de
assinaturas para telefones celulares (quase o número total de pessoas no planeta), o
que monta uma perspectiva média de 2,1 bilhões de assinaturas para banda larga
móvel (tratada separadamente no relatório). A união dos dados aponta para quase
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
50% da população global conectada a uma rede 3G.
No Brasil os números também surpreendem. Segundo a 25ª Pesquisa Anual
de Uso de Tecnologia da Informação, realizada pela Fundação Getulho Vargas (FGV
- EAESP - CIA) em 2014, atualmente a população de computadores ativos no Brasil
é de 136 milhões de unidades, ou seja, aproximadamente 67% da população
nacional, e este número poderá chegar a 200 milhões em 2016. Ainda segundo a
FGV, o número de smartphones ultrapassa os 320 milhões, o que supera a marca de
200 milhões aproximados de habitantes, chegando a incríveis 158% da população.
Estes números são incríveis principalmente pelo fato de ultrapassar a média de
mercado mundial. Segundo Tonin (2012), em uma pesquisa de mercado norte-
americano, apenas 44% da população de consumidores ativos na internet possui
smartphones.
Com este avanço exponencial da tecnologia, diversos sistemas operacionais
surgem, oriundos de empresas rivais de mercado. Como exemplo temos o Windows
Phone da Microsoft, baseado em C#, o Android do Google, baseado em Java, e o
Mac iOS da Apple, totalmente em Objective-C. Isso tratando apenas de tecnologia
móvel. Toledo e De Deus (2012) demonstram a necessidade de encontrar uma linha
de codificação que possa ser interpretada em qualquer uma destas plataformas
utilizando aplicações web. Uma das opções válidas é o HTML5, que propicia
inclusive salvar dados em cache, até mesmo uma aplicação completa, permitindo
que a mesma permaneça funcionando mesmo sem a conexão com a Internet. Isto
inclui os jogos.
Santee (2005) ressalta o desenvolvimento de jogos na linguagem C/C++,
afirmando que 90% do mercado de jogos eletrônicos, desde Tetris até poderosas
engines, citando Doom III da Idsoftware. Este tipo de aplicativo é extremamente
poderoso, mas exige instalação e presença de bibliotecas externas ao jogo para
funcionar, como por exemplo o interpretador físico/semântico DirectX. Apesar disso,
há diversos trabalhos de desenvolvedores que apostam no HTML5, abandonando a
complexidade de gráficos pesados em troca de portabilidade total. O intuito deste
projeto é demonstrar esta possibilidade.
1.1 – Trabalhos relacionados
Bispo (2012) articula sobre seu projeto de desenvolvimento de jogo
educacional utilizando o HTML5 e o DHTML (Linguagem Dinâmica de Marcação de
Hipertexto - Dynamic HyperText Markup Language) basicamente para todo o
esqueleto fundamental do projeto, utilizando principalmente a ferramenta canvas,
disponível na versão atual do HTML. Como linguagem de programação fora utilizado
o Javascript, tornando seu trabalho muito semelhante ao que estamos para
apresentar, com uma diferença: o foco do trabalho apresentado está na concepção
de layout e interface, enquanto o presente pretende abordar o código em si.
Prado (2012) tem por base o HTML5, unânime dentre os desenvolvedores
web, mas apresenta uma alternativa para trabalhar o Javascript, o framework GWT
(Google Web Toolkit). Esta ferramenta baseada em Java fornece abstração do
Javascript, ou seja, o conteúdo do código não é acessível pelo usuário, e
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
portabilidade, uma vez que quando compilado, o próprio GWT gera versões
específicas do aplicativo para cada tipo de navegador e suas versões anteriores. A
diferença deste para o nosso projeto é que não pretendemos utilizar códigos em
Java, e o framework GWT é baseado nesta linguagem. O modelo de trabalho, no
entanto, coincide com nossa prática metodológica, apresentando métodos principais
e linhas de destaque de código.
Harbs (2013) traz, além do básico HTML5 e Javascript, a biblioteca simuladora
de física Box2DJS para aplicações web, desenvolvida originalmente em C++, código
aberto. Para provar sua proposta, Harbs desenvolve um aplicativo onde o usuário
pode brincar com as peças de Tangram, brevemente explanado, já que seu trabalho
foca em sistemas motores de jogos 2D para web, diferente do presente aqui
apresentado, coincidindo apenas na escolha do Box2DJS como simulador de física, e
seu formato de apresentação de diagramas UML (Unified Modeling Language) que
nos serviu como inspiração para a apresentação deste projeto.
1.2 – Justificativa
Como demonstrado, o mercado de softwares fervilha no quesito Internet, uma
expansão exponencial, mas ainda obscura em alguns ramos específicos. Itakura
(2002) define o conceito chave para todo tipo de aplicação a usabilidade, e que para
medir o sucesso de um aplicativo, deve-se notar a precisão e eficácia com as quais o
usuário avança no software, e o quanto de recursos ele demanda até sua finalização.
Itakura e Vergilio (2002) utilizam a normativa ISO 9241 - 11 (2002, p 462 apud ISO
9241-11, 1998) para definir esta usabilidade, sendo esta "o grau no qual um dado
usuário utiliza o sistema em um contexto específico para atingir seus objetivos com
eficácia, eficiência e satisfação".
Nossa meta é desenvolver um jogo que apresente portabilidade, utilizando
HTML5, CSS e Javascript, além de um framework que se adapte aos nossos
quesitos. Para tanto existem diversas ferramentas disponíveis no mercado, nem
todas gratuitas, como o conceituado ImpactJS. Impact é um motor que viabiliza a
construção de aplicações web e desktop, sendo aceita em todos os navegadores do
mercado (IMPACT, 2013). Esta ferramenta, assim como a grande maioria das
disponíveis no mercado, abstrai várias partes do desenvolvimento, em prol de um
processo acelerado de prototipação, e aí temos um problema comum nos motores de
criação para web.
Em geral, estas ferramentas simplificam muito o processo de codificação,
utilizando recursos ágeis como o drag and drop, ferindo alguns de nossos princípios
dentro deste projeto, afinal, é necessário aplicar os conhecimentos adquiridos
durante o curso no desenvolvimento, junto à capacidade de expandir as fronteiras do
saber através da pesquisa e aplicação.

II – Objetivos
2.1 – Geral

Disciplina Projeto Integrador – 4º semeste

Profa. Me. Marilyn Matos
 Desenvolver um jogo em plataforma que necessite apenas de um navegador
comum, conexão com a Internet e um dispositivo de entrada coerente (teclado) para
ser utilizado.
2.2 – Específicos
· Desenvolver a aplicação completamente em HTML, CSS e Javascript;
· Utilizar o sistema de passwords como substituto ao modelo de login, comum
entre jogos web;
· Desenvolver um sistema de física coerente, com gravidade, colisões e
reconhecimento de plataforma;
· Modelar um sistema que permita a utilização de pontos de vida e energia,
semelhante a jogos clássicos como The Legend of Zelda (MIYAMOTO, 1986)
e Castlevania (NAGATA, 1986);
· Utilizar apenas recursos gráficos próprios.

III- Metodologia
A metodologia está dividida em oito partes básicas: planejamento prévio,
criação gráfica, desenvolvimento da física básica do jogo, desenvolvimento do
sistema de combates do jogo, inteligência artificial, arquitetura de estágios,
desenvolvimento de chefes de fases e seleção final de recursos.
3.1 – Planejamento Prévio
O modelo de gerenciamento de projeto utilizado para o desenvolvimento deste
projeto será o SCRUM (TAKEUCHI e NO-NAKA, 2008), mediante aos requisitos
humanos no desenvolvimento (equipe de dois desenvolvedores e poucos convidados
para o desenvolvimento da parte gráfica). A metodologia das sprints serve
perfeitamente à forma ágil que será mantida no processo, sendo mantidas em prazos
semanais. O ciclo de vida de software escolhido será o modelo de Prototipagem
Evolucionária, seguindo o modelo resumido de Soares (2007).
3.1.1 - Análise de requisitos
A análise de requisitos funcionais deverá ser dividida em análise para o
personagem, para o sistema de física e uma terceira contendo os aspectos gerais do
jogo, funcionais e não funcionais. Estes documentos podem ser visualizados nos
apêndices I - Análise de requisitos de personagem, II - Análise de requisitos de física
de plataforma e III - Análise de requisitos funcionais gerais.
3.1.2 - UML
Uma das maiores etapas do planejamento prévio é o desenvolvimento do
UML, uma vez que três etapas serão desenvolvidas: diagrama de casos de uso,
diagrama de classes e um diagrama de sequência para cada evento principal dentro
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
do jogo. Os documentos gerados deste processo podem ser encontrados nos anexos
IV - Casos de Uso, V - Diagrama de Classes e VI - Diagramas de sequência.
3.1.3 - Recursos
Processo no qual os desenvolvedores avaliam os frameworks e ferramentas
relacionadas disponíveis no mercado, assim como os recursos para aplicação ao
longo do projeto.
3.1.4 - Enredo
Etapa de montagem do roteiro da trama, a sequência de eventos que ligados
contarão a estória do jogo, o que direcionará o processo criativo gráfico. O enredo do
jogo poderá ser visualizado no apêndice VII - Roteiro da trama.
3.2 – Criação Gráfica
Esta será uma etapa que terá início logo após o término do planejamento
prévio, mantendo-se ativa até o fim do projeto, principalmente devido ao modelo de
ciclo de vida de software escolhido, que exige prototipação.
Nesta etapa estarão incluidos o desenvolvimento de sprites de personagem,
de monstros, cenários, huds informativas, menus de navegação e telas de transição.
Para tanto, utilizaremos programas de edição de imagem como Adobe Photoshop e
Paint Tool SAI, assim como programas de vetorização, como o Corel Draw em sua
versão mais atual.
3.3 – Física
A princípio, a biblioteca Box2DJS é a opção que parece suprir os requisitos da
física em nosso jogo (esta opção poderá ser revista no processo de avaliação de
recursos - item 3.1.3). A física deverá obedecer aos requisitos descritos no anexo II,
seguindo o a ordem dos itens descritos no primeiro protótipo:
Protótipo 1:
 Base e sustentação;
 Saltos e parábolas;
 Dinâmica de objetos;
 Eventos físicos.
3.3.1 - Conterá o reconhecimento de solo, plataforma e gravidade. Nesta etapa o
personagem deverá ser capaz de andar entre plataformas e cair de uma para a outra.
3.3.2 - Apresentará o sistema de pulo. Ainda no mesmo cenário, o personagem
deverá ser capaz de pular entre plataformas, além de um tratamento especial nos
gráficos apresentados em quedas altas.
3.3.3 - Referenciará a colisão com paredes e blocos. Comportamento do personagem
ao pular contra uma parede ou ser interrompido por uma. Também nesta etapa
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
deveremos apresentar a modalidade de empurrar blocos cuja classe permita este tipo
de movimento, e os mesmos deverão sofrer todos os aspectos gravitacionais
executados no item 3.3.1.
3.3.4 - A última etapa referente à física deverá responder a eventos de cenário, como
subir ou descer uma escada ou situações específicas do jogo, como salto
impulsionado por algum evento presente no solo (trampolim, por exemplo).
Demais acréscimos e variações específicas no contexto físico, como um
movimento de projétil oriundo de um disparo inimigo, deverão ser implementados em
protótipos posteriores a esta etapa inicial.
3.4 – Combate
Neste item temos o desenvolvimento de um sistema complexo, capaz de
reconhecer diversos eventos que darão cadência ao andar do jogo. Este sistema
deverá englobar todos os requisitos descritos no item 1 do anexo III - Análise de
requisitos funcionais gerais. Abaixo a sequência de trabalho.
Protótipo 2:
 Pontos de vida e morte de personagem;
 Animação e uso de ferramentas;
 Controle de vitalidade de personagens não-jogadores.
3.4.1 - A prioridade estará referente ao controle de pontos de vida em resposta a
armadilhas simples no cenário. O protótipo deverá apresentar um sistema de morte
para o personagem, caso seus pontos de vida caiam para zero ou menos. A mesma
classe poderá ser inserida em inimigos, modificando apenas a intensidade da ferida.
Logo, esta etapa apresentará sprites simples de inimigos, sem contar com a
inteligência artificial dos mesmos.
3.4.2 - O protótipo conterá as mudanças de sprites de personagem ao utilizar suas
armas em jogo e quando atingido por armadilha ou inimigo. Nesta etapa serão
definidos os códigos de captura de entrada de teclado.
3.4.3 - Nesta etapa de prototipação os adversários receberão pontos de vida, e o
foco será a resposta da pontuação do inimigo referente a um ataque do herói.
Também nesta etapa será inserido o sistema de eliminação de inimigo na tela.
Demais acréscimos ao sistema de pontos de vida ou dano poderão ser
implementados em etapas posteriores, como no desenvolvimento da inteligência
artificial ou chefes de fases.
3.5 – Comportamento inimigo
Etapa crucial da criação, onde determinamos o comportamento de todos os
personagens não jogáveis, suas respostas perante a eventos impostos (como a
morte eminente) e demais aspectos de uma “inteligência artificial”. Basicamente
serão criados gatilhos que dispararão perante algum evento, como a aproximação do
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
personagem principal, ou mesmo o início do cenário.
Esta etapa demandará testes para cada tipo de função, mas apenas um
protótipo será lançado ao final da mesma, apresentando apenas um cenário sem
layout definido, apenas contando com plataformas simples, por onde alguns tipos de
adversário trafegam, testando as ações dos mesmos perante os riscos de queda e da
proximidade do herói.
Protótipo 3:
 Sistema de comportamento inimigo;
 ‘Inteligência artificial’.
Vale ressaltar que esta etapa servirá apenas para contextualizar os demais
adversários que venham a surgir posteriormente, sendo aplicado o mesmo
conhecimento e recursos utilizados aqui.
3.6 – Arquitetura de estágios
Neste momento, com o jogo bastante evoluído, iniciamos o processo de
criação dos cenários das fases. Cada criação deverá seguir os passos descritos
abaixo:
Etapa 1 Etapa 2 Etapa 3 Etapa 4 Etapa 5 Etapa 6
Seleção Posicionamento Distribuição Distribuição Criação prototipagem
de tema de plataformas de de gráfica em
armadilhas e adversários três níveis
eventos
Tabela 3.1 – Sequência de modelagem para prototipação de cenário

Inicialmente o projeto formará apenas duas fases, explorando a capacidade

dos acadêmicos de transitar de uma para outra sem que exista perda de informação.
Logo, ao final desta etapa possuiremos o protótipo novo (Protótipo 4).
3.7 – Chefes de fase
Esta é uma etapa semelhante à 3.5 – Comportamento inimigo, mas, uma vez
que é destinada à criação de chefes finais, exige um comportamento em batalha
muito mais elaborado.
Protótipo 5:
 Finalização de códigos e apresentação de vilões finais;
3.8 – Recursos finais
Etapa destinada à inserção dos recursos faltantes:
Protótipo 6:
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
  Inserção de trilha sonora;
 Posicionamento de HUDs;
 Interface de título e tela de game over;
 Modelagem de telas de password.
Diversos outros recursos poderão ser inseridos no decorrer da aprovação do
jogo à medida que protótipos de fases completas forem sendo lançados.

IV - CRONOGRAMA
Cronograma previsto por etapa de criação:
2015
ETAPA Mês
J F M A M J J A S O N D
Planejamento prévio X
Criação Gráfica X X X X X X
Modelagem física X X
Sistema de combate X X
Comportamento inimigo X X
Arquitetura de estágios X X
Chefes de fase X X
Recursos finais X X

Cronograma previsto por prototipação:

2015
PROTÓTIPO Mês
J F M A M J J A S O N D

Disciplina Projeto Integrador – 4º semeste

Profa. Me. Marilyn Matos
Protótipo 01 X
Protótipo 02 X
Protótipo 03 X
Protótipo 04 X
Protótipo 05 X
Protótipo 06 X
Versão 0.1 X

V - Referências Bibliográficas:

http://www.stm.jus.br/publicacoes/noticias/noticias-2011/militares-sao-condenados-
por-rou-bo-de-arma-do-exercito. Acessado em 19 out.2014.

http://www1.folha.uol.com.br/folha/cotidiano/ult95u119381.shtml. Acessado em 19
out.2014.

http://nota-dez.jusbrasil.com.br/noticias/2925849/stm-ex-soldado-que-roubouarma
mento-do-exercito-e-condenado-a-cinco-anos-de-prisao. Acessado em 19 out.2014.

http://noticias.uol.com.br/cotidiano/ultimas-noticias/2012/10/03/apos-sumico-de-47-
armas-exercito-manda-prender-todos-os-militares-de-quartel-em-joinville-sc.htm.
Acessado em 19 out.2014.

http://montedo.blogspot.com.br/2013/12/stm-condena-soldado-do-exercito-por.html.
Acessado em 19 out.2014.

http://www.stm.jus.br/publicacoes/noticias/noticias-2012/confirmada-pena-de-tres-
anos-para-soldado-que-furtou-pistola. Acessado em 19 out.2014.

PRESIDÊNCIA DA REPÚBLICA - Casa Civil - Subchefia para Assuntos Jurídicos.

Decreto Lei nº 1.001, de 21 de outubro 1969. Disponível em <http://www.planalto.
gov.br/ccivil_03/decreto-lei/del1001.htm >. Acessado em 19 out.2014.

ANDO, Yasushi. Box2DJS. 2008. Disponível em: http://box2d-js.sourceforge.net/

BISPO, D. M. et al. Desenvolvimento de Jogo Educacional sobre Ecotoxicologia Utilizando

HTML5. Revista Brasileira de Informática na Educação, v. 20, n. 1, p. 121 - 131, 2012.
Disponível em: http://www.br-ie.org/pub/index.php/rbie/article/view/1366/1199

CASTELLS, M. A Galáxia Internet , Reflexões sobre Internet, Negócios e Sociedade. Lisboa:

Fundação Calouste Gulbenkian, 2ª ed., 326 páginas. 2003. ISBN 9789723110654.
Disciplina Projeto Integrador – 4º semeste
Profa. Me. Marilyn Matos
FGV - Fundação Getulio Vargas - 25ª Pesquisa Anual do Uso de TI, 2014. Disponível em:
http://eaesp.fgvsp.br/sites/eaesp.fgvsp.br/files/pesqti-gvcia2014ppt.pdf

HARBS, M. Motor para jogos 2D utilizando HTML5. Universidade Regional de Blumenau -

Centro de Ciências Exatas e Naturais, Blumenau, Vale do Itajaí - SC. 2013. Disponível em:
http://dsc.inf.furb.br/arquivos/tccs/monografias/2013_2_marcos-harbs_monografia.pdf

IMPACT. The awesomest way to create even more awesome HTML5 games. 2013. Disponível
em: http://www.impactjs.com

ISO 9241-11 Ergonomic requirements for office work with visual display terminals (VDT)s -
Part 11 Guidance on usability. 1998. Disponível em:
https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en

ITAKURA, F.; VERGILIO, S. R. Towabe-uma ferramenta para avaliação de usabilidade em

aplicações para Web. XVI Simpósio Brasileiro de Engenharia de Software. pág 462 - 467.
2002. Disponível em: http://www.lbd.dcc.ufmg.br/colecoes/sbes/2002/040.pdf

MIS - Measuring the Information Society. International Telecommunication Union (ITU),

2013. ISBN 978-92-61-14401-2. Disponível em:
http://www.itu.int/en/ITU-D/Statistics/Documents/publications/mis2013/
MIS2013_without_Annex_4.pdf

MIYAMOTO, S. The Legend of Zelda. Japão. Nintendo, desde 1986.

NAGATA, A. Castlevania - Akumajou Dracula. Japão. Konami, desde 1986.

PRADO, E. F. Introdução ao Desenvolvimento de Games com GWT e HTML5. Departamento

de Computação, Universidade Federal de São Carlos (UFSCar) - São Carlos, SP 2012.
Disponível em: http://sbgames.org/sbgames2012/proceedings/papers/tutoriais/tutorial-
02.pdf

SANTEE, A. Programação de Jogos com C++ e DirectX. São Paulo: Novatec, 2005. 400 páginas.

Disciplina Projeto Integrador – 4º semeste

Profa. Me. Marilyn Matos
ISBN: 85-7522-064-0.

SOARES, B. C. Requisitos para utilização de prototipagem evolutiva nos processos de

desenvolvimento de software para Web. Universidade Federal de Minas Gerais (UFMG), Belo
Horizonte–MG, 2007. Disponível em:
http://homepages.dcc.ufmg.br/~rodolfo/dcc823-2-07/Entrega3/Bruno3.pdf

TAKEUCHI, H., NONAKA, I. The New New Product Development Game. Harvard Busi-ness
Review. jan. 2008. Disponível em:
http://mis.postech.ac.kr/class/MEIE780_AdvMIS/paper/part3/32_The%20new%20pro duct
%20development%20game.pdf.

TOLEDO, J. M.; DE DEUS, G. D. Desenvolvimento em smartphones: aplicativos nativos e web.

Departamento de Computação - Pontifícia Universidade Católica de Goiás - GO. 2012.
Disponível em: http://www.cpgls.ucg.br/7mostra/Artigos/agrarias.pdf

TONIN, G. S. Tendências em computação móvel. Departamento de Ciência da Computação,

USP - São Paulo. 2012. Disponível em: http://grenoble.ime.usp.br/~gold/cursos/2012/
movel/mono-1st/2305-1_Graziela.pdf

Indicação de dois professores do IFMS na área do projeto para avaliarem o

Plano de Trabalho.

1. Nome:
e-mail:
Telefone:
Curso/Campus:

2. Nome:
e-mail:
Telefone:
Curso/Campus:

Disciplina Projeto Integrador – 4º semeste

Profa. Me. Marilyn Matos
Campo Grande, ___________________________________
(Assinatura)

(Assinatura)

(Assinatura)

Disciplina Projeto Integrador – 4º semeste

Profa. Me. Marilyn Matos