appMobi HTML5 Gaming
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


appMobi HTML5 Gaming



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.

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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 5 3 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

appMobi HTML5 Gaming Presentation Transcript

  • 1. 10/26/2012 1
  • 2. Who am I? Andrew Smith appMobi Developer Evangelist Web Development @profMobi
  • 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. 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. As a company,appMobi endeavorsto be a leader in appMobi do? What doesHTML5 mobiletechnologies
  • 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. Why Your Application Should Be HTML5 Based On the Sidelines 10/26/2012 7
  • 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. 100’s of Publishers Using HTML for Native Apps Indie Games 10/26/2012 9
  • 10. The Anatomy of an appMobi Application
  • 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. 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. 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. 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. Free Tools
  • 16. The appMobi XDK Development Tool
  • 17. JavaScript API
  • 18. The appStarter App Template Generator
  • 19. jqMobi
  • 20. Preview your Application on Device
  • 21. Send the app link to your mobile device
  • 22. Install the appLab application• Go to the App Store or Android Market and install it.• Search for "applab" to find it.
  • 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. Cloud Based Build System – appHub
  • 25. Build your Application
  • 26. Select “Upload and Build”
  • 27. Enter Application Details
  • 28. Download or Send Completed Application
  • 29. Builds Automated After Success
  • 30. debugMobi
  • 31. HTML5 Game Development
  • 32. HTML5 Game Development• directCanvas• directBox2D• Android Multi-Touch• Multi-Sound
  • 33. directCanvas
  • 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. 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. directBox2D
  • 37. Android Multi-Touch
  • 38. Multi-Sound
  • 39. Cloud Services
  • 40. Cloud ServicesThe appMobi Cloud Servicesprovide enhancements formobile HTML5 applications• Frictionless Payments• Push Messaging• Analytics• Game Development Tools• Over the air updates
  • 41. Show and Tell
  • 42. Sample Code
  • 43. Find more information at: Where I’ll be next: @profMobi