10 tips to get started with html5 games
DESCRIPTION
TRANSCRIPT
© SPIL GAMES
© SPIL GAMES
YU JIANRONGZlong games
© SPIL GAMES
10 HTML5 Tips
Zlong HTML5 games
More details: http://m.agame.com
Bubble Hit Blocker MoverCastle Solitaire
© SPIL GAMES
Tip 1
Choose <Canvas> for gamesCanvas
+ Widely supported + No compatibility problems
CSS + nice effects via CSS 3D, iphone only - Compatibility problems on CSS - Crash on iOS - Flickering on Android
Desktop & Mobile
© SPIL GAMES
Tip 2 Use <audio> tag for Background Music
• Audio support is very limited
• Mobile: only one Music can be played at the same time
Desktop & Mobile
© SPIL GAMES
Tip 3 Use touch events for Mobile
• Mouse events works different on MobileDesktop : 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
Mobile
Use Dirty Rectangles for Canvas to improve framerate
• Better performanceExample of game Bubble Hit
MobileTip 4
© SPIL GAMES
Tip 5
Match button size on Mobile to finger
40 pixels is recommended for Mobile
Mobile
© SPIL GAMES
Tip 6
setTimeout instead of setInterval for game loop
setInterval: DOM may not be refresh on Android
Mobile
© SPIL GAMES
Tip 7Watch out for Memory limitations on iOS
• 10MB max for one browser tab
• Do not create large amounts of multiple Canvases. Canvas is more memory hungry than image.
• Remove the image from memory by resetting the attribute "src":
img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=";
Mobile
© SPIL GAMES
Tip 8 Use localStorage for saving data
• LocalStorage is widely supported and better than cookies
• More details: http://dev.w3.org/html5/webstorage/
Desktop & Mobile
© SPIL GAMES
Tip 9 Use YUI Compressor to compress your code
• YUI compressor for size reduction and basic obfuscation• JSMin: only reduces size
Desktop & Mobile
© SPIL GAMES
Tip 10 Tools for mobile debugging and tuning
• Use aCatLog (android market app) or adb logcat (Android Debug Bridge) to read the browser log on Android
• Bookmarklet (javascript: URI) is useful
javascript:Game.PlayerSpeed=prompt("Player Speed:")
• For desktop: use chrome to debug and trace
Mobile
© SPIL GAMES
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/