Construção de jogos em html5 e javascript

4.472 visualizações

Publicada em

Short overview of game development in HTML5

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.472
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
98
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Construção de jogos em html5 e javascript

  1. 1. Construção de jogos em HTML5e JavaScriptDocente : Jucimar Jr.Discente : Emiliano Carlos de M. Firmino
  2. 2. Roteiro1. Jogos2. Desenvolvimento de Jogos3. Arquitetura do Jogo4. Jogos na Web5. HTML56. JavaScript7. Jogos, HTML5 e JS8. Links Interessantes9. ConclusãoConstrução de jogos em html5 e javascript 2
  3. 3. JogosConstrução de jogos em html5 e javascript 3
  4. 4. 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
  5. 5. 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ásicosConstrução de jogos em html5 e javascript 5
  6. 6. InteratividadeConstrução de jogos em html5 e javascript 6MUNDO웃 Interage
  7. 7. InteratividadeConstrução de jogos em html5 e javascript 7MUNDO웃
  8. 8. InteratividadeConstrução de jogos em html5 e javascript 8MUNDO웃 InterfaceVirtual
  9. 9. Imersão• Elemento Principal.• Projetar-se no jogo• Ambiente Consistente.• Você está no jogo,compreende como oambiente funciona,pronto para responderas adversidades.Construção de jogos em html5 e javascript 9
  10. 10. Elementos BásicoConstrução de jogos em html5 e javascript 10Estéti-caTecno-logiaMecâ-nicaHisto-ria+Visível
  11. 11. Tipos de JogoCasuais• Controles Simples• Poucas opções• Nenhum/poucoconhecimento prévio• Memorização• Objetivos claros• Soluções clarasHardcore• Controles Difíceis• Excesso de opções• Conhecimento prévio• Memorização abstrata• Objetivos incertos• Soluções insertasConstrução de jogos em html5 e javascript 11
  12. 12. Tipos de JogadorCasuais• Web• Curta Interação• Pouco exigentes• Jogos pequenosHardcore• Consoles/PC• Longa interação• Muito exigentes• Jogos grandesConstrução de jogos em html5 e javascript 12
  13. 13. Desenvolvimento de JogosConstrução de jogos em html5 e javascript 13
  14. 14. Etapas do DesenvolvimentoConstrução de jogos em html5 e javascript 141º ConceitoPré-produçãoProduçãoTestePublicação
  15. 15. 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
  16. 16. Projeto• Requerimentos do jogo• Planejamento• Estabelecimentos das Equipes• Controle do projeto• Gerenciamento de Risco• Estabelecimento de Prazos e MetasConstrução de jogos em html5 e javascript 16
  17. 17. Problemas• Mal Planejamento• Subestimar a complexidade• Preocupação excessiva com a aparência, e esquecer dogameplay• Jogo mal definido• Equipe desunida• Esquecer de atender as restrições• Poucos títulos são lucrativosConstrução de jogos em html5 e javascript 17
  18. 18. Arquitetura de JogosConstrução de jogos em html5 e javascript 18
  19. 19. 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 aousuário• Manter a Integridade e Consistência do jogoConstrução de jogos em html5 e javascript 19
  20. 20. GameConstrução de jogos em html5 e javascript 20InicializaçãoMain LoopInputs doUsuárioLogica doJogoRenderizaFrameblitTime SyncFinalizandoTerminouFechaFigura ?. Arquitetura de execução
  21. 21. Física• Modelo matemático que cria a consistência noambiente ao redor do jogador.• Controla:– Movimento– Detectar Colisão– Responder a Colisão– Rotação de Objetos– Atrito– Gravidade– InerciaConstrução de jogos em html5 e javascript 21
  22. 22. Inteligência Artificial• Modela o comportamento de outras unidades, suportea ações do jogador, permite a consistência nocomportamento dos agentes no jogo.• Controla:– Encontrar o Caminho– Suporte a Decisão– Suporte a Estratégia– Comportamento do Computador– Comportamento EmergenteConstrução de jogos em html5 e javascript 22
  23. 23. 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
  24. 24. Renderização• Gera a saída que é exibida ao usuário.• Visual:– Gera um frame com os elementos visíveis pelo campode visão do jogador.– Renderiza apenas o necessário para evitar desperdíciode recursos.• Áudio:– Toca o audio no momento certo.– Som espacial.• Outros:– Tremer o controle, ...Construção de jogos em html5 e javascript 24
  25. 25. Jogos na WebConstrução de jogos em html5 e javascript 25
  26. 26. Jogos na Web• Uso de plug-ins:– Adobe Flash– Microsoft Silverlight• Características:– Casuais– Single Player– Gráficos em 2D• Plataforma– BrowserConstrução de jogos em html5 e javascript 26
  27. 27. HTML5Construção de jogos em html5 e javascript 27
  28. 28. Proposta• As versões anteriores do HTML não havia sidoprojetado produzir aplicações; foram feitas paradisponibilizar documentação.• Artifícios vem sendo utilizados para atender essacrescente necessidade.• Aplicações Web:– Multimídia, Gráfico, Desempenho, ...Construção de jogos em html5 e javascript 28
  29. 29. HTML5 permite:• Arquivo• Apresentações• Armazenamento• Desempenho• Gráfico• Multimídia• Off-lineConstrução de jogos em html5 e javascript 29
  30. 30. Uso de arquivos• Permite manipular os arquivos na memóriasem o uso de plug-ins.• Permite:– Gerar miniatura– Upload de arquivo– Extrair meta-data de uma arquivo• Elementos:– File, FileList, FileReader, FileWriterConstrução de jogos em html5 e javascript 30
  31. 31. Apresentação• Permite pelo CSS3 criar ricas experiências visuais, compouca 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
  32. 32. Armazenamento• Permite armazenar a aplicação no cliente, execução damesma 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
  33. 33. Desempenho• Processamento intensivo sem prejudicar a navegação• Permite:– Calcular rotas– Processamento matemático– Processamento interativo– Aplicar filtro em imagem• Elemento:– WebSocket, WebWorker, NotificationConstrução de jogos em html5 e javascript 33
  34. 34. 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
  35. 35. 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, AudioConstrução de jogos em html5 e javascript 35
  36. 36. Novos Elementos : Off-line• Executar aplicações sem a necessidade deestar 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
  37. 37. Empresas Interessadas• Google.• Microsoft• Apple• Mozilla Foundation• Opera Software• WHATWG• World Wide Web Consortium (W3C)Construção de jogos em html5 e javascript 37
  38. 38. HTML5Benefícios• Aplicações Web• Compatibilidade comdiversas plataformas• Dispensa plug-ins• PadronizaçãoProblemas• Ainda em Desenvolvimento• Conflito na definição docodec de áudio e vídeo.• Suporte apenas nosbrowser mais recentes• Suporte parcial• Elementos ainda nãototalmente definidosConstrução de jogos em html5 e javascript 38
  39. 39. JavaScriptConstrução de jogos em html5 e javascript 39
  40. 40. Java + Script• JavaScript não é Java, o nome é puromarketing da Netscape.• O nome era LiveScript.• Linguagem mais usada no mundo.• JavaScript é interpretada, não é umalinguagem simples, é uma linguagemcompleta com suporte a OO.Construção de jogos em html5 e javascript 40
  41. 41. Características• Linguagem padronizada pela European ComputerManufacturers 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 EscopoConstrução de jogos em html5 e javascript 41
  42. 42. 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áginaHTML.• DOM é especificado pela W3C.• Características:– Responder Eventos– Manipular Elementos, Cookie e persistênciaConstrução de jogos em html5 e javascript 42
  43. 43. Jogos, HTML5 e JSConstrução de jogos em html5 e javascript 43
  44. 44. 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 browserConstrução de jogos em html5 e javascript 44
  45. 45. FerramentasProdução:• Editor– suporte a programação• Servidor– Apache2, ...• Validação do Código– Validator W3C– JSLint• Teste e Debug– Firefox + FireBug– Opera + Dragonfly– Chrome + ConsJSPublicação:• JS Minify/Obfuscator– Yahoo YUI– Closure Compiler– JSMIN• Site na Internet– HTML– PHP– ...Construção de jogos em html5 e javascript 45
  46. 46. 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
  47. 47. OrganizaçãoConstrução de jogos em html5 e javascript 47Estrura do DocumentoDinamismoAparência
  48. 48. Jogo HTML5 : AbrindoConstrução de jogos em html5 e javascript 48var players = [new Player(),new Player()];var mapa =new Map();...function loading(){....}window.onload =loading;Game.jsEventDispa-tchExecute aocarregar
  49. 49. Jogo HTML5 : InicializaConstrução de jogos em html5 e javascript 49var players = [new Player(),new Player()];var mapa =new Map();...function loading(){....}window.onload =loading;Game.jsEventDispa-tchPagina Carregada
  50. 50. Jogo HTML5 : RegistraConstrução de jogos em html5 e javascript 50function eventHdl(e){...}function gameLoop (){for(...){fisica();iA();...}...renderiza;}Game.jsEventDispa-tchRepetir 25fpsCaptura Mouse/K
  51. 51. Jogo HTML5 : Resp. InputConstrução de jogos em html5 e javascript 51function EventHdl(e) {switch(e){...}}Game.jsEventDispa-tch12
  52. 52. Jogo HTML5 : FrameConstrução de jogos em html5 e javascript 52function gameLoop (){for(...){fisica();iA();...}...renderiza;}Game.jsEventDispa-tch12
  53. 53. Jogo HTML5 : CriatividadeConstrução de jogos em html5 e javascript 53
  54. 54. Links InteressantesConstrução de jogos em html5 e javascript 54
  55. 55. 1.GamasutraConstrução de jogos em html5 e javascript 55
  56. 56. 2.GamedevConstrução de jogos em html5 e javascript 56
  57. 57. 3. Mozilla DeveloperConstrução de jogos em html5 e javascript 57
  58. 58. 4. Opera Developer CommunityConstrução de jogos em html5 e javascript 58
  59. 59. 5. Douglas CrockfordConstrução de jogos em html5 e javascript 59
  60. 60. 6.Chrome ExperimentsConstrução de jogos em html5 e javascript 60
  61. 61. 7.HTML5games.comConstrução de jogos em html5 e javascript 61
  62. 62. Outros• Basta Procurar:Construção de jogos em html5 e javascript 62
  63. 63. Conclusão• Desenvolvimento de Jogos– Diversas Técnicas de computação– Excitante• HTML5– Promete revolucionar a web, mas ainda está emdesenvolvimento e o suporte é limitado.• Games HTML5– Jogos em 2D e 3D– Diversas plataformas– Simples de ProgramarConstrução de jogos em html5 e javascript 63

×