Upload
emiliano-firmino
View
2.610
Download
7
Embed Size (px)
DESCRIPTION
Short overview of game development in HTML5
Citation preview
Construção de jogos em HTML5 e JavaScript
Docente : Jucimar Jr.
Discente : Emiliano Carlos de M. Firmino
Roteiro
1. Jogos 2. Desenvolvimento de Jogos 3. Arquitetura do Jogo 4. Jogos na Web 5. HTML5 6. JavaScript 7. Jogos, HTML5 e JS 8. Links Interessantes 9. Conclusão
Construção de jogos em html5 e javascript 2
Jogos
Construção de jogos em html5 e javascript 3
O que são jogos?
• Não são jogo: – Brinquedos
• Carrinho, Boneca, Bola, ...
– Puzzle • Quebra-cabeça, palavras cruzadas, ...
• São jogo: – Tabuleiro
• Dama, Xadrez, Go, ...
– Esportes • Futebol, Vôlei, Tênis, Corrida, ...
– Videogames • Mario, Tetris, WoW, ...
Construção de jogos em html5 e javascript 4
O que são jogos?
• Jesse Schell: – “Jogo é uma atividade de resolução de problemas,
abordado de forma lúdica.”
• Experiência – Supressa, Diversão, Conflitos
• Ambiente Justo – Regras, Equilíbrio, Forças Distintas, Limites
• Requer – Interatividade – Imersão – Elementos Básicos
Construção de jogos em html5 e javascript 5
Interatividade
Construção de jogos em html5 e javascript 6
MUNDO 웃 Interage
Interatividade
Construção de jogos em html5 e javascript 7
MUNDO 웃
Interatividade
Construção de jogos em html5 e javascript 8
MUNDO 웃 Interface Virtual
Imersão
• Elemento Principal.
• Projetar-se no jogo
• Ambiente Consistente.
• Você está no jogo, compreende como o ambiente funciona, pronto para responder as adversidades.
Construção de jogos em html5 e javascript 9
Elementos Básico
Construção de jogos em html5 e javascript 10
Estéti-ca
Tecno-logia
Mecâ-nica
Histo-ria
+ V
isív
el
Tipos de Jogo
Casuais
• Controles Simples
• Poucas opções
• Nenhum/pouco conhecimento prévio
• Memorização
• Objetivos claros
• Soluções claras
Hardcore
• Controles Difíceis
• Excesso de opções
• Conhecimento prévio
• Memorização abstrata
• Objetivos incertos
• Soluções insertas
Construção de jogos em html5 e javascript 11
Tipos de Jogador
Casuais
• Web
• Curta Interação
• Pouco exigentes
• Jogos pequenos
Hardcore
• Consoles/PC
• Longa interação
• Muito exigentes
• Jogos grandes
Construção de jogos em html5 e javascript 12
Desenvolvimento de Jogos
Construção de jogos em html5 e javascript 13
Etapas do Desenvolvimento
Construção de jogos em html5 e javascript 14
1º Conceito
Pré-produção
Produção
Teste
Publicação
Plataforma
• Escolha de uma plataforma
• Tempo real
• Algoritmos eficientes
• Gerenciamento eficiente de memória
• Gerenciamento do Processamento
• Crítico em Dispositivos portáteis
• Artifícios: – Funções Rápidas, Modelos Simplificados, ...
Construção de jogos em html5 e javascript 15
Projeto
• Requerimentos do jogo
• Planejamento
• Estabelecimentos das Equipes
• Controle do projeto
• Gerenciamento de Risco
• Estabelecimento de Prazos e Metas
Construção de jogos em html5 e javascript 16
Problemas
• Mal Planejamento
• Subestimar a complexidade
• Preocupação excessiva com a aparência, e esquecer do gameplay
• Jogo mal definido
• Equipe desunida
• Esquecer de atender as restrições
• Poucos títulos são lucrativos
Construção de jogos em html5 e javascript 17
Arquitetura de Jogos
Construção de jogos em html5 e javascript 18
Objetivo
• Resposta em Tempo Real
• Gerar frame rate para uma animação suave
• Responder aos comandos do usuário
• Gerenciar todos os elementos do jogo
• Modificar os Estados do Jogo em resposta ao usuário
• Manter a Integridade e Consistência do jogo
Construção de jogos em html5 e javascript 19
Game
Construção de jogos em html5 e javascript 20
Inicialização
Main Loop
Inputs do Usuário
Logica do Jogo
Renderiza Frame
blit
Time Sync
Finalizando
Terminou
Fecha
Figura ?. Arquitetura de execução
Física
• Modelo matemático que cria a consistência no ambiente ao redor do jogador.
• Controla: – Movimento – Detectar Colisão – Responder a Colisão – Rotação de Objetos – Atrito – Gravidade – Inercia
Construção de jogos em html5 e javascript 21
Inteligência Artificial
• Modela o comportamento de outras unidades, suporte a ações do jogador, permite a consistência no comportamento dos agentes no jogo.
• Controla:
– Encontrar o Caminho
– Suporte a Decisão
– Suporte a Estratégia
– Comportamento do Computador
– Comportamento Emergente
Construção de jogos em html5 e javascript 22
Objetos
• Elementos do jogo com qual ocorre a interação.
• Exemplos:
– Cenário
– Avatar (jogador)
– Agentes (Computador)
– Componentes do Cenário (Caixa, Barris, Carro)
– Estruturas Internas de gerenciamento Jogo
– Waypoints
– ...
Construção de jogos em html5 e javascript 23
Renderização
• Gera a saída que é exibida ao usuário. • Visual:
– Gera um frame com os elementos visíveis pelo campo de visão do jogador.
– Renderiza apenas o necessário para evitar desperdício de recursos.
• Áudio: – Toca o audio no momento certo. – Som espacial.
• Outros: – Tremer o controle, ...
Construção de jogos em html5 e javascript 24
Jogos na Web
Construção de jogos em html5 e javascript 25
Jogos na Web
• Uso de plug-ins: – Adobe Flash
– Microsoft Silverlight
• Características: – Casuais
– Single Player
– Gráficos em 2D
• Plataforma – Browser
Construção de jogos em html5 e javascript 26
HTML5
Construção de jogos em html5 e javascript 27
Proposta
• As versões anteriores do HTML não havia sido projetado produzir aplicações; foram feitas para disponibilizar documentação.
• Artifícios vem sendo utilizados para atender essa crescente necessidade.
• Aplicações Web:
– Multimídia, Gráfico, Desempenho, ...
Construção de jogos em html5 e javascript 28
HTML5 permite:
• Arquivo
• Apresentações
• Armazenamento
• Desempenho
• Gráfico
• Multimídia
• Off-line
Construção de jogos em html5 e javascript 29
Uso de arquivos
• Permite manipular os arquivos na memória sem o uso de plug-ins.
• Permite:
– Gerar miniatura
– Upload de arquivo
– Extrair meta-data de uma arquivo
• Elementos:
– File, FileList, FileReader, FileWriter
Construção de jogos em html5 e javascript 30
Apresentação
• Permite pelo CSS3 criar ricas experiências visuais, com pouca complexidade.
• Permite: – Gerar transições – Transformações – Rotação – Incluir fontes únicas
• Elemento: – Transform, Transition, Rotate, Drag and Drop, ...
Construção de jogos em html5 e javascript 31
Armazenamento
• Permite armazenar a aplicação no cliente, execução da mesma off-line, reduz a carga a cada nova reconexão.
• Permite: – Uso da aplicação off-line
– Bibliotecas
– Economia de banda
• Elemento: – WebStorage, WebSql, indexedDB,File, ...
Construção de jogos em html5 e javascript 32
Desempenho
• Processamento intensivo sem prejudicar a navegação
• Permite: – Calcular rotas
– Processamento matemático
– Processamento interativo
– Aplicar filtro em imagem
• Elemento: – WebSocket, WebWorker, Notification
Construção de jogos em html5 e javascript 33
Gráfico
• Gerar imagem, produzir animações, processamento de imagem.
• Permite: – Animações – Interface gráfica em jogos – Aplicar filtro em imagem
• Elemento:
– Canvas 2d, Canvas WebGL, SVG, ...
Construção de jogos em html5 e javascript 34
Novos Elementos : Multimídia
• Tocar música, vídeo sem o uso plug-ins.
• Permite: – Adicionar toques
– Executar vídeos
– Video on Demand
• Elemento: – Video, Audio
Construção de jogos em html5 e javascript 35
Novos Elementos : Off-line
• Executar aplicações sem a necessidade de estar conectado a internet
• Permite: – Reduzir a carga no servidor
– Uso off-line
• Elemento: – Application cache, localStorage, webSql, ...
Construção de jogos em html5 e javascript 36
Empresas Interessadas
• Google.
• Microsoft
• Apple
• Mozilla Foundation
• Opera Software
• WHATWG
• World Wide Web Consortium (W3C)
Construção de jogos em html5 e javascript 37
HTML5
Benefícios
• Aplicações Web
• Compatibilidade com diversas plataformas
• Dispensa plug-ins
• Padronização
Problemas
• Ainda em Desenvolvimento
• Conflito na definição do
codec de áudio e vídeo.
• Suporte apenas nos
browser mais recentes
• Suporte parcial
• Elementos ainda não totalmente definidos
Construção de jogos em html5 e javascript 38
JavaScript
Construção de jogos em html5 e javascript 39
Java + Script
• JavaScript não é Java, o nome é puro marketing da Netscape.
• O nome era LiveScript.
• Linguagem mais usada no mundo.
• JavaScript é interpretada, não é uma linguagem simples, é uma linguagem completa com suporte a OO.
Construção de jogos em html5 e javascript 40
Características
• Linguagem padronizada pela European Computer Manufacturer's Association (ECMA).
• Nome oficial é ECMAScript, ECMA-262.
• Características: – Orientação a objeto, paradigma da prototipação. – Expressões regulares – Tipagem dinâmica – Corrente de Escopo
Construção de jogos em html5 e javascript 41
JavaScript Client-Side
• Versão do JavaScript encontrada no Browser.
• Core JS + DOM.
• O JS manipula o DOM para modificar o conteúdo da página HTML.
• DOM é especificado pela W3C.
• Características: – Responder Eventos – Manipular Elementos, Cookie e persistência
Construção de jogos em html5 e javascript 42
Jogos, HTML5 e JS
Construção de jogos em html5 e javascript 43
Jogos, HTML5 e JS
• Adaptações – Processamento limitado
– Loops substituídos por eventos periódicos
• Limitações – Necessita browser compatíveis
• Firefox 3.5+, Opera 10+, Chrome 4+ ou IE9
– Otimização para web
– Limitação das fontes utilizadas
– Verificar compatibilidade entre os browser
Construção de jogos em html5 e javascript 44
Ferramentas
Produção: • Editor
– suporte a programação
• Servidor – Apache2, ...
• Validação do Código – Validator W3C
– JSLint
• Teste e Debug – Firefox + FireBug
– Opera + Dragonfly
– Chrome + ConsJS
Publicação:
• JS Minify/Obfuscator – Yahoo YUI
– Closure Compiler
– JSMIN
• Site na Internet – HTML
– PHP
– ...
Construção de jogos em html5 e javascript 45
HTML5 Elementos
• Gráfico – Canvas, [Img, Video,...]
• Inputs & Game Loop – Events
• Som – Audio*
• Off-line – localStorage, WebSql, ...
• Rede – WebSocket
• Proc. Intensivo – WebWorker
• JavaScript – DOM
– Registro de Eventos
– Core JS
• CSS3*
Construção de jogos em html5 e javascript 46
Organização
Construção de jogos em html5 e javascript 47
Estrura do Documento
Dinamismo
Aparência
Jogo HTML5 : Abrindo
Construção de jogos em html5 e javascript 48
var players = [
new Player(),
new Player()
];
var mapa =
new Map();
...
function loading(){
....
}
window.onload =
loading;
Game.js
Event Dispa-
tch
Execute ao carregar
Jogo HTML5 : Inicializa
Construção de jogos em html5 e javascript 49
var players = [
new Player(),
new Player()
];
var mapa =
new Map();
...
function loading(){
....
}
window.onload =
loading;
Game.js
Event Dispa-
tch
Pagina Carregada
Jogo HTML5 : Registra
Construção de jogos em html5 e javascript 50
function eventHdl(e){
...
}
function gameLoop (){
for(...){
fisica();
iA();
...
}
...
renderiza;
}
Game.js
Event Dispa-
tch
Repetir 25fps
Captura Mouse/K
Jogo HTML5 : Resp. Input
Construção de jogos em html5 e javascript 51
function EventHdl(e) {
switch(e){
...
}
}
Game.js
Event Dispa-
tch 1
2
Jogo HTML5 : Frame
Construção de jogos em html5 e javascript 52
function gameLoop (){
for(...){
fisica();
iA();
...
}
...
renderiza;
}
Game.js
Event Dispa-
tch
1
2
Jogo HTML5 : Criatividade
Construção de jogos em html5 e javascript 53
Links Interessantes
Construção de jogos em html5 e javascript 54
1.Gamasutra
Construção de jogos em html5 e javascript 55
2.Gamedev
Construção de jogos em html5 e javascript 56
3. Mozilla Developer
Construção de jogos em html5 e javascript 57
4. Opera Developer Community
Construção de jogos em html5 e javascript 58
5. Douglas Crockford
Construção de jogos em html5 e javascript 59
6.Chrome Experiments
Construção de jogos em html5 e javascript 60
7.HTML5games.com
Construção de jogos em html5 e javascript 61
Outros
• Basta Procurar:
Construção de jogos em html5 e javascript 62
Conclusão
• Desenvolvimento de Jogos – Diversas Técnicas de computação – Excitante
• HTML5 – Promete revolucionar a web, mas ainda está em
desenvolvimento e o suporte é limitado.
• Games HTML5 – Jogos em 2D e 3D – Diversas plataformas – Simples de Programar
Construção de jogos em html5 e javascript 63