Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Desenvolvimento de jogos,   Javascript e HTML5      Willian Molinari (a.k.a PotHix)
Grupo de usuários Ruby de São Paulo
Equipe de Cloud Computing
Linguagens   Várias! :)
Frameworks e Libs       Varios! o/                     Akihabara
Sou só um cara normal
Meu primeiro game  Game contest Itaú cultural Criado por: @PotHix / @CrociDB
C++    AllegroLinux / Windows
Vencemos!
Mas depois...
Código difícil
Difícil distribuição
Difícil portabilidade
Malloc()
Claro que não!
HTML5*         Canvas             WebGL                                           SVGfileSystem         Audio             ...
Canvas<canvas width="100" height="100" id="game"></canvas>
Canvas                                   Rect         var ctx = document.getElementById("game").getContext(2d);         ct...
Canvas                            arc()         ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
Canvas             Linhas e curvas         quadraticCurveTo(), belzierCurveTo(), lineTo(), moveTo()
Canvas         Desenho a mão livre         ctx.beginPath();         // Circulo maior         ctx.arc(75,75,50,0,Math.PI*2,...
Canvas                         Imagens     drawImage(img,cropx,cropy,croptx,cropty,scalex,scaley,cordx,cordy)
Canvas   Exemplo de drawImage         image = new Image();         image.src = "source/da/imagem.jpg";         // Sempre e...
SVGScalable Vector Graphics
SVG      SVG Animations        Eric Möller
SVG      Porque não é usado?         Falta de editores, suporte e outras coisas
WebGLOpenGL rodando no browser
WebGL                                 Quake II GWT: http://code.google.com/p/quake2-gwt-port/ WebSonic: http://forums.soni...
WebGL        Acesso direto a GPU
WebGL        Drivers
WebGL        Segurança
WebGL  http://people.opera.com/~emoller/stagedemo    http://people.opera.com/~emoller/demo2
Offline cache
Offline cache                Cache Manifest                 <html manifest="/cache.manifest">
Offline cache                Exemplo.manifest                CACHE MANIFEST                # revision 1                NET...
WebSockets
WebSockets       Exemplo WebSocket       var connection = new WebSocket(ws://pothix.com/websocket);       connection.onope...
WebSockets             Multiplayer!              http://swarmation.com/
WebSockets
Tag Audio<audio><source src="test.mp3" type="audio/mpeg" /></audio>
Audio                     Latencia        Velocidade de resposta não é boa em todos os casos.
Audio        Workaround?
Audio        Compatibilidade           Mobile ainda é um problema.
Local StorageChega de guardar informações em cookies
localStorage        Exemplo localStorage        // Criando um novo item no localStorage        localStorage.setItem("myGam...
fileSystemQuase nenhum suporte ainda, mas vai ser muito útil!
Game frameworks    Pelo menos algumas delas.
http://impactjs.com
http://www.phoboslab.org/ztype/                                  http://playbiolab.com/
ImpactJS           Partículas
ImpactJS           Suporte
ImpactJS           Map editor
ImpactJS              Física basica           E exemplos de integração com a lib Box2D
ImpactJS           Documentação
ImpactJS           Bons exemplos
ImpactJS     Script para versão .min
ImpactJS           Paga :(            US$ 99
Akihabara                 Akihabara            Criado por Francesco Cottone (KesieV Norimaki)
Akihabara            Vários demos             https://github.com/akihabara
Solitude          TSpin   Capman                            TloSLeave me alone
Akihabara            Open Source o/             https://github.com/akihabara/akihabara
Akihabara            Map editor            AkibaKa: Ainda em versão alpha
Akihabara              Documentação?            Precisa de várias melhorias, mas aceitamos ajuda! :)
Akihabara            Assets separados              gbox.addBundle({file: "bundle.js"})
Akihabara       Arquivos organizados        {            addImage:[                ["enemy","resources/enemy01.png"]      ...
Akihabara            Keymap page            Sim, no estilo daqueles emuladores :)
Akihabara            Modularizado
Akihabara                              gbox.js            O núcleo da engine. Criação de objetos, blit, audio e etc.
Akihabara     O namespace principal            // Objetos e grupos            gbox.setGroups(["game_group","enemy"]);     ...
Akihabara               gamecycle.js            Estados e funcionalidades basicas dos jogos.
Akihabara                      Game basics            game = gamecycle.createMaingame("game_id", "game_group");           ...
Akihabara                         help.js            Extenções no Javascript e helpers para o game
Akihabara      Helper de Inicialização            help.akihabaraInit({              title:"Zero Wing",              splash...
Akihabara                     toys.js            Helpers para vários estilos de games
Akihabara            Snippets para jogos            // Topview            toys.topview.fireBullet("bullets_group", "bullet...
RECONQUESTGlobal Game Jam 2011
Plaev Team @PotHix            @_bojak@rmasoni           @CrociDB
RECONQUESTGalaxy Tab e Motorola Milestone
RECONQUEST  iPad e iPhone
Open source também!    https://github.com/plaev/reconquest
Google Web ToolkitFeito em Java, mas exporta HTML5 e várias outras coisas!
GWT            Angry Birds      Feito com GWT e incluído na chrome web store
Outras engines        Box2D                 Aves                  bdge                                            GameQuer...
Site interessante com jogos feitos com HTML5
Algumas conclusõesBoa! Agora já posso criar meu Gears of War com HTML5!!!!!11!!
Obrigado!                 Perguntas?http://pothix.comhttp://github.com/pothix               pothix@pothix.com
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
TDC2011 - Desenvolvimento de jogos com Javascript e HTML5
Upcoming SlideShare
Loading in …5
×

TDC2011 - Desenvolvimento de jogos com Javascript e HTML5

7,834 views

Published on

Desenvolvimento de jogos utilizando HTML5 e Javascript

Published in: Technology, Art & Photos
  • Be the first to comment

TDC2011 - Desenvolvimento de jogos com Javascript e HTML5

  1. 1. Desenvolvimento de jogos, Javascript e HTML5 Willian Molinari (a.k.a PotHix)
  2. 2. Grupo de usuários Ruby de São Paulo
  3. 3. Equipe de Cloud Computing
  4. 4. Linguagens Várias! :)
  5. 5. Frameworks e Libs Varios! o/ Akihabara
  6. 6. Sou só um cara normal
  7. 7. Meu primeiro game Game contest Itaú cultural Criado por: @PotHix / @CrociDB
  8. 8. C++ AllegroLinux / Windows
  9. 9. Vencemos!
  10. 10. Mas depois...
  11. 11. Código difícil
  12. 12. Difícil distribuição
  13. 13. Difícil portabilidade
  14. 14. Malloc()
  15. 15. Claro que não!
  16. 16. HTML5* Canvas WebGL SVGfileSystem Audio Offline cache WebSockets Local Storage
  17. 17. Canvas<canvas width="100" height="100" id="game"></canvas>
  18. 18. Canvas Rect var ctx = document.getElementById("game").getContext(2d); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50);
  19. 19. Canvas arc() ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
  20. 20. Canvas Linhas e curvas quadraticCurveTo(), belzierCurveTo(), lineTo(), moveTo()
  21. 21. Canvas Desenho a mão livre 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();
  22. 22. Canvas Imagens drawImage(img,cropx,cropy,croptx,cropty,scalex,scaley,cordx,cordy)
  23. 23. Canvas Exemplo de drawImage image = new Image(); image.src = "source/da/imagem.jpg"; // Sempre esperar a imagem carregar antes de colocar no canvas image.onload = function(){ /* o código do canvas aqui */} // Apenas a image e sua posição canvas.drawImage(image, x, y); // A imagem, suas posições e seu tamanho canvas.drawImage(image, x, y, width, height); /* A imagen, onde deve ser cortada, qual vai ser o tamanho do corte, o tamanho da imagem e onde ela deve ser colocada */ canvas.drawImage(image, cropx, cropy, crop_tam_x, crop_tam_y, scalex, scaley, coordx, coordy);
  24. 24. SVGScalable Vector Graphics
  25. 25. SVG SVG Animations Eric Möller
  26. 26. SVG Porque não é usado? Falta de editores, suporte e outras coisas
  27. 27. WebGLOpenGL rodando no browser
  28. 28. WebGL Quake II GWT: http://code.google.com/p/quake2-gwt-port/ WebSonic: http://forums.sonicretro.org/index.php?showtopic=24965 WebGL Rage: http://code.google.com/p/webgl-ios-rage/
  29. 29. WebGL Acesso direto a GPU
  30. 30. WebGL Drivers
  31. 31. WebGL Segurança
  32. 32. WebGL http://people.opera.com/~emoller/stagedemo http://people.opera.com/~emoller/demo2
  33. 33. Offline cache
  34. 34. Offline cache Cache Manifest <html manifest="/cache.manifest">
  35. 35. Offline cache Exemplo.manifest 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
  36. 36. WebSockets
  37. 37. WebSockets Exemplo WebSocket var connection = new WebSocket(ws://pothix.com/websocket); connection.onopen = function () { connection.send(funciona!); // Envia a mensagem para o servidor }; connection.onerror = function (error) { // Código para tratar erro de conexão }; connection.onmessage = function (e) { // Código para tratar o que fazer em cada mensagem }; connection.onclose = function (e) { // Código para tratar quando a conexão é encerrada };
  38. 38. WebSockets Multiplayer! http://swarmation.com/
  39. 39. WebSockets
  40. 40. Tag Audio<audio><source src="test.mp3" type="audio/mpeg" /></audio>
  41. 41. Audio Latencia Velocidade de resposta não é boa em todos os casos.
  42. 42. Audio Workaround?
  43. 43. Audio Compatibilidade Mobile ainda é um problema.
  44. 44. Local StorageChega de guardar informações em cookies
  45. 45. localStorage Exemplo localStorage // 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 com outra Syntax. Tudo é armazenado como string. localStorage["myGame.stage"] # => "1"
  46. 46. fileSystemQuase nenhum suporte ainda, mas vai ser muito útil!
  47. 47. Game frameworks Pelo menos algumas delas.
  48. 48. http://impactjs.com
  49. 49. http://www.phoboslab.org/ztype/ http://playbiolab.com/
  50. 50. ImpactJS Partículas
  51. 51. ImpactJS Suporte
  52. 52. ImpactJS Map editor
  53. 53. ImpactJS Física basica E exemplos de integração com a lib Box2D
  54. 54. ImpactJS Documentação
  55. 55. ImpactJS Bons exemplos
  56. 56. ImpactJS Script para versão .min
  57. 57. ImpactJS Paga :( US$ 99
  58. 58. Akihabara Akihabara Criado por Francesco Cottone (KesieV Norimaki)
  59. 59. Akihabara Vários demos https://github.com/akihabara
  60. 60. Solitude TSpin Capman TloSLeave me alone
  61. 61. Akihabara Open Source o/ https://github.com/akihabara/akihabara
  62. 62. Akihabara Map editor AkibaKa: Ainda em versão alpha
  63. 63. Akihabara Documentação? Precisa de várias melhorias, mas aceitamos ajuda! :)
  64. 64. Akihabara Assets separados gbox.addBundle({file: "bundle.js"})
  65. 65. Akihabara Arquivos organizados { addImage:[ ["enemy","resources/enemy01.png"] ], addTiles:[ {id:"enemy", image:"e1", tilew:16, tileh:32, tilerow:6, gapx:0, gapy:0} ], addFont:[ {id:"small", image:"font", tileh:8, tilew:8, tilerow:255, gapx:0, gapy:8} ] }
  66. 66. Akihabara Keymap page Sim, no estilo daqueles emuladores :)
  67. 67. Akihabara Modularizado
  68. 68. Akihabara gbox.js O núcleo da engine. Criação de objetos, blit, audio e etc.
  69. 69. Akihabara O namespace principal // Objetos e grupos gbox.setGroups(["game_group","enemy"]); gbox.addObject({id:"e1", group:"enemy", x: 0, y: 0}); // Blit de objetos gbox.blitTile({tileset: this.tileset, ...}); // Assets gbox.addBundle({file:"game-bundle.js"}); // Audio gbox.playAudio("title_screen"); gbox.stopAudio("title_screen"); . . .
  70. 70. Akihabara gamecycle.js Estados e funcionalidades basicas dos jogos.
  71. 71. Akihabara Game basics game = gamecycle.createMaingame("game_id", "game_group"); // Algumas funções para controlar alguns estados básicos game.gameTitleIntroAnimation game.pressStartIntroAnimation game.gameIntroAnimation game.gameMenu // Controle de alguns objetos comuns game.hud . . .
  72. 72. Akihabara help.js Extenções no Javascript e helpers para o game
  73. 73. Akihabara Helper de Inicialização help.akihabaraInit({ title:"Zero Wing", splash:{ // Algumas notas no footnote footnotes:["All this presentation are belong to us"], // Utilizando um background customizado no splash background:["resources/my_awesome_image.jpg"] }, // Vamos utilizar offline cache offlinecache: true });
  74. 74. Akihabara toys.js Helpers para vários estilos de games
  75. 75. Akihabara Snippets para jogos // Topview toys.topview.fireBullet("bullets_group", "bullet1", {power:1}) // Shootem up toys.shmup.keepInBounds(this); toys.shmup.fireBullet("bullets_group", "bullet1", {power:1}) toys.shmup.generateScroller("game_group", "game1", {power:1}) // Plataformer toys.platformer.jumpKeys(this, "a"); // UI toys.ui.hud("maingame_hud"); . . .
  76. 76. RECONQUESTGlobal Game Jam 2011
  77. 77. Plaev Team @PotHix @_bojak@rmasoni @CrociDB
  78. 78. RECONQUESTGalaxy Tab e Motorola Milestone
  79. 79. RECONQUEST iPad e iPhone
  80. 80. Open source também! https://github.com/plaev/reconquest
  81. 81. Google Web ToolkitFeito em Java, mas exporta HTML5 e várias outras coisas!
  82. 82. GWT Angry Birds Feito com GWT e incluído na chrome web store
  83. 83. Outras engines Box2D Aves bdge GameQueryCocos2D https://gist.github.com/768272Hydra ClanFX Isogenic Engine Canvex Effect games Hydrax Crafty Mibbu
  84. 84. Site interessante com jogos feitos com HTML5
  85. 85. Algumas conclusõesBoa! Agora já posso criar meu Gears of War com HTML5!!!!!11!!
  86. 86. Obrigado! Perguntas?http://pothix.comhttp://github.com/pothix pothix@pothix.com

×