Introducing CocoonJS

Around a year ago, our development team started to get curious about JavaScript and HTML5 capabilities for games across diferent platforms. It seemed that major companies like Google, Apple, Microsoft and Mozilla were really trying to push the standard and their web browsers started to introduce as many features as the standard committee was adding (each one at their own pace, of course). Canvas seemed a great feature for 2D gaming. It offers most of the basic capabilities needed: image rendering and transformations. We started to develop our own game toolkit for canvas and got really good results.

But not everything were sunshine and rainbows. The performance varied in different platforms and browsers. Some features like sound and video seemed to be supported in many different ways and formats depending on the browser developer. But most importantly, specially for Ludei, mobile devices had really poor performance while running simple 2D canvas based games. The rendering was done by software. Then, our tech department saw that CSS3 has 3D transformations and that many browsers (including Apple’s iOS Safari) supported these features using hardware acceleration. It was a great opportunity to try our game engine’s abstraction layer (Our development team is a true believer in abstraction when addressing software design) and see if we were able to make a transparent HTML5 rendering context that was able to use Canvas or CSS3 whenever available. It worked. But CSS3 didn’t turn out to be as flexible as it could seem at a first glance and although we added canvas and CSS3 rendering support to our game engine, the latter showed up as a non viable option for many animation needs in games. Moreover, only Apple mobile web browsers offered hardware acceleration, so our cross platform dream could still not be true.

Having our game engine rendering abstraction, we started to look at WebGL. After solving many difficulties related to this new web feature, we end up with a full game engine that supports rendering abstraction for Canvas, WebGL and CSS3. It worked like a charm in desktop web browsers, but mobile devices were a different story. We concluded that Canvas was the best option (at least nowadays) for our games in these platforms, as CSS3 had many problems and webGL support is nearly inexistent in mobile web browsers. But the performance was still really poor for real time animation and videogames. This was the moment when Ludei’s technology department started to look for an alternative.

There are different options out there to make a JavaScript HTML5 application go native in mobile platforms. Most of them offer non standard JavaScript API-s so the Canvas could be accelerated. It was not a option for us. We wanted to have exactly the same code base on all the platforms because that is our understanding of a true cross platform development. We started a new project to be able to get a JavaScript interpreter that would notify whenever a Canvas related feature was being used, and catch those calls and make our own native rendering. This way, the JavaScript application code would remain the same and only the rendering commands would be accelerated via openGL ES. This is how CocoonJS was born.

By that time, we already had our native multi-platform framework up and running, which by the way was called Cocoon. Once again, in our pursuit of abstraction, we developed most of our code in C/C++ (around 80%) with some parts in Objective-C for iOS and some parts in Java for Android (around 20%). It means that most of our code base is multiplatform. We also designed it as a service oriented framework that allowed us to include new features easily:

  • Ad network integration. There are multiple services that allows integration with some of the main ad networks in both iOS and Android platforms to show banner, interstitial and video ads.
  • In App Purchases (IAP). There are services for both iOS and Android IAP support.
  • Analytics. Cocoon supports app tracking via third party SDKs or even server to server management.
  • Multiplayer infrastructure. We already have both GameCenter support for iOS devices and our own backend infrastructure.
  • Online resource update. Our applications can update their resources (images, sounds, texts, configuration files) online without having to create a new app version.
  • Access to device hardware specific features like the camera and the GPS.

This native framework is the core of our mobile development and allows really fast and reusable native cross platform project development. CocoonJS is included inside the framework as a new service. And it turned out to be a great design decision because we managed to offer all of the services listed above to CocoonJS because in our native framework, a service can use other services. This way,  JavaScript HTML5 development can get advantage of all the services listed above (and the ones that will come in the future), all of them offered as extensions.

But we had to prove we were able to develop an application once in JavaScript and HTML5 and deploy it in multiple platforms (desktop web browsers, iOS and Android). This is how our game Sumon was born, as a proof of our new technology. We used our whole development stack to develop this game: our game engine that can render using Canvas, WebGL or CSS on desktop web browsers and our native JavaScript HTML5 Canvas wrapper CocoonJS. The game worked like a charm inside CocoonJS. The overall performance of the game was multiplied by 1000 compared to the mobile web browsers we tried, and the CocoonJS extensions allowed us to include ads to the game. We were really happy with the final result, but did not stop there. Adding more features to the system became a priority. We developed more HTML5 capabilities like non-blocking web sockets and internal storage. We also developed more extensions like integration with social networks such as Facebook and Twitter, camera management and more. At the same time, we saw a great interest among the JavaScript and HTML5 game developer community to be able to try CocoonJS. Minor initial modifications were made to some known HTML5 games to make them run perfectly in iOS and Android using CocoonJS. This is the moment when we decided to offer it to the world and started to develop the CocoonJS launcher, a mobile device application for iOS and Android devices that allows any developer to easily try their JavaScript HTML5 Canvas based games inside CocoonJS.

And here we are now. We are proud to announce that CocoonJS is publicly available for anyone to try it. It is just a matter of using our launcher application available on the app store and the android market. In it, any developer can check out our demo examples with full source code and experience the performance boost that CocoonJS provides compared to a mobile web browser. A developer can read the easy steps needed to follow to be able to prepare any JavaScript and HTML5 Canvas game so it can be executed inside the launcher. It is as simple as creating a zip file with the JavaScript code and assets, upload it to a web server and execute it. We would like to gather as many developers as possible in order to check how CocoonJS will respond to their needs to execute their projects on iOS and Android devices. If you are a JavaScript HTML5 game developer, you are more than welcome to download the launcher and try your game!

We are currently working hard to provide new interesting features like:

  • A cloud based compiling system. Any developer that has tried the CocoonJS launcher will be able to get both an iOS and/or an Android final binaries that will be prepared to be uploaded to the app store and the android market.
  • More Canvas primitives. Although we think that the most commonly used Canvas primitives are supported right now by CocoonJS, we are trying to add as many new rendering primitives as possible.
  • A brand new multiplayer game that will demonstrate the true cross platform capabilities that CocoonJS offers. It will be playable from a desktop web browser, from an iOS device and an Android device, all using exactly the same code base.
  • More services integration so that any JavaScript and HTML developer can benefit from them as extensions.
  • Multiplayer online infrastructure. We already have a Game Center extension that allows multiplayer capabilities for iOS applications. We are working on providing a full online multiplayer experience.
  • Camera support. The developer will be able to get a camera stream and draw it intro a JavaScript HTML5 canvas or even take pictures.

As you can see, it has been a busy and exciting year for Ludei and it seems that Ludei is starting to become not just a successful content developer but an innovative technology provider. We are looking forward to see if the JavaScript and HTML5 game development community wants to answer our call and provide them with the best mobile application deployment experience to distribute and monetize their developments.

 

2 Comments Introducing CocoonJS

  1. avatarPipo

    That sounds awesome. I’m looking forward to try out CocoonJS! I allready have an HTML5 game prototype which runs quite poor on my HTC Desire. I’m curious to find out how it will run with CocoonJS.

    Reply
    1. avatarIker Jamardo

      You can start trying CocoonJS on Android right now. Just download the CocoonJS Launcher App from the Android Market and check this link that explains the simple steps you have to follow to try your development among the HTML5 features that are currently supported by CocoonJS.

      Hope to see your game running on Android soon ;).

      Reply

Leave a Reply

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