Successfully reported this slideshow.
Your SlideShare is downloading. ×

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

5 tips for your HTML5 games

  1. 1. 5 tips for your HTML5 games @ernesto_jimenez Lead Developer, Six to Start
  2. 2. 5 things that might be helpful developing your games
  3. 3. the game loop
  4. 4. GAME LOOP function 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 FLICKERING function 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 FLICKERING function 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 FLICKERING function 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 CANVAS off-screen visible
  12. 12. 1) DRAW OFF-SCREEN off-screen visible
  13. 13. 2) COPY THE RESULT off-screen visible
  14. 14. RIGHT FRAME BUFFER function 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 BUFFER function 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 not always 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 500x500px 4,000ms 3,500ms 3,000ms 2,500ms 2,000ms 1,500ms 1,000ms 500ms 0ms plain color 3 stops linear gradient blurred shadow
  21. 21. fillText is cool but it is expensive
  22. 22. think outside of the canvas
  23. 23. 1 GAME != 1 CANVAS
  24. 24. combine different canvas 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. Zakas http://oreilly.com/catalog/9780596802806

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×