This deck was presented by appMobi's CTO Sam Abadir at the New Game Conference on November 2, 2010 and covers best practices on developing native-speed games with appMobi's DirectCanvas technology.

1. HTML5 | CLOUD SERVICES
Extreme Mobile HTML5 Canvas
Rendering Using DirectCanvas
11/23/2011 1

2. Browsers weren‟t build for games
• HTML5 was built for desktop, but is more important on
mobile.
• DirectCanvas is an HTML5 stop-gap. Nothing will make
us happier than when it‟s not needed anymore.
• The DOM is your enemy
o The DOM is inherently constructed around a “reflow” concept – bad for game
rendering.
• The DOM was developed to address the presentation of
a readable/interactive page.
11/23/2011 2

3. Demo of Game Using DirectCanvas
HTML5 Canvas is slow – especially on
“old” devices like iPhone 3GS
11/23/2011 3

4. Separate into two contexts
• DOM Context: Menuing and touch
controls
• DirectCanvas Context: canvas
rendering
• PUT ALL RENDERING CODE INTO
index.js
• Add AppMobi.canvas.load("index.js"); to
DeviceReady
• www.appmobi.com/documentation
11/23/2011 4

5. Communicate between contexts
• DOM speaks to DirectCanvas context via
“AppMobi.canvas.execute()”
o Touch event listeners get hooked up to
“AppMobi.canvas.execute(„xxxx()‟)” in order to invoke functions
in the DirectCanvas Context
• DirectCanvas speaks to DOM via
AppMobi.webview.execute("AppMobi.devi
ce.hideSplashScreen();");
11/23/2011 5

6. Use the DirectCanvas
• Var mycontext =
Appmobi.canvas.getContext(„2d‟)
• Make sure the render loop is explicitly told
to render via: mycontext.present();
11/23/2011 6

7. All Rendering in the DirectCanvas
Context
• All rendering code (using standard
canvas syntax) must be in the
DirectCanvas Context
o Move rendering and game logic into index.js
o All sub-included js files must be referenced in index.js
via:
o AppMobi.context.include( ‟XXXX.js' );
11/23/2011 7

8. Make the DirectCanvas Visible
• DirectCanvas renders UNDER the DOM
context. Therefore, the DOM context must
be transparent.
• Remove body/canvas styling like body
color/background color.
11/23/2011 8

9. Box2D Available via b2 namespace
A large subset of Box2D is available via
DirectBox2D
• http://www.appmobi.com/documentation/Di
rectBox2D.html
11/23/2011 9

10. Multi-Channel Sound
• Appmobi.player.playSound(„xxx.w
av‟);
11/23/2011 10

11. Do it yourself
www.appmobi.com/documentation
11/23/2011 11