10 tips to get started with html5 games

YU JIANRONG
Zlonggames

10 HTML5 Tips

Zlong HTML5 games
Castle Solitaire
Blocker Mover
Bubble Hit
More details: http://m.agame.com

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

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

Tip 3
Use touch events for Mobile
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
Mobile

Tip 4
Mobile
Use Dirty Rectangles for Canvas
to improve framerate
Better performance
Example of game Bubble Hit

Tip 5
Mobile
Match button size on Mobile to finger
40 pixels is recommended for Mobile

Tip 6
Mobile
setTimeout instead of
setIntervalfor game loop
setInterval: DOM may not be refresh on Android

Tip 7
Watch 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

Tip 8
Use localStorage for saving data
LocalStorageis widely supported and better than cookies
More details: http://dev.w3.org/html5/webstorage/
Desktop & Mobile

Tip 9
Use YUI Compressor
to compress your code
YUI compressor for size reduction and basic obfuscation
JSMin: only reduces size
Desktop & Mobile

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
Bookmarklet(javascript: URI) is useful
javascript:Game.PlayerSpeed=prompt("Player Speed:")
For desktop: use chrome to debug and trace
Mobile

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/

http://www.html5dev.ru	2254
http://news.uxdc.jp	18
http://paper.li	18
http://www.chandra-study.com	8
http://localhost	4
http://html5ru.blogspot.com	3
http://html5dev.ru	3
http://edicolaeuropea.blogspot.com	2
http://xss.yandex.net	2
http://hghltd.yandex.net	2
http://twittertim.es	1
http://webcache.googleusercontent.com	1

10 tips to get started with html5 games

by Kukolj Gregory

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 2,316

Statistics

10 tips to get started with html5 games Presentation Transcript