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