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
Upcoming SlideShare
Loading in …5
×

5 tips for your HTML5 games

337,812
-1

Published on

Published in: Technology
6 Comments
45 Likes
Statistics
Notes
  • Tips suck...why on earth would you draw two canvases, using more resources? ESPECIALLY when drawing with the CPU instead of GPU.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very good tips. Thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Javier, about SVG vs. Canvas, there are multiple comparisons on pros and cons. You can see http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/#comparison-of-svg-and-canvas

    About performance, if you are going to be changing the SVG and have a complex structure, it's going to be expensive because it's DOM modifications and touching the DOM is always slow and expensive.

    Some initial info to speedup performance when touching the DOM: https://developers.google.com/speed/articles/javascript-dom
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks for your slide, but what about SVG performance vs canvas ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
337,812
On Slideshare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
653
Comments
6
Likes
45
Embeds 0
No embeds

No notes for slide
  • \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
  • 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
    1. A particular slide catching your eye?

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

    ×