appMobi HTML5 Gaming

04/11/2023 1

Who am I?

Andrew SmithappMobi Developer Evangelist

Web Development@profMobi

• 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?

04/11/2023 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

What does appMobi do?

As a company, appMobi endeavors to be a leader in HTML5 mobile technologies

Desktop Mobile

04/11/2023 6

• 1 Billion Units• Trending away from

Apps• 100 Million+ Web Sites

• 10 Billion+ Units• Trending towards Apps• 300,000 Mobile Apps,

few mobile web sites

The Opportunity

What if your application could use the same technology for both mobile

web sites and native apps?

04/11/2023 7

Why Your Application Should Be HTML5 Based

On the Sidelines

04/11/2023 8

• 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

HTML5 Enables Publishers to Create Great Mobile Apps!

04/11/2023 9

100’s of Publishers Using HTML for Native Apps

Indie Games

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

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”

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

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

The Anatomy of an appMobi

Application

Free Tools

The appMobi XDK Development

Tool

JavaScript API

http://www.appmobi.com/documentation

The appStarter App Template

Generator

jqMobi

Preview your Application on Device

Send the app link to your mobile device

• Go to the App Store or Android Market and install it.

• Search for "applab" to find it.

Install the appLab application

• Open the application link in your web browser to get the launch page.

• Touch Launch to see your application.

Open the link on the device’s web

browser

Cloud Based Build System –

appHub

Build your Application

Select “Upload and Build”

Enter Application Details

Download or Send Completed

Application

Builds Automated After Success

debugMobi

HTML5 Game Development

• directCanvas• directBox2D• Android Multi-Touch• Multi-Sound

HTML5 Game Development

directCanvas

Pros Cons

• Accelerates sprites built using the HTML5 canvas tag on iOS and Android

• No need to compile your application a particular way to take advantage of the acceleration

• Regular canvas tag commands are used

• Two contexts for canvas and HTML can cause a bottleneck

• CSS background images may not be used

• Any commands not built into the context will crash an application built with directCanvas

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

directCanvas

directBox2D

Android Multi-Touch

Multi-Sound

Cloud Services

The appMobi Cloud Services provide enhancements for mobile HTML5 applications• Frictionless Payments• Push Messaging• Analytics• Game Development

Tools• Over the air updates

Cloud Services

Show and Tell

Sample Code

Find more information at:

http://www.appmobi.com/documenta

tion

Where I’ll be next:

@profMobi