Coding HTML5 Games for DirectCanvas
Post on 22-May-2015
4397 Views
Preview:
DESCRIPTION
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
top related