10 tips to get started with html5 games

13,332 views
13,128 views

Published on

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,332
On SlideShare
0
From Embeds
0
Number of Embeds
2,597
Actions
Shares
0
Downloads
119
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

10 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 />

×