Your SlideShare is downloading. ×
0
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
5 tips for your HTML5 games
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

5 tips for your HTML5 games

301,991

Published on

Published in: Technology
6 Comments
43 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
301,991
On Slideshare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
638
Comments
6
Likes
43
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. 5 tips for yourHTML5 games @ernesto_jimenez Lead Developer, Six to Start
    • 2. 5 things that might be helpfuldeveloping your games
    • 3. the game loop
    • 4. GAME LOOPfunction updateGame () { processPlayerInput(); updateGameLogic(); draw(); setTimeout(updateGame, 25);}
    • 5. GAME LOOP• Drawing is the most expensive• Game is locked while running the update• We are consuming resources
    • 6. you don’t always need a game loop
    • 7. frame buffering
    • 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. 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. 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. USE TWO CANVASoff-screen visible
    • 12. 1) DRAW OFF-SCREENoff-screen visible
    • 13. 2) COPY THE RESULToff-screen visible
    • 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. 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. 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. frame buffer is notalways useful right now Browsers are repainting the canvas after your JS
    • 18. expensive drawing
    • 19. getImageData &putImageData
    • 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. fillText is coolbut it is expensive
    • 22. think outside of the canvas
    • 23. 1 GAME != 1 CANVAS
    • 24. combine differentcanvas to produce a single screen
    • 25. images from Belén Albeza (@ladybenko)
    • 26. images from Belén Albeza (@ladybenko)
    • 27. dirty rectangles
    • 28. redraw only those areas that have changed
    • 29. images from Belén Albeza (@ladybenko)
    • 30. images from Belén Albeza (@ladybenko)
    • 31. HIGH PERFORMANCE JAVASCRIPT Nicholas C. Zakashttp://oreilly.com/catalog/9780596802806

    ×