Sometime ago, I had to make a decision on development language / framework for a cross platform mobile game. I had to at the very least support Apple iOS and Android. I already had worked with Cocos2d-x so I could have gone that path. But I wanted to use HTML5 as this was a personal project and there was nobody to stop me.
Tadaaa! Problem Solved!
The problem now was performance!
To make things worse, this was a physics puzzle game so I had to do real-time simulation of some physics elements and to top that, I had to draw sprites and some hundred lines along with filled polygons on each tick.
CocoonJS, like some other similar solutions is an accelerated canvas control. It overrides default <canvas> implementation and accelerates it with OpenGL at the native side of the application.
What this means in my case is, now browser control does not spend time on rendering. It can just concentrate on physics processing.
In comparison, the same code (as the above tick loop) was running at 6-10 FPS in normal mobile browser, but now that number is around 40. Clearly showing that drawing was a big bottleneck.
Getting To The Code
I was using the amazing createJS library, I did some changes to my code to support CocoonJS. I am releasing the code after some cleanup for you to play with (and use if you feel like).
I wrote a thin layer over createJS of a tiny SceneManager which helps change the scenes and maintain a Scene stack. It also currently supports fade transition between switching scenes.
The code will work in browser too (host it on apache).
I hope this post will help someone like myself as there isn’t much around on this topic.
Happy Development! :)