5 tips for your HTML5 games

345,297 views
358,999 views

Published on

Published in: Technology
6 Comments
46 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
345,297
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
656
Comments
6
Likes
46
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

    ×