TDC2011 - Desenvolvimento de jogos com Javascript e HTML5

7,216
-1

Published on

Desenvolvimento de jogos utilizando HTML5 e Javascript

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,216
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
89
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

×