Desenvolvimento de jogos com HTML5 e javascript
•
1 j'aime•1,486 vues
Este documento discute o desenvolvimento de jogos com Javascript e HTML5. Ele apresenta as principais linguagens e ferramentas utilizadas como Canvas, WebGL, WebSockets, armazenamento local e Gamepad API. Também discute vantagens e desvantagens de desenvolver jogos na web, além de engenharias populares como MelonJS, LimeJS e ImpactJS.
Recommandé
Contenu connexe
Tendances
Tendances (11)
Similaire à Desenvolvimento de jogos com HTML5 e javascript
Similaire à Desenvolvimento de jogos com HTML5 e javascript (20)
Plus de Willian Molinari
Plus de Willian Molinari (14)
Dernier
Dernier (8)
Desenvolvimento de jogos com HTML5 e javascript
- 1. Desenvolvimento de jogos com Javascript e HTML5 por Willian Molinari a.k.a. PotHix Slides em: goo.gl/wfaZ3n
- 5. ?
- 6. ≠
- 7. ?
- 8. Linguagens
- 13. ¯_(“.)_/¯
- 14. Histórico
- 15. by @pothix e @crocidb Robotz Warehouse https://github.com/PotHix/RobotzWarehouse
- 16. Quase lá! ;)
- 18. @pothix, @rmasoni, @_bojak, @crocidb Reconquesthttps://pothix.github.io/RECONQUEST https://github.com/pothix/reconquest
- 19. Jogando e Aprendendo http://jogandoeaprendendo.com.br https://github.com/pothix/jogando_e_aprendendo
- 20. Skeleton Jigsaw http://plaev.github.io/skel https://github.com/plaev/skeleton-jigsaw @pothix e @rmasoni
- 21. Desenv. de Jogos casuais com HTML5 http://goo.gl/t5zLEJ
- 22. Jogos no browser
- 25. Vantagens ■ Distribuição bem mais fácil ■ Ambiente de desenvolvimento simples ■ Possibilidade de rodar em vários devices
- 26. Desvantagens ■ Limitações e suporte de cada device ■ Testes em vários navegadores ■ Debug ainda é difícil
- 28. Canvas
- 29. ctx.beginPath(); // Circulo maior ctx.arc(75,75,50,0,Math.PI*2,true); ctx.moveTo(110,75); // Boca ctx.arc(75,75,35,0,Math.PI,false); ctx.moveTo(65,65); // Olho direito ctx.arc(60,65,5,0,Math.PI*2,true); ctx.moveTo(95,65); // Olho esquerdo ctx.arc(90,65,5,0,Math.PI*2,true); ctx.stroke();
- 31. drawImage( img, // image 0, // onde no x começar cortar 0, // onde no y começar cortar 0, // tamanho para corte do x 0, // tamanho para corte do y 0, // onde no x colocar no canvas 0, // onde no y colocar no canvas 14, // largura 20, // altura )
- 32. drawImage( img, // image 0, // onde no x começar cortar 0, // onde no y começar cortar 0, // tamanho para corte do x 0, // tamanho para corte do y 0, // onde no x colocar no canvas 0, // onde no y colocar no canvas 14, // largura 20, // altura )
- 33. 0,0
- 34. 0,20
- 35. drawImage(img, 0, 20, 15, 20, 0, 0, 15, 20)
- 36. drawImage(img, 15, 20, 15, 20, 0, 0, 15, 20)
- 37. drawImage(img, 30, 20, 15, 20, 0, 0, 15, 20)
- 41. Áudio
- 42. // pegando o elemento audio var audio = document.getElementById('audiotagid') // tocar audio.play() // pausar audio.pause() // aumentar / diminuir o volume audio.volume+=0.1 audio.volume-=0.1 // vários outros ... Áudio
- 43. Latencia
- 44. Mobile
- 45. Web Audio API
- 46. Tempos exatos
- 49. WebGL
- 52. Emscripten
- 54. Websockets
- 55. // criando a conexão var url = “ws://pothix.com/websocket” var connection = new WebSocket(url); // funções para executar assim que acontecer // o dado estado connection.onopen = function () { }; connection.onerror = function (error) { }; connection.onmessage = function (e) { }; connection.onclose = function (e) { }; Websockets
- 57. Offline Cache
- 58. CACHE MANIFEST # revision 1 NETWORK: http://www.google-analytics.com FALLBACK: resources/audio resources/audio/silence.mp3 CACHE: src/maingame_packaged.js resources/audio/silence.mp3 resources/sprites.png cache.manifest
- 59. localStorage
- 60. // Criando um novo item no localStorage localStorage.setItem("myGame","The amazing HTML5 programmer") // Retornando um item do localStorage localStorage.getItem("myGame") # => "The amazing HTML5 programmer" // Criando com outra Syntax localStorage["myGame.stage"] = 1 // Retornando. Tudo é armazenado como string. localStorage["myGame.stage"] # => "1" localStorage
- 61. Gamepad API
- 63. id: "PLAYSTATION(R)3 Controller (STANDARD GAMEPAD Vend …) " index: 1 timestamp: 18395424738498 buttons: Array[8] 0: 0 1: 0, … 6: 0.03291, 7: 0 axes: Array[4] 0: -0.01176 1: 0.01961 2: -0.00392 3: -0.01176 Gamepad API
- 64. Engines
- 66. Destaques ■ MelonJS (melonjs.org) ■ LimeJS (limejs.com) ■ Akihabara (github.com/akihabara) ■ PandaJS (pandajs.net) new! ■ Crafty (craftyjs.com) ■ Impact (impactjs.com)
- 69. Desenho e fases
- 71. Entity system
- 72. 1 ig.module('game.entities.hud') 2 .requires('impact.entity') 3 .defines(function () { 4 EntityHud = ig.Entity.extend({ 5 _wmIgnore: true, 6 animSheet: new ig.AnimationSheet('media/hud.png', 10, 10), 7 gravityFactor: 0, 8 zIndex: 2, 9 name: "hud", 10 piece_collected: false, 11 12 init: function (x, y, settings) { 13 this.parent(x, y, settings); 14 this.addAnim('empty', 1, [0]); 15 this.addAnim('full', 1, [1]); 16 }, 17 18 update: function () { 19 if( this.piece_collected ){ this.currentAnim = this.anims.full; } 20 this.parent(); 21 } 22 }); 23 });
- 74. Áudio
- 75. Audio inicial em multiplos formatos
- 76. Otimização! Vai fazer parte da sua vida
- 77. Audio otimizado
- 79. Mobile
- 82. Muitos devices com muitos browsers
- 85. Estatísticas Baseadas no Skeleton Jigsaw
- 86. 1260 linhas de código Javascript no total (segundo sloc)
- 87. 4.0K analytics.js 1.2M game.min.js 4.0K index.html 2.6M media Tamanho total
- 88. Tempo investido demo de 4 fases com intro, final e créditos
- 89. 26 * 4 = 104 horas Duas semanas de trabalho full time
- 90. Quase 1 ano desde o início
- 91. Conclusão É difícil mas vale a pena! :)