Coding HTML5 Games for DirectCanvas

4,742 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,742
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Lee comment: Roy, this slide needs one more two-word “eWord Slogan“. I would like to ask you if you get one or two of the following words into third slogs: “app”, “developer” “cloud” “web” into it. Can you think of catchy “eWord Slogan” to add here?Roy Comment: I don’t get the slogan design here – the lowercase leading “e” seems a throwback to “eWorld” and “eMail” – as a shortcut for “electronic”. The “trick” second letter capital isn’t working for me at all. But anyway, as you requested one more slogan, here goes… eNrich app engagement, eXtend Mobile Web, eXpand Developer Opportunities
  • Coding HTML5 Games for DirectCanvas

    1. 1. HTML5 | CLOUD SERVICESExtreme Mobile HTML5 CanvasRendering Using DirectCanvas 11/23/2011 1
    2. 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. 3. Demo of Game Using DirectCanvas HTML5 Canvas is slow – especially on “old” devices like iPhone 3GS 11/23/2011 3
    4. 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. 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. 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. 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. 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. 9. Box2D Available via b2 namespaceA large subset of Box2D is available viaDirectBox2D• http://www.appmobi.com/documentation/Di rectBox2D.html 11/23/2011 9
    10. 10. Multi-Channel Sound• Appmobi.player.playSound(„xxx.w av‟); 11/23/2011 10
    11. 11. Do it yourselfwww.appmobi.com/documentation 11/23/2011 11

    ×