How to get Cocoon.js and Cocos2d-Html5 to work together. #cocoonjs #cocos2d-html5 @ludei

A quick note on how to get Cocoon.js and Cocos2d-Html5 to work together.

When I first attempted getting Cocoon.js to work with my Cocos2d-html5 project, I removed the canvas tag and tried to create it via javascript as the Cocoon.js website suggested. When I couldn’t get Cocos2d to recognize the canvas, I final reverted back to the standard index.html canvas tag line, which surprisingly worked fine.

TL:DR Use canvas tag, don’t use function.

Cordova and Cocos2d-HTML

In order for me to get Cocos2d-HTML to work using cordova, I had to upgrade to use 4.0-dev version of Cordova’s ios build.

sudo cordova platform add ios@4.0.x --usegit

I could then use the local-webserver plugin (

and as a bonus got WKWebView (IOS 8.0) for added speed.

I did have to disable token/cookie ‘security feature’, so resource loading would work correctly.

In file CDVLocalWebServer.m
in function asyncProcessBlock, comment out the following block of code:


The Dare Postmortem

New technology researched and used

  • Illuminate.js is an interesting library, but canvas only, but demo was inspirational for game
  • Krita graphics editor is not as intuitive as Photoshop.
  • Installed Photoshop CS3, but seems to not work well under Win8
  • Rather than write my own, I found a Quadtree.js library that I immediately put to use for determining shadow objects, collisions, and reducing FOV calculations.
  • Version 28.0 of Waterfox includes Javascript speed improvements
  • Installed Node.js locally, but not using it yet for production. (maybe next month)
  • Sound effects are handled by Howler.js, though we will see if it is much different from Cocos2d-html5 implementation.
  • May use Gamepad.js in the future.
  • I plan to compare Cocoon.js with Node webkit to see what best fits my needs.

What didn’t work

  • Converting Illuminate.js to webGL would require batching buffers, etc. and be different from the compositing done by the library
  • Krita is not a go to graphics editor for me (Perhaps better suited for use with tablet). I tried it hoping to overcome years of Photoshop knowledge (and Gimp not being close enough).

Long Term Success

  • My shadow casting implementation worked well, should also be useful for vision detection in future games
  • Quadtree.js will be a staple from now on. Moving forward on large maps, it will be very useful for managing data.
  • Added a few new plug-ins to for quick editing and prototyping sprites. Specifically for manipulating the Alpha channel. (one of the main reasons there is a need for a more advanced graphics editor)