Coding HTML5 Games for DirectCanvas


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.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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• 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• 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 11/23/2011 11