Your SlideShare is downloading. ×
0
Desenvolvimento
de jogos com
Javascript e HTML5
por
Willian Molinari
a.k.a. PotHix
Slides em: goo.gl/wfaZ3n
Delivery
Engineering
?
≠
?
Linguagens
¯_(“.)_/¯
Histórico
by @pothix e @crocidb
Robotz Warehouse
https://github.com/PotHix/RobotzWarehouse
Quase lá! ;)
WarOS
https://github.com/pothix/waros
@pothix, @rmasoni, @_bojak, @crocidb
Reconquesthttps://pothix.github.io/RECONQUEST
https://github.com/pothix/reconquest
Jogando e Aprendendo
http://jogandoeaprendendo.com.br
https://github.com/pothix/jogando_e_aprendendo
Skeleton Jigsaw
http://plaev.github.io/skel
https://github.com/plaev/skeleton-jigsaw
@pothix e @rmasoni
Desenv. de Jogos
casuais com HTML5
http://goo.gl/t5zLEJ
Jogos no browser
Porque Javascript?
Vantagens
■ Distribuição bem mais fácil
■ Ambiente de desenvolvimento simples
■ Possibilidade de rodar em vários devices
Desvantagens
■ Limitações e suporte de cada device
■ Testes em vários navegadores
■ Debug ainda é difícil
HTML5*
Canvas
WebGL
WebSockets
Offline cache
Audio
gamepad api
localStorage
Canvas
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....
canvas.drawImage()
drawImage(
img, // image
0, // onde no x começar cortar
0, // onde no y começar cortar
0, // tamanho para corte do x
0, //...
drawImage(
img, // image
0, // onde no x começar cortar
0, // onde no y começar cortar
0, // tamanho para corte do x
0, //...
0,0
0,20
drawImage(img, 0, 20, 15, 20, 0, 0, 15, 20)
drawImage(img, 15, 20, 15, 20, 0, 0, 15, 20)
drawImage(img, 30, 20, 15, 20, 0, 0, 15, 20)
Áudio
// pegando o elemento audio
var audio = document.getElementById('audiotagid')
// tocar
audio.play()
// pausar
audio.pause(...
Latencia
Mobile
Web Audio API
Tempos exatos
Fonte: html5 rocks
Fonte: caniuse.com
WebGL
Quake
iOS Rage
http://blog.tojicode.com/
http://middle-earth.thehobbit.com/
The hobbit Experiment
Emscripten
Banana Bread
https://developer.mozilla.org/en/demos/detail/bananabread
Websockets
// criando a conexão
var url = “ws://pothix.com/websocket”
var connection = new WebSocket(url);
// funções para executar a...
Swarmation
http://swarmation.com
Offline Cache
CACHE MANIFEST
# revision 1
NETWORK:
http://www.google-analytics.com
FALLBACK:
resources/audio resources/audio/silence.mp3...
localStorage
// Criando um novo item no localStorage
localStorage.setItem("myGame","The amazing HTML5
programmer")
// Retornando um ite...
Gamepad API
Vários controles
http://www.html5rocks.com/en/tutorials/doodles/gamepad
https://hacks.mozilla.org/2013/12/the-gamepad-api/
id: "PLAYSTATION(R)3 Controller (STANDARD GAMEPAD Vend …) "
index: 1
timestamp: 18395424738498
buttons: Array[8]
0: 0
1: 0...
Engines
Várias!
https://github.com/bebraw/jswiki/wiki/Game-Engines
https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix
Destaques
■ MelonJS (melonjs.org)
■ LimeJS (limejs.com)
■ Akihabara (github.com/akihabara)
■ PandaJS (pandajs.net) new!
■ ...
Engines
Akihabara
Akihabara
ImpactJS
Desenho e fases
Map editor
http://impactjs.com/documentation/weltmeister
Entity system
1 ig.module('game.entities.hud')
2 .requires('impact.entity')
3 .defines(function () {
4 EntityHud = ig.Entity.extend({
5 ...
Áudio
Audio inicial em multiplos formatos
Otimização!
Vai fazer parte da sua vida
Audio otimizado
Antes 2.5MB
Depois 1.0MB
Compressão
*aproximado
Mobile
Mobile Safari
http://youtu.be/aPYeNaR5ps0
Android Browser
Vários problemas
Muitos devices
com muitos browsers
Fallbacks
Um mal necessário
Estatísticas
Baseadas no Skeleton Jigsaw
1260 linhas de código Javascript no total (segundo sloc)
4.0K analytics.js
1.2M game.min.js
4.0K index.html
2.6M media
Tamanho total
Tempo investido
demo de 4 fases com intro, final e créditos
26 * 4 = 104 horas
Duas semanas de trabalho full time
Quase 1 ano
desde o início
Conclusão
É difícil mas vale a pena! :)
Perguntas?
http://goo.gl/wfaZ3n
Willian Molinari
@PotHix
pothix@pothix.com
http://pothix.com
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Desenvolvimento de jogos com HTML5 e javascript
Upcoming SlideShare
Loading in...5
×

Desenvolvimento de jogos com HTML5 e javascript

425

Published on

Palestra que fiz no Alagoas Dev Day sobre desenvolvimento de jogos com HTML5 e Javascript.

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
425
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Desenvolvimento de jogos com HTML5 e javascript"

  1. 1. Desenvolvimento de jogos com Javascript e HTML5 por Willian Molinari a.k.a. PotHix Slides em: goo.gl/wfaZ3n
  2. 2. Delivery Engineering
  3. 3. ?
  4. 4.
  5. 5. ?
  6. 6. Linguagens
  7. 7. ¯_(“.)_/¯
  8. 8. Histórico
  9. 9. by @pothix e @crocidb Robotz Warehouse https://github.com/PotHix/RobotzWarehouse
  10. 10. Quase lá! ;)
  11. 11. WarOS https://github.com/pothix/waros
  12. 12. @pothix, @rmasoni, @_bojak, @crocidb Reconquesthttps://pothix.github.io/RECONQUEST https://github.com/pothix/reconquest
  13. 13. Jogando e Aprendendo http://jogandoeaprendendo.com.br https://github.com/pothix/jogando_e_aprendendo
  14. 14. Skeleton Jigsaw http://plaev.github.io/skel https://github.com/plaev/skeleton-jigsaw @pothix e @rmasoni
  15. 15. Desenv. de Jogos casuais com HTML5 http://goo.gl/t5zLEJ
  16. 16. Jogos no browser
  17. 17. Porque Javascript?
  18. 18. Vantagens ■ Distribuição bem mais fácil ■ Ambiente de desenvolvimento simples ■ Possibilidade de rodar em vários devices
  19. 19. Desvantagens ■ Limitações e suporte de cada device ■ Testes em vários navegadores ■ Debug ainda é difícil
  20. 20. HTML5* Canvas WebGL WebSockets Offline cache Audio gamepad api localStorage
  21. 21. Canvas
  22. 22. 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();
  23. 23. canvas.drawImage()
  24. 24. 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 )
  25. 25. 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 )
  26. 26. 0,0
  27. 27. 0,20
  28. 28. drawImage(img, 0, 20, 15, 20, 0, 0, 15, 20)
  29. 29. drawImage(img, 15, 20, 15, 20, 0, 0, 15, 20)
  30. 30. drawImage(img, 30, 20, 15, 20, 0, 0, 15, 20)
  31. 31. Áudio
  32. 32. // 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
  33. 33. Latencia
  34. 34. Mobile
  35. 35. Web Audio API
  36. 36. Tempos exatos
  37. 37. Fonte: html5 rocks
  38. 38. Fonte: caniuse.com
  39. 39. WebGL
  40. 40. Quake iOS Rage http://blog.tojicode.com/
  41. 41. http://middle-earth.thehobbit.com/ The hobbit Experiment
  42. 42. Emscripten
  43. 43. Banana Bread https://developer.mozilla.org/en/demos/detail/bananabread
  44. 44. Websockets
  45. 45. // 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
  46. 46. Swarmation http://swarmation.com
  47. 47. Offline Cache
  48. 48. 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
  49. 49. localStorage
  50. 50. // 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
  51. 51. Gamepad API
  52. 52. Vários controles http://www.html5rocks.com/en/tutorials/doodles/gamepad https://hacks.mozilla.org/2013/12/the-gamepad-api/
  53. 53. 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
  54. 54. Engines
  55. 55. Várias! https://github.com/bebraw/jswiki/wiki/Game-Engines https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix
  56. 56. Destaques ■ MelonJS (melonjs.org) ■ LimeJS (limejs.com) ■ Akihabara (github.com/akihabara) ■ PandaJS (pandajs.net) new! ■ Crafty (craftyjs.com) ■ Impact (impactjs.com)
  57. 57. Engines Akihabara Akihabara ImpactJS
  58. 58. Desenho e fases
  59. 59. Map editor http://impactjs.com/documentation/weltmeister
  60. 60. Entity system
  61. 61. 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 });
  62. 62. Áudio
  63. 63. Audio inicial em multiplos formatos
  64. 64. Otimização! Vai fazer parte da sua vida
  65. 65. Audio otimizado
  66. 66. Antes 2.5MB Depois 1.0MB Compressão *aproximado
  67. 67. Mobile
  68. 68. Mobile Safari http://youtu.be/aPYeNaR5ps0
  69. 69. Android Browser Vários problemas
  70. 70. Muitos devices com muitos browsers
  71. 71. Fallbacks Um mal necessário
  72. 72. Estatísticas Baseadas no Skeleton Jigsaw
  73. 73. 1260 linhas de código Javascript no total (segundo sloc)
  74. 74. 4.0K analytics.js 1.2M game.min.js 4.0K index.html 2.6M media Tamanho total
  75. 75. Tempo investido demo de 4 fases com intro, final e créditos
  76. 76. 26 * 4 = 104 horas Duas semanas de trabalho full time
  77. 77. Quase 1 ano desde o início
  78. 78. Conclusão É difícil mas vale a pena! :)
  79. 79. Perguntas? http://goo.gl/wfaZ3n Willian Molinari @PotHix pothix@pothix.com http://pothix.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×