Your SlideShare is downloading. ×
0
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with html5 games
10 tips to get started with 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

10 tips to get started with html5 games

12,497

Published on

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

No Downloads
Views
Total Views
12,497
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
113
Comments
0
Likes
14
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

Transcript

  • 1.
  • 2. YU JIANRONG<br />Zlonggames <br />
  • 3. 10 HTML5 Tips<br />
  • 4. Zlong HTML5 games<br />Castle Solitaire<br />Blocker Mover<br />Bubble Hit<br />More details: http://m.agame.com<br />
  • 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. Tip 2 <br />Use <audio> tag for Background Music<br /><ul><li>Audio support is very limited
  • 7. Mobile: only one Music can be played at the same time</li></ul>Desktop & Mobile<br />
  • 8. Tip 3 <br />Use touch events for Mobile<br /><ul><li>Mouse events works different on Mobile
  • 9. Desktop : Mouse events (e.g. onmouseup)
  • 10. Mobile : Touch events (e.g. ontouchstart)
  • 11. Note: multi-touch events supported by iOS only
  • 12. For more details: visit http://developer.apple.com/devcenter/safari/index.action</li></ul>Mobile<br />
  • 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. Tip 5 <br />Mobile<br />Match button size on Mobile to finger<br />40 pixels is recommended for Mobile<br />
  • 15. Tip 6<br />Mobile<br />setTimeout instead of <br />setIntervalfor game loop<br />setInterval: DOM may not be refresh on Android<br />
  • 16. Tip 7<br />Watch out for Memory limitations on iOS<br /><ul><li>10MB max for one browser tab
  • 17. Do not create large amounts of multiple Canvases. Canvas is more memory hungry than image.
  • 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. Tip 8 <br />Use localStorage for saving data<br /><ul><li>LocalStorageis widely supported and better than cookies
  • 20. More details: http://dev.w3.org/html5/webstorage/</li></ul>Desktop & Mobile<br />
  • 21. Tip 9 <br />Use YUI Compressor <br />to compress your code<br /><ul><li>YUI compressor for size reduction and basic obfuscation
  • 22. JSMin: only reduces size</li></ul>Desktop & Mobile<br />
  • 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. 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. 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 />

×