0
YU JIANRONG<br />Zlonggames <br />
10 HTML5 Tips<br />
Zlong HTML5 games<br />Castle Solitaire<br />Blocker Mover<br />Bubble Hit<br />More details: http://m.agame.com<br />
Tip 1 <br />Desktop & Mobile<br />Choose <Canvas> for games<br />Canvas<br />+ Widely supported<br /> + No compatibility p...
Tip 2 <br />Use <audio> tag for Background Music<br /><ul><li>Audio support is very limited
Mobile: only one Music can be played at the same time</li></ul>Desktop & Mobile<br />
Tip 3 <br />Use touch events for Mobile<br /><ul><li>Mouse events works different on Mobile
Desktop : Mouse events (e.g. onmouseup)
Mobile : Touch events (e.g. ontouchstart)
Note: multi-touch events supported by iOS only
For more details: visit http://developer.apple.com/devcenter/safari/index.action</li></ul>Mobile<br />
Tip 4 <br />Mobile<br />Use Dirty Rectangles for Canvas <br />to improve framerate<br /><ul><li>Better performance</li></u...
Tip 5 <br />Mobile<br />Match button size on Mobile to finger<br />40 pixels is recommended for Mobile<br />
Tip 6<br />Mobile<br />setTimeout instead of <br />setIntervalfor game loop<br />setInterval: DOM may not be refresh on An...
Upcoming SlideShare
Loading in...5
×

Top10 tips to get started with html5 games

1,014

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,014
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Top10 tips to get started with html5 games"

  1. 1.
  2. 2. YU JIANRONG<br />Zlonggames <br />
  3. 3. 10 HTML5 Tips<br />
  4. 4. Zlong HTML5 games<br />Castle Solitaire<br />Blocker Mover<br />Bubble Hit<br />More details: http://m.agame.com<br />
  5. 5. Tip 1 <br />Desktop & Mobile<br />Choose <Canvas> for games<br />Canvas<br />+ Widely supported<br /> + No compatibility problems<br />CSS<br /> + nice effects via CSS 3D, iphone only <br /> - Compatibility problems on CSS<br /> - Crash on iOS<br /> - Flickering on Android<br />
  6. 6. Tip 2 <br />Use <audio> tag for Background Music<br /><ul><li>Audio support is very limited
  7. 7. Mobile: only one Music can be played at the same time</li></ul>Desktop & Mobile<br />
  8. 8. Tip 3 <br />Use touch events for Mobile<br /><ul><li>Mouse events works different on Mobile
  9. 9. Desktop : Mouse events (e.g. onmouseup)
  10. 10. Mobile : Touch events (e.g. ontouchstart)
  11. 11. Note: multi-touch events supported by iOS only
  12. 12. For more details: visit http://developer.apple.com/devcenter/safari/index.action</li></ul>Mobile<br />
  13. 13. Tip 4 <br />Mobile<br />Use Dirty Rectangles for Canvas <br />to improve framerate<br /><ul><li>Better performance</li></ul>Example of game Bubble Hit<br />
  14. 14. Tip 5 <br />Mobile<br />Match button size on Mobile to finger<br />40 pixels is recommended for Mobile<br />
  15. 15. Tip 6<br />Mobile<br />setTimeout instead of <br />setIntervalfor game loop<br />setInterval: DOM may not be refresh on Android<br />
  16. 16. Tip 7<br />Watch out for Memory limitations on iOS<br /><ul><li>10MB max for one browser tab
  17. 17. Do not create large amounts of multiple Canvases. Canvas is more memory hungry than image.
  18. 18. Remove the image from memory by resetting the attribute "src":</li></ul>img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=";<br />Mobile<br />
  19. 19. Tip 8 <br />Use localStorage for saving data<br /><ul><li>LocalStorageis widely supported and better than cookies
  20. 20. More details: http://dev.w3.org/html5/webstorage/</li></ul>Desktop & Mobile<br />
  21. 21. Tip 9 <br />Use YUI Compressor <br />to compress your code<br /><ul><li>YUI compressor for size reduction and basic obfuscation
  22. 22. JSMin: only reduces size</li></ul>Desktop & Mobile<br />
  23. 23. Tip 10 <br />Tools for mobile debugging and tuning<br /><ul><li>Use aCatLog (android market app) or adblogcat (Android Debug Bridge) to read the browser log on Android
  24. 24. Bookmarklet(javascript: URI) is useful</li></ul>javascript:Game.PlayerSpeed=prompt("Player Speed:")<br /><ul><li>For desktop: use chrome to debug and trace</li></ul>Mobile<br />
  25. 25. Getting started<br />DIVE INTO HTML5: http://diveintohtml5.org/<br />Safari Reference Library: http://developer.apple.com/library/safari/navigation/<br />https://developer.mozilla.org/en/HTML/HTML5<br />http://m.agame.com/<br />
  1. A particular slide catching your eye?

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

×