appMobi HTML5 Gaming


Published on

This slideshow outlines what appMobi does in some broad strokes and then goes into more detail about the gaming features that appMobi gives to HTML5 gaming.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

appMobi HTML5 Gaming

  1. 1. 10/26/2012 1
  2. 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
  3. 3. • What is appMobi all about?• What is the anatomy of an appMobi app? • What free stuff does appMobi offer? • What is in it for appMobi? • What was that about HTML5 gaming?
  4. 4. Mission: To unify the technologies used in delivering web and mobile apps,simplifying the process of development and resulting in a new class of creative and compelling native mobile apps and interactive ads. Strategy:Offer a cloud-based, white-label platform that opens up the world of cross-device native mobile app creation to web developers, using familiar languages and tools: HTML and JavaScript 10/26/2012 4
  5. 5. As a company,appMobi endeavorsto be a leader in appMobi do? What doesHTML5 mobiletechnologies
  6. 6. The Opportunity Desktop Mobile • 1 Billion Units • 10 Billion+ Units • Trending away from Apps • Trending towards Apps • 100 Million+ Web Sites • 300,000 Mobile Apps, few mobile web sitesWhat if your application could use the same technology for both mobile web sites and native apps? 10/26/2012 6
  7. 7. Why Your Application Should Be HTML5 Based On the Sidelines 10/26/2012 7
  8. 8. HTML5 Enables Publishers to Create Great Mobile Apps!• It’s the obvious solution – enable apps to be written in standard HTML and JavaScript.• Can be used to write mobile web- sites and true native apps using appMobi.• Every major player in mobile is investing heavily in HTML5 and optimized JavaScript engines.• HTML5 Animation & Super-optimized JavaScript engines = great apps. • Capable of doing much more on mobile than on desktop web sites 10/26/2012 8
  9. 9. 100’s of Publishers Using HTML for Native Apps Indie Games 10/26/2012 9
  10. 10. The Anatomy of an appMobi Application
  11. 11. The Anatomy of an appMobi Application• All appMobi Native Mobile applications are “hybrid” applications.• They run natively, and may be loaded from the device’s native application store.• They are programmed using HTML5 technology and then compiled.• An appMobi app may be built yourself or by our build system
  12. 12. The Anatomy of an appMobi Application• All appMobi applications are built using a full-screen web view control as its UI• The web programming that makes the application is simply a tiny website• The HTML, JavaScript, data, and images that make up that tiny website are collectively known as a “bundle”
  13. 13. The Anatomy of an appMobi Application• Features of the device itself are accessed through integrated JavaScript libraries served up by a tiny webserver in the application itself• The main library is referenced from: http://localhost:58888/_ appMobi/appmobi.js
  14. 14. The Anatomy of an appMobi Application• The “bundle” is tested by loading it into either the XDK or a test application over the Internet• Once the application is ready for production, it would be built into its own mobile application for distribution through the appropriate application stores
  15. 15. Free Tools
  16. 16. The appMobi XDK Development Tool
  17. 17. JavaScript API
  18. 18. The appStarter App Template Generator
  19. 19. jqMobi
  20. 20. Preview your Application on Device
  21. 21. Send the app link to your mobile device
  22. 22. Install the appLab application• Go to the App Store or Android Market and install it.• Search for "applab" to find it.
  23. 23. Open the link on the device’s web browser• Open the application link in your web browser to get the launch page.• Touch Launch to see your application.
  24. 24. Cloud Based Build System – appHub
  25. 25. Build your Application
  26. 26. Select “Upload and Build”
  27. 27. Enter Application Details
  28. 28. Download or Send Completed Application
  29. 29. Builds Automated After Success
  30. 30. debugMobi
  31. 31. HTML5 Game Development
  32. 32. HTML5 Game Development• directCanvas• directBox2D• Android Multi-Touch• Multi-Sound
  33. 33. directCanvas
  34. 34. directCanvas Pros Cons• Accelerates sprites built • Two contexts for canvas using the HTML5 canvas and HTML can cause a tag on iOS and Android bottleneck• No need to compile your • CSS background images application a particular way may not be used to take advantage of the • Any commands not built acceleration into the context will crash• Regular canvas tag an application built with commands are used directCanvas
  35. 35. directCanvas • HTML5 context is above the directCanvas context • Sending information back and forth between both contexts • Make sure to use the present command to see anything • Commands that aren’t supported in the directCanvas context can crash the app
  36. 36. directBox2D
  37. 37. Android Multi-Touch
  38. 38. Multi-Sound
  39. 39. Cloud Services
  40. 40. Cloud ServicesThe appMobi Cloud Servicesprovide enhancements formobile HTML5 applications• Frictionless Payments• Push Messaging• Analytics• Game Development Tools• Over the air updates
  41. 41. Show and Tell
  42. 42. Sample Code
  43. 43. Find more information at: Where I’ll be next: @profMobi