O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
5 tips for yourHTML5 games @ernesto_jimenez Lead Developer, Six to Start
5 things that   might be helpfuldeveloping your games
the game loop
GAME LOOPfunction updateGame () {  processPlayerInput();  updateGameLogic();  draw();  setTimeout(updateGame, 25);}
GAME LOOP• Drawing   is the most expensive• Game   is locked while running the update• We   are consuming resources
you don’t always need     a game loop
frame buffering
ABOUT FLICKERINGfunction draw() {  var canvas = document.getElementById(visible-canvas);  var context = canvas.getContext(...
ABOUT FLICKERINGfunction draw() {  var canvas = document.getElementById(visible-canvas);  var context = canvas.getContext(...
ABOUT FLICKERINGfunction draw() {  var canvas = document.getElementById(visible-canvas);  var context = canvas.getContext(...
USE TWO CANVASoff-screen      visible
1) DRAW OFF-SCREENoff-screen     visible
2) COPY THE RESULToff-screen      visible
RIGHT FRAME BUFFERfunction draw() {  var buffer = document.createElement(canvas);  var canvas = document.getElementById(vi...
WRONG FRAME BUFFERfunction draw() {  var buffer = document.createElement(canvas);  var canvas = document.getElementById(vi...
avg. time for 1,000 frame-buffer operations in Firefox 4.0b7              right frame buffer                 wrong frame b...
frame buffer is notalways useful right now    Browsers are repainting the canvas after your JS
expensive drawing
getImageData     &putImageData
avg. time for 1,000 fillRect in Firefox 4.0b7                 fillRect 100x100px                   fillRect 500x500px4,000ms3...
fillText is coolbut it is expensive
think outside of the       canvas
1 GAME != 1 CANVAS
combine differentcanvas to produce a   single screen
images from Belén Albeza (@ladybenko)
images from Belén Albeza (@ladybenko)
dirty rectangles
redraw only those areas   that have changed
images from Belén Albeza (@ladybenko)
images from Belén Albeza (@ladybenko)
HIGH     PERFORMANCE      JAVASCRIPT         Nicholas C. Zakashttp://oreilly.com/catalog/9780596802806
5 tips for your HTML5 games
Próximos SlideShares
Carregando em…5
×

5 tips for your HTML5 games

417.759 visualizações

Publicada em

Publicada em: Tecnologia
  • These are one of the best companies for review articles. High quality with cheap rates. ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I highly recommend it :)
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Dating direct: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Dating direct: ❤❤❤ http://bit.ly/33tKWiU ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/33tKWiU ❶❶❶
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • How I Cured My Acne? Ex Sufferer reveals secret system For Lasting Acne Free Skin ➤➤ https://bit.ly/2xJfKi2
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

5 tips for your HTML5 games

  1. 1. 5 tips for yourHTML5 games @ernesto_jimenez Lead Developer, Six to Start
  2. 2. 5 things that might be helpfuldeveloping your games
  3. 3. the game loop
  4. 4. GAME LOOPfunction updateGame () { processPlayerInput(); updateGameLogic(); draw(); setTimeout(updateGame, 25);}
  5. 5. GAME LOOP• Drawing is the most expensive• Game is locked while running the update• We are consuming resources
  6. 6. you don’t always need a game loop
  7. 7. frame buffering
  8. 8. ABOUT FLICKERINGfunction draw() { var canvas = document.getElementById(visible-canvas); var context = canvas.getContext(2d); context.fillStyle = red; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200);}
  9. 9. ABOUT FLICKERINGfunction draw() { var canvas = document.getElementById(visible-canvas); var context = canvas.getContext(2d); context.fillStyle = red; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200);}
  10. 10. ABOUT FLICKERINGfunction draw() { var canvas = document.getElementById(visible-canvas); var context = canvas.getContext(2d); context.fillStyle = red; // Draw 200x200 square in x: 0 y: 0 context.fillRect(0, 0, 200, 200); // Draw 200x200 square in x: 200 y: 200 context.fillRect(0, 0, 200, 200);}
  11. 11. USE TWO CANVASoff-screen visible
  12. 12. 1) DRAW OFF-SCREENoff-screen visible
  13. 13. 2) COPY THE RESULToff-screen visible
  14. 14. RIGHT FRAME BUFFERfunction draw() { var buffer = document.createElement(canvas); var canvas = document.getElementById(visible-canvas); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext(2d); var context = canvas.getContext(2d); buffer_context.fillStyle = red; // Draw ... context.drawImage(buffer, 0, 0);}
  15. 15. WRONG FRAME BUFFERfunction draw() { var buffer = document.createElement(canvas); var canvas = document.getElementById(visible-canvas); buffer.width = canvas.width; buffer.height = canvas.height; var buffer_context = buffer.getContext(2d); var context = canvas.getContext(2d); buffer_context.fillStyle = red; // Draw ... var data = buffer_context.getImageData(0, 0, canvas.width,canvas.height); context.putImageData(data, 0, 0);}
  16. 16. avg. time for 1,000 frame-buffer operations in Firefox 4.0b7 right frame buffer wrong frame buffer 7,000ms 6,300ms 5,600ms 4,900ms 4,200ms 3,500ms 2,800ms 2,100ms 1,400ms 700ms 0ms plain color
  17. 17. frame buffer is notalways useful right now Browsers are repainting the canvas after your JS
  18. 18. expensive drawing
  19. 19. getImageData &putImageData
  20. 20. avg. time for 1,000 fillRect in Firefox 4.0b7 fillRect 100x100px fillRect 500x500px4,000ms3,500ms3,000ms2,500ms2,000ms1,500ms1,000ms 500ms 0ms plain color 3 stops linear gradient blurred shadow
  21. 21. fillText is coolbut it is expensive
  22. 22. think outside of the canvas
  23. 23. 1 GAME != 1 CANVAS
  24. 24. combine differentcanvas to produce a single screen
  25. 25. images from Belén Albeza (@ladybenko)
  26. 26. images from Belén Albeza (@ladybenko)
  27. 27. dirty rectangles
  28. 28. redraw only those areas that have changed
  29. 29. images from Belén Albeza (@ladybenko)
  30. 30. images from Belén Albeza (@ladybenko)
  31. 31. HIGH PERFORMANCE JAVASCRIPT Nicholas C. Zakashttp://oreilly.com/catalog/9780596802806

×