This week at the Game Developer Conference in San Francisco, Ludei announced their new flagship product CocoonJS. The free product will provide HTML5 game developers with an extremely easy to use native wrapper around the game. Besides giving the resulting app a performance and speed increase of up to 1000% it also provides access to device hardware and various service such as ad networks and Facebook. All this without any changes to the HTML5 game sources. Appoint:solutions was one of the first in the world allowed to beta-test the framework . Ludei sent us some questions asking us to talk about our experiences in launching complex applications. You can read the the full interview on Ludei’s blog or right here.
How did you get started?
After closing some other projects, we started working on a mobile online multiplayer game in November 2011. Until that time most experts agreed that HTML5 was only usable for simple turn-based board games without much movement. We wanted to prove that it was feasible to create a mobile game with fast moving graphics, realtime multiplayer gameplay and interaction, and multichannel sound, all using HTML5 techniques. At the same time, the game should be deployed to iOS, Android and Facebook with a single code-base. Not an easy task, but hey, we do like a challenge.
What approach did you take?
To solve the many technical challenges we tried everything from game engines (Custom, ImpactJS, CAAT), server possibilities and deployment strategies. The almost weekly pivots made us a bit nervous (in fact, it was driving Bert crazy) but we decided to continue to anyway. The deployment was the most challenging. We already used PhoneGap for deployment to different app stores. PhoneGap solved some multichannel sound issues in standard HTML5, but to be honest, the solution felt uncomfortable. We also had a number of challenges that were left unsolved:
- Canvas rendering performance was below par. Even after extensive optimization we only achieved around 10 frames per second when we had many movements on screen. For 1990 this would have been great, but for 2012 perhaps not!
- Websockets were available, but because the rendering was so intensive on the browser and therefore CPU, packets were being delayed. This caused the realtime game functionality to be broken (we require around 20 packets/second minimum server rate).
- Sound was working, but hacked-in at best. We needed to create a separate sound player for browser deployment and a hook into PhoneGap for mobile.
- Ad-network integration in a HTML5 based game was buggy at best.
That meant: Back to the drawing board…
So, What did you do next?
We first tried appMobi’s services and tools, both commercial and open-source. AppMobi’s game developer tools solve a number of problems like rendering speed and multichannel sound (and from what I hear add integration as well). The Websockets however still work from the browser, as well as user input. Therefore as a developer you have 2 separated environments that have to communicate with eachother though serialized calls (EG. directCanvas.execute(“movePointer(“+x+”,”+y+”);”) ). That communication channel is a nasty bottleneck and is not usable for anything that requires fast updates. Aside from that, the game has to be separated into 2 environments for mobile, breaking our write-once-deploy-everywhere requirement.
So you decided to give CocoonJS a spin?
Yes. Through our CAAT experiences I (RB) got into contact with Ibon Tolosana and Ludei. The description of CocoonJS on the site, a seamless environment that runs HTML5 games without any changes, sounded too good to be true. Ibon emphasized however that that was exactly what was being created and told me about some other solutions that would be accompanied by it. He then offered me the chance to beta-test CocoonJS on our own game sources which I happily accepted. The current version of CocoonJS solves all our problems for us. In the most extreme cases we are still getting around 50 frames per second rendering speeds, multichannel sound and Websockets without delay. It also gives us easy ad-network integration and more. The best thing about that is that it hardly requires any work to make all this work in CocoonJS. Almost all HTML5 functionalities like sound, canvas operations, local storage and sockets are supported transparently. We can’t wait to launch our game ‘MonsterMove’ and start work on the next project using CAAT and CocoonJS!