5 tips for your HTML5 games
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

5 tips for your HTML5 games

on

  • 269,317 views

 

Statistics

Views

Total Views
269,317
Views on SlideShare
41,135
Embed Views
228,182

Actions

Likes
39
Downloads
595
Comments
5

76 Embeds 228,182

http://www.designer-daily.com 227021
http://www.scoop.it 503
http://translate.googleusercontent.com 211
http://www.website-ontwerpen-blog.nl 79
http://feeds.feedburner.com 66
http://webcache.googleusercontent.com 39
https://twitter.com 27
https://www.google.com 27
http://lanyrd.com 18
http://www.google.com 17
http://www.google.ro 11
http://veillete.blogspot.com 9
https://www.google.co.uk 8
http://mail.info.lt 6
http://translate.google.com 6
https://www.google.se 6
http://bowierocks.com 6
http://www.profuzion.com 6
https://www.google.ca 6
http://www.google.co.in 5
http://www.google.co.il 5
http://feeds2.feedburner.com 5
http://www.linkedin.com 4
http://www.hanrss.com 4
http://www.google.co.uk 4
http://www.twylah.com 3
http://www.pkwebdesigns.com.au 3
http://xpresswebapps.nokia.com 3
https://www.google.co.in 3
http://blog.naver.com 3
http://electronicsexpo.blogspot.in 3
http://www.google.com.my 3
http://www.google.it 2
http://pinterest.com 2
https://www.google.ie 2
http://www.google.se 2
http://www.plurk.com 2
http://www.google.hu 2
http://www.google.nl 2
https://www.google.fr 2
https://www.google.es 2
https://si0.twimg.com 2
https://www.google.de 2
http://feedproxy.google.com 2
http://twitter.com 2
http://spannow.com 2
http://dev-wam.browser.ovi.com 2
https://www.google.com.au 2
http://us-w1.rockmelt.com 2
http://static.slidesharecdn.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Very good tips. Thanks
    Are you sure you want to
    Your message goes here
    Processing…
  • @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
    Are you sure you want to
    Your message goes here
    Processing…
  • thanks for your slide, but what about SVG performance vs canvas ?
    Are you sure you want to
    Your message goes here
    Processing…
  • nice!
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks, gave some good suggestions.
    Put a kinda-transcript in my Blog (easier to get back to it there).
    http://kcode.de/wordpress/?p=1459
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation 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