Who Am I? appMobi's lead HTML5 game developer / evangelist Languages: JavaScript, HTML5, CSS3, PHP, mySQL, Lua Project Leader/Lead Developer of BoomTown - An HTML5 game that's deployed to iOS, Android, Amazon, Kindle Fire, Nook, Chrome Store, Facebook, Intel AppUp, and Mozilla app store with one code base.

Overview What HTML5 game engine will you use? How to optimize your code for all platforms What native functions will you need? How do you research your target platforms? How will you distribute your game? (Native app stores or browser) How will you deploy?

Game Engines Great list of HTML5 game engines: https://github.com/bebraw/jswiki/wiki/Game-Engines How to decide Supports needed functions ( collision detection, level creator, sprite animator, multi-player) Maintained / Forums / Support Debugging tools Cost Does it run well on mobile? (best for last)

Game Engines Does the game engine pre-render? Huge for performance! Draw canvas on canvas How well does is scale on different devices? Think retina displays Does it have built in device detection? Does it support touch inputs? How big is the engine's file size?

Mobile Performance Pre-render tile backgrounds Conserve draw calls Small binary size

Mobile Performance Pre-render Backgrounds

Mobile Performance Manage Draw Calls

Mobile Performance Pull sound out of binary Dynamically cache depending on device Use .jpgs instead of .pngs when able Typically UI changes Bundle size 15MB or less Make sure it can be downloaded without wifi

Native Functions What will your game need? Acclerometer Geolocation Camera Contacts

Research Supported Platforms Controls Placement on screen How will they appear/work while on desktop? Will you need multi-touch? HTML5 Support Canvas tag Audio tag HTML5 performance Screen width/height Screen ratio

Research Supported Platforms Screen Width and Height

Hybrid App vs Browser (iOS) Hybrid Apps (appMobi/Phonegap) $$ Money Makers $$ Native functionality via JS API's (FB and Twitter) More screen space (safari has unreliable full screen mode) Locking orientation “No” download time Access to hardware acceleration - directCanvas NATIVE SOUND!!!! Works with no internet connection

Hybrid App vs Browser (Android) Hybrid Apps (appMobi/Phonegap) No Multi-Touch Yet Fragmented webviews Access to hardware acceleration - directCanvas 2.2+ webview OK at HTML5 More screen space Locking orientation “No” download time NATIVE SOUND!!!!

Peak Performance! DirectCanvas Other Third Party Accelerators Accelerates 2-10X 2 contexts Uses JavaScriptCore: OpenGL and OpenAL to render graphics Write once, deploy all Multi-Touch! Other Third Party Accelerators iOSImpact CocoonJS

Deploy! appMobi Build System IOS, Android, Amazon, Kindle Fire, Nook, Intel AppUp, Mozilla App Store, Facebook, Chrome Store. Phonegap iOS, Android,Blackberry, palm, WP7 Cocoonjs IOS, Android Awesomium Desktop: .exe, Mac store