CocoonJS Release (2012/11/20)

The most awaited CocoonJS update has finally arrived! We have been working really hard the last couple of months to improve our platform. This new release comes with many new features, bug corrections and improvements. We know it has taken really long to get the new version out, but we really hope it will be worth it. Let’s give a quick review to all the new cool stuff inside the new version of CocoonJS by Ludei!

  • CocoonJS extensions
    • In-app purchase test bed
    • Easier to use and improved WebView integration
    • Application “quit” control
    • “screencanvas”, a new way to improve performance (even more!)
    • Opening URLs using the system web browser
    • Text and message dialogs
  • DeviceMotion and DeviceOrientation APIs
  • Vibration and GPS APIs
  • The HTML5 path API (an industry 1st)
  • Box2D native binding (beta)
  • Improved rendering system
  • Support for more ad networks
  • iOS6 and iPhone5 support

CocoonJS extensions

CocoonJS includes an extension mechanism to provide native features missing in the HTML5 standard. Although the extension mechanism has been present from the first release of CocoonJS, in this new version, along with new features, new more developer-friendly APIs have been introduced. Most extensions (except from the social network extension) are backward compatible, meaning that if you were using the window.ext.IDTK_XXX mechanism your code should still work. Anyway, we HIGHLY recommend you to use the new extension mechanism, that is easier to use and has full documentation and support from our side. All it takes is for you to include the necessary JS files at the beginning of your HTML file depending on what features you want to use and what environment you are using: CocoonJS and/or the WebView. One of the coolest features of these new extension APIs is that they handle all the cross-platform management. Forget about having to see if the extension is present or not. The JS code will do that for you and it will make your code compatible in a desktop web browser, in CocoonJS or in the WebView feature. All the demos have been rewritten to use the new extension APIs so you will still be able to learn much from both the demos and the documentation we provide. Although we will update our wiki with full documentation and tutorials, let’s review some new features in the CocoonJS extensions:

In-app purchase test bed

The latest version of the CocoonJS launcher app offers the possibility of testing our extension APIs for IAPs. Although this feature has been available in previous versions of CocoonJS, it has not been published because there is not an easy way of allowing developers to test IAPs in the launcher app. This new version of the CocoonJS Launcher App enables a mock-like environment so any developer can test the IAPs extension APIs and then, whoever has premium access capabilities, can configure them for real in our cloud compilation system, that also provides a complete set of tools to track and check the purchases made inside the apps, and start making money ;).

Easier to use and improved WebView integration

The new CocoonJS extension APIs provide a much easier and better way of handling the web view feature inside CocoonJS. Now you are able to load as many URLs or local files to the WebView and all the way around, from the web view to CocoonJS. Sending messages from one environment to the other has never been easier and now these can also be asynchronous. Any window.console object output in the web view will be shown in the CocoonJS debugging console automatically making the debugging of web view content much much easier. Long story short, the WebView support has been dramatically improved.

Application “quit” control

In Android (not in iOS) the back button can be used to destroy the activity. Now, there is a way to control this behavior from JavaScript. The default behavior has changed and now, if the developer does not specify anything, CocoonJS will prompt a dialog and pause the application to let the user decide if the app should be destroyed or not. Moreover, the developer now has the possibility of specifying that he/she wants to take control of the app finalization. The process is as easy as specifying a function that will return a boolean by calling CocoonJS.App.setAppShouldFinishCallback(FUNCTION_THAT_RETURNS_A_BOOLEAN). If the function returns true, it means the app should finish and if it returns false, it means it should not finish and that the developer takes control of the finalization. Whenever a developer wants to finish the application, there is a function called CocoonJS.App.forceToFinish. This feature is specially useful in Android (in iOS for example none of the functions will work).

“screencanvas”, a new way to improve performance (even more!)

Ludei has been providing the best performance for HTML5 gaming that is in the market and in the pursue of this goal we have been improving the rendering mechanism day after day. In this new release, we have found a major improvement that requires not much effort from the developer perspective. Most canvas based games create and use what could be called a “main” canvas where everything else (images, primitives, other canvases, etc) are drawn. If your app uses this “main canvas” idea, you can benefit from this feature. The only thing that you need to do is to call the new function CocoonJS.App.createScreenCanvas to create this “main canvas” and you are good to go. Specially in android and in some specific devices, you will see a minimum of a 2x performance boost by doing so. Check-out all the CocoonJS demos in the new CoconJS Launhcer App and see it for yourself!

Opening URLs using the system web browser

This has been a very frequent request among the developers using CocoonJS. By calling the function CocoonJS.App.openURL(URL) you can call the system browser to open a URL. It can be very useful to provide access to your app users to the rating of your app, to open your website URL, etc. Anyway, as many of you know, CocoonJS provides a WebView control that can be displayed over (or even alone) our OpenGL rendering surface. We also recommend to use this feature so you don’t have to switch between apps (your game and the web browser). Check the CocoonJS.App.loadInTheWebView and the CocoonJS.App.loadInCocoonJS functions to take control over this features.

Text and message dialogs

Text dialogs already existed in the previous versions but the mechanism has been extended and made easier. In this version message dialogs have been also added and regular web browser support has been included.


DeviceMotion and DeviceOrientation APIs

This feature has been long awaited by the CocoonJS developer community. Finally, CocoonJS supports both accelerometer and gyroscope events providing the W3C specification APIs. Not a lot of both desktop and mobile browsers support these APIs.

Vibration and GPS APIs

They have been added in the previous version of CocoonJS but now they have been improved and new demos are provided so developer can learn from them.

The HTML5 path API (an industry 1st)

This is a really interesting new feature CocoonJS supports now. The W3C canvas API offers the option of creating complex paths, thus, rendering vector graphics, with all the advantages that this means (less memory footprint, transformation capabilities, faster rendering, etc). CocoonJS is one of the first HTML5 rendering virtual machine that supports the path API. Check out our new demo to see some pretty amazing results!

Box2D native binding (beta)

Box2D is a widely used 2D physics engine. There are multiple ports to multiple platforms and languages. There is a port to javascript but due to it’s demanding mathematical calculations and poor memory management, the performance it provides for environments other than desktop web browsers is not acceptable. CocoonJS has included a native binding to solve these problems. This feature is still in beta and not all the Box2D APIs have been implemented, so it is to fully compatible with the Box2DWeb version, but we are getting there. Check out the performance you get both in iOS and Android by executing out new cool demo!

Improved rendering system

Our openGL ES expert developer has rewritten our native binding completely and now we have a more stable and reliable and full HTML5 compatible rendering system. We are still trying to push the envelope and will try to solve any graphical glitches that can appear from now on but this version is definitively the most advanced HTML5 rendering system in CocoonJS ever!

Support for more ad networks

New ad networks have been integrated to the ad extension.

iOS6 and iPhone5 support

The new iPhone5 and the new iOS operating system have led to some internal modifications and the need of some changes in the cloud compilation system configuration.

Well, that is a full list of features! As you can see, there are a lot of new things CocoonJS can do now and many highly requested features and bugs have been included and solved. We are still working hard to try to provide you with the best HTML5 gaming experience on mobile devices, so stay tuned for the next releases!

Keep creating amazing games and let CocoonJS to power them! 😉

22 Comments CocoonJS Release (2012/11/20)

  1. avatarEd

    You mention “New ad networks have been integrated to the ad extension.” Is this just new ad networks that MoPub provides, or are you allowing more networks besides Mopub?


  2. avatarIker Jamardo

    Ed: No, apart from the networks that MoPub provides, we have integrated new ad network native SDKs.

    Dimitri: No, CocoonJS does not work together with Phonegap at the moment. Sorry.

  3. avatarFelix

    Some way to download directly the last version from the web the apk?
    For my chinese table in the market not are avalaible

  4. avatarBen

    Is Box2D support available for use in this build? Or are you working on it for release in the next build? Very impressed with the Box2D performance in the demo.

    1. avatarIker Jamardo Zugaza

      Of course it is available in this version (that is why the demo works). But as I mention in the post, it is still in beta, meaning that not all the Box2D API is supported. I would recommend you to check the source code of the demo carefully to see what we offer at the moment.

  5. avatararnuschky

    Just installed the launcher on my Android 4.0.4 phone. All demos stop at “Launchin…. 0/100”. Have to kill the app using dev tools. What’s wrong??

    1. avatarIker Jamardo Zugaza

      That is strange. I have no other report of the same problem. Have you tried to uninstall the app and install it again from the market? Are you sure you have internet connection? Some demos take some time to download.

  6. avatararnuschky

    Other question: we have a game that uses CAAT in conjunction with Box2D. Can we somehow get around the (incomplete) native implementation? I mean, should the normal javascript version work without problems or are there conflicts to be expected?

    1. avatarIker Jamardo Zugaza

      Well, as it is still in beta, my best recommendation is for you to check the box2D demo we provide and what box2d apis are you using from CAAT. We know that some CAAT functionalities work using this new feature, but again, as it is a not complete API implementation, not everything will work. Make a little demo and go for a spin! 😉

    1. avatarIker Jamardo Zugaza

      We are in close contact with Ashley and he will try to make some of these new feature to work inside Construct2. He was very excited about monetization channels and the Box2D binding… can’t tell you more about it. Just ask them about ETA ;).

  7. avatarNicolas

    Excellent job ludei team! Will be CacoonJS browser also a native library for ios and android? It will be nice to integrate CacoonJS as a boosted HTML5/JS webview in native apps.


  8. avatarCarlos Lara

    At Wickedware, we are considering Ludei for the mobile version of our educational game. It teaches Mathematics to 3 year old toddlers, and will be targeting web, ios and android. Thank you for all the features and keep them coming!


Leave a Reply

Your email address will not be published. Required fields are marked *