Your SlideShare is downloading. ×
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,236

Published on

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

No Downloads
Views
Total Views
12,236
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
    Zlonggames
  • 3. 10 HTML5 Tips
  • 4. Zlong HTML5 games
    Castle Solitaire
    Blocker Mover
    Bubble Hit
    More details: http://m.agame.com
  • 5. Tip 1
    Desktop & Mobile
    Choose <Canvas> for games
    Canvas
    + Widely supported
    + No compatibility problems
    CSS
    + nice effects via CSS 3D, iphone only
    - Compatibility problems on CSS
    - Crash on iOS
    - Flickering on Android
  • 6. Tip 2
    Use <audio> tag for Background Music
    • Audio support is very limited
    • 7. Mobile: only one Music can be played at the same time
    Desktop & Mobile
  • 8. Tip 3
    Use touch events for Mobile
    • 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
    Mobile
  • 13. Tip 4
    Mobile
    Use Dirty Rectangles for Canvas
    to improve framerate
    • Better performance
    Example of game Bubble Hit
  • 14. Tip 5
    Mobile
    Match button size on Mobile to finger
    40 pixels is recommended for Mobile
  • 15. Tip 6
    Mobile
    setTimeout instead of
    setIntervalfor game loop
    setInterval: DOM may not be refresh on Android
  • 16. Tip 7
    Watch out for Memory limitations on iOS
    • 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":
    img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=";
    Mobile
  • 19. Tip 8
    Use localStorage for saving data
    • LocalStorageis widely supported and better than cookies
    • 20. More details: http://dev.w3.org/html5/webstorage/
    Desktop & Mobile
  • 21. Tip 9
    Use YUI Compressor
    to compress your code
    • YUI compressor for size reduction and basic obfuscation
    • 22. JSMin: only reduces size
    Desktop & Mobile
  • 23. Tip 10
    Tools for mobile debugging and tuning
    • Use aCatLog (android market app) or adblogcat (Android Debug Bridge) to read the browser log on Android
    • 24. Bookmarklet(javascript: URI) is useful
    javascript:Game.PlayerSpeed=prompt("Player Speed:")
    • For desktop: use chrome to debug and trace
    Mobile
  • 25. Getting started
    DIVE INTO HTML5: http://diveintohtml5.org/
    Safari Reference Library: http://developer.apple.com/library/safari/navigation/
    https://developer.mozilla.org/en/HTML/HTML5
    http://m.agame.com/

×