04/12/2023 1

Extreme Mobile HTML5 Canvas Rendering Using DirectCanvas

HTML5 | CLOUD SERVICES

04/12/2023 2

• 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 enemyo 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.

Browsers weren’t build for games

04/12/2023 3

Demo of Game Using

DirectCanvasHTML5 Canvas is slow – especially on “old” devices like iPhone 3GS

04/12/2023 4

• 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

Separate into two contexts

04/12/2023 5

• 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.device.hideSplashScreen();");

Communicate between contexts

04/12/2023 6

• Var mycontext = Appmobi.canvas.getContext(‘2d’)

• Make sure the render loop is explicitly told to render via: mycontext.present();

Use the DirectCanvas

04/12/2023 7

• All rendering code (using standard canvas syntax) must be in the DirectCanvas Contexto Move rendering and game logic into index.jso All sub-included js files must be referenced in

index.js via:o AppMobi.context.include( ’XXXX.js' );

All Rendering in the DirectCanvas

Context

04/12/2023 8

• DirectCanvas renders UNDER the DOM context. Therefore, the DOM context must be transparent.

• Remove body/canvas styling like body color/background color.

Make the DirectCanvas Visible

04/12/2023 9

A large subset of Box2D is available via DirectBox2D• http

://www.appmobi.com/documentation/DirectBox2D.html

Box2D Available via b2 namespace

04/12/2023 10

• Appmobi.player.playSound(‘xxx.wav’);

Multi-Channel Sound

04/12/2023 11

www.appmobi.com/documentation

Do it yourself