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
![Page 1: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/1.jpg)
04/12/2023 1
Extreme Mobile HTML5 Canvas Rendering Using DirectCanvas
HTML5 | CLOUD SERVICES
![Page 2: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/2.jpg)
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
![Page 3: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/3.jpg)
04/12/2023 3
Demo of Game Using
DirectCanvasHTML5 Canvas is slow – especially on “old” devices like iPhone 3GS
![Page 4: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/4.jpg)
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
![Page 5: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/5.jpg)
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
![Page 6: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/6.jpg)
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
![Page 7: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/7.jpg)
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
![Page 8: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/8.jpg)
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
![Page 9: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/9.jpg)
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
![Page 10: Coding HTML5 Games for DirectCanvas](https://reader036.vdocuments.site/reader036/viewer/2022062307/555eac08d8b42a902e8b5064/html5/thumbnails/10.jpg)
04/12/2023 10
• Appmobi.player.playSound(‘xxx.wav’);
Multi-Channel Sound