10 tips to get started with html5 games
DESCRIPTION
TRANSCRIPT
![Page 1: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/1.jpg)
© SPIL GAMES
![Page 2: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/2.jpg)
© SPIL GAMES
YU JIANRONGZlong games
![Page 3: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/3.jpg)
© SPIL GAMES
10 HTML5 Tips
![Page 4: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/4.jpg)
Zlong HTML5 games
More details: http://m.agame.com
Bubble Hit Blocker MoverCastle Solitaire
![Page 5: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/5.jpg)
© 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
![Page 6: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/6.jpg)
© 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
![Page 7: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/7.jpg)
© 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
![Page 8: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/8.jpg)
Use Dirty Rectangles for Canvas to improve framerate
• Better performanceExample of game Bubble Hit
MobileTip 4
![Page 9: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/9.jpg)
© SPIL GAMES
Tip 5
Match button size on Mobile to finger
40 pixels is recommended for Mobile
Mobile
![Page 10: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/10.jpg)
© SPIL GAMES
Tip 6
setTimeout instead of setInterval for game loop
setInterval: DOM may not be refresh on Android
Mobile
![Page 11: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/11.jpg)
© 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
![Page 12: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/12.jpg)
© 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
![Page 13: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/13.jpg)
© 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
![Page 14: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/14.jpg)
© 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
![Page 15: 10 tips to get started with html5 games](https://reader034.vdocuments.mx/reader034/viewer/2022050720/547b37a05906b568798b45a4/html5/thumbnails/15.jpg)
© 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/