coding html5 games for directcanvas
DESCRIPTION
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.TRANSCRIPT
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