CocoonJS and the Quest for More Power

Games demand performance, and as cool as Cordova is, games can hit the performace wall. So I was very interested in Ludei's CocoonJS Canvas+ environment. The Box2D demo is impressive. But I was unable to get other Box2D demo's to run. In fact, I've just recently gotten a project to run in Canvas+. Based on a port of the Ash Asteroid demo, my version is in coffeescript. 

What I find is that you need to design for the environment from the ground up. Approach this like a cross browser project with a new browser type:

• Check navigator.isCocoonJS to see if you're in the browser or cocoon.
• There is no html document. All body tags except script are ignored.
• You must use document.createElement('screencanvas') to access Canvas+
• If you need other elements, like buttons, you need to use Cocoon.App.Webview
• Canvas+ does not implement a complete Box2D API. Depending on your reference version, less then half the api is available.

That last item was really the biggest issue. For example, there is no world.GetBodyList(), no body.GetNext(). SetDebugDraw() does nothing.  You can infer from this that there a virtualy no existing Box2D demo's out there that will work in the environment.

So how do you get Box2D working in Cocoon? 

1. All objects must be able to draw themselves
2. Keep explicit references to all your bodies.
3. Check the source and make sure the object/method you need actually exists.

My asteroids game does not yet accept touch input. So all I can do now is watch the asteroids bump off each other, and explode my ship if they happen to bump it. You know, I never thought that would be so exciting :)