construção de jogos em html5 e javascript

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


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


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


Interatividade


MUNDO 웃 Interage

Interatividade


MUNDO 웃

Interatividade


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.


Elementos Básico


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


Tipos de Jogador

Casuais

• Web

• Curta Interação

• Pouco exigentes

• Jogos pequenos

Hardcore

• Consoles/PC

• Longa interação

• Muito exigentes

• Jogos grandes


Desenvolvimento de Jogos


Etapas do Desenvolvimento


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


Projeto

• Requerimentos do jogo

• Planejamento

• Estabelecimentos das Equipes

• Controle do projeto

• Gerenciamento de Risco

• Estabelecimento de Prazos e Metas


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


Arquitetura de Jogos


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


Game


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


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


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

– ...


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


Jogos na Web


Jogos na Web

• Uso de plug-ins: – Adobe Flash

– Microsoft Silverlight

• Características: – Casuais

– Single Player

– Gráficos em 2D

• Plataforma – Browser


HTML5


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


HTML5 permite:

• Arquivo

• Apresentações

• Armazenamento

• Desempenho

• Gráfico

• Multimídia

• Off-line


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


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


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


Desempenho

• Processamento intensivo sem prejudicar a navegação

• Permite: – Calcular rotas

– Processamento matemático

– Processamento interativo

– Aplicar filtro em imagem

• Elemento: – WebSocket, WebWorker, Notification


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


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


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


Empresas Interessadas

• Google.

• Microsoft

• Apple

• Mozilla Foundation

• Opera Software

• WHATWG

• World Wide Web Consortium (W3C)


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


JavaScript


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.


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


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


Jogos, HTML5 e JS


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


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

– ...


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*


Organização


Estrura do Documento

Dinamismo

Aparência

Jogo HTML5 : Abrindo


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


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


function eventHdl(e){

...

}

function gameLoop (){

for(...){

fisica();

iA();

...

}

...

renderiza;

}

Game.js

Event Dispa-

tch

Repetir 25fps

Captura Mouse/K

Jogo HTML5 : Resp. Input


function EventHdl(e) {

switch(e){

...

}

}

Game.js

Event Dispa-

tch 1

2

Jogo HTML5 : Frame


function gameLoop (){

for(...){

fisica();

iA();

...

}

...

renderiza;

}

Game.js

Event Dispa-

tch

1

2

Jogo HTML5 : Criatividade


Links Interessantes


1.Gamasutra


2.Gamedev


3. Mozilla Developer


4. Opera Developer Community


5. Douglas Crockford


6.Chrome Experiments


7.HTML5games.com


Outros

• Basta Procurar:


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

Technology