By Viktor Lidholt on Friday, February 1st, 2013 7:55 AM PST

Cocos2d-iphone has proven to be a great platform for creating iOS games, with many titles hitting the top of the charts in the AppStore. The introduction of cocos2d-x made it possible to write C++ games that ran on many devices, including iOS, Android and as applications on stationary computers. The next big thing in the Cocos2d universe is the release of Cocos2d JS! Cocos2d JS makes it possible to write your code just once and have run in all major web-browsers through HTML5 and with close to native performance on iOS and Android devices.

At Zynga, Cocos2d JS is already being used to create a set of new game titles. Cocos2d-iphone and CocosBuilder – the graphical tool that goes with Cocos2d – are open sourced by Zynga.

How it Works

Cocos2d JS is available with the same api for cocos2d-iphone, cocos2d-x and cocos2d-html5. While cocos2d-html5 will run on mobile devices through the browser, JavaScript bindings have been created for cocos2d-iphone and cocos2d-x to drastically improve the performance. All graphics, rendering and physics code will run natively and only the game logic will run in JavaScript.

Having your game code in a scripting language provides more advantages than just the cross-platform aspect. As the code is not compiled, it can be replaced in run-time which allows much faster testing cycles.

CocosBuilder and CocosPlayer

CocosBuilder is the IDE that goes with Cocos2d. It provides a complete tool chain for creating your games. In CocosBuilder you can lay out your graphic elements, create boned animations, generate sprite sheets and connect your menus and buttons to your code. New in version 3 is the added support for JavaScript and CocosPlayer. CocosPlayer is an iOS and Android app that you can install on your device. It lets you push and run your CocosBuilder projects straight to the device over wifi in seconds. All output from your game is displayed in the console window of CocosBuilder. Future releases will even provide a graphical debugger.

One issue when making a game run on multiple platforms is that different platforms require different sets of resources. For instance, an iPhone may need different sets of graphics depending on if it has retina display or not and sounds may need to be saved in different formats for optimal playback. CocosBuilder makes this easy by automatically converting between resolutions and formats. It can even make different sprite sheets from a single set of images. If the automated resizing is not good enough for some of your sprites, you can always provide scaled images yourself for the different devices. It is as easy as dropping a file in a folder.

Getting Started

The quickest way to get started with Cocos2d for JavaScript is to go to, download the CocosBuilder application, then download the source code to install CocosPlayer on your iOS device. Have a look through the examples, in particular CocosDragon and CrystalCraze, open them with CocosBuilder and run them in CocosPlayer or on the web. A user guide and API documentation is available through CocosBuilder's help menu. To get additional support, please visit the very active cocos2d-iphone forums.


Leave a Reply

Connect with Facebook