Developers Manual > Cocos Studio

Cocos Studio


Note that the softwares below are required for CocoStudio, you should install them before using CocoStudio:


CocoStudio is a game development tool kit based on Cocos2d-x. It breaks down tasks in game development into different roles, it includes:

  • UI editor for UI graphic artists,
  • Animation editor for graphic artists,
  • Number cruncher for game data designers,
  • Scene editor for game designers

CocoStudio forms a complete game development solution.

The UI editor

The UI was designed to serve its only purpose: create UI for games.
Its simple and intuitive interface allows graphic artists to focus on their expertise, without worrying about other aspects such as programming.

Currently the UI editor has 12 different UI elements ready to be used in games, new UI elements will be added with each and every release of CocoStudio,

Other key features that the UI editor supports are:

  • Texture packaging - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance.
  • Multi-resolution adaption - Automatically adapts to multiple resolution sizes with relative UI positioning.
  • Templating - Reuse the same UI layout across different games, swap out texture resources to give it a new look.

The Animation editor

The Animation editor was designed to feel like Adobe Flash, which makes graphic artists feel right at home.
The Animation editor brings skeletal animation to Cocos2d-x.
What advantage does skeletal animation holds against the traditional frame animation?

  • Lower memory consumption - An animation with the traditional frame based solution could use dozens of individual textures, but with skeletal animation, only 1 set of body parts is required to make infinite number of different animations.
  • Smaller file size - due to less number of assets.
  • Animation blending - you can combine animations together to easily make new animation, for example, you could blend attacking animation with walk animation to create “attacking while walking animation”.
  • Animation reuse - you can share skeletal animations with another character with the same skeleton setup.
  • Smooth interpolation - traditional frame based animation is very choppy especially in slow motion. Skeletal animation interpolates between 2 sets of key frames, so animation is always played at the same frame rate as the game.

However Skeletal animation cannot replace the traditional frame based animation, for example, it cannot make isometric character, it cannot make explosion, that is why we did not forget frame based animation, we even made it better and simpler. You only have to drag and drop frame sequences to the work space, and the animation editor will automatically creates the frame animation for you.

Other highlight of Animation editor includes:

  • WYSIWYG collision box editing - editing collision box in wysiwyg way has never being easier and accurate.
  • Reference point - enables characters to wield swords, mount horses, and attaching other objects easily.
  • Texture packing - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance.

The Data Cruncher

The data Cruncher imports excel tables and converts the data into a format readable by cocos2d-x, which can also be used as a component for the Scene editor.

The Scene editor

The scene editor pieces all the assets made by the UI editor, Animation editor, and the Data Cruncher into a game scene, it can then simulate the game inside the editor.
The scene editor also supports many assets made from third party editors such as particle designer, tiled etc.

The scene editor relies on the CocosStudio Framework.

Contact Us

email :

h2. Please note

  1. Microsoft .Net Framework 4.0 is required. (Download:
  2. The program is for Windows only
  3. Turn your tunes on, more documents, tutorials, videos are coming soon.

For bug reports, please send email to:

CocoStudioLogo.png (60.4 kB), 2013-05-27 03:24

download-btn.png (13.8 kB), 2013-05-27 06:31

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.