10 tips to get started with html5 games
•Download as PPTX, PDF•
14 likes•9,388 views
This document provides 10 tips for developing HTML5 games for both desktop and mobile platforms. Some key points covered include using the <canvas> tag for games, touch events for mobile, dirty rectangles to improve framerate on mobile, matching button sizes to fingers, using localStorage to save game data, and tools for debugging mobile games. More details on these techniques and HTML5 game development can be found at the listed web addresses.
10 tips to get started with html5 games
- 4. Zlong HTML5 gamesCastle SolitaireBlocker MoverBubble HitMore details: http://m.agame.com
- 5. Tip 1 Desktop & MobileChoose <Canvas> for gamesCanvas+ Widely supported + No compatibility problemsCSS + 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 MusicAudio support is very limited
- 7. Mobile: only one Music can be played at the same timeDesktop & Mobile
- 8. Tip 3 Use touch events for MobileMouse 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.actionMobile
- 13. Tip 4 MobileUse Dirty Rectangles for Canvas to improve framerateBetter performanceExample of game Bubble Hit
- 14. Tip 5 MobileMatch button size on Mobile to finger40 pixels is recommended for Mobile
- 15. Tip 6MobilesetTimeout instead of setIntervalfor game loopsetInterval: DOM may not be refresh on Android
- 16. Tip 7Watch out for Memory limitations on iOS10MB 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 dataLocalStorageis 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 codeYUI compressor for size reduction and basic obfuscation
- 22. JSMin: only reduces sizeDesktop & Mobile
- 23. Tip 10 Tools for mobile debugging and tuningUse aCatLog (android market app) or adblogcat (Android Debug Bridge) to read the browser log on Android
- 24. Bookmarklet(javascript: URI) is usefuljavascript:Game.PlayerSpeed=prompt("Player Speed:")For desktop: use chrome to debug and traceMobile
- 25. Getting startedDIVE INTO HTML5: http://diveintohtml5.org/Safari Reference Library: http://developer.apple.com/library/safari/navigation/https://developer.mozilla.org/en/HTML/HTML5http://m.agame.com/