Cocos2D Loading a scene from Cocos Studio

Cocos2D Loading a scene from Cocos Studio

Postby BenChang » Fri Sep 11, 2015 1:53 pm

These are some very brief notes - if you'd like more explanation just ask and I can elaborate :)

Cocos Studio is a visual layout, GUI, and animation editor for Cocos2D.

Screen Shot 2015-09-11 at 9.34.13 AM.png

You can easily import graphics files, place GUI elements, and lay out your scene using a drag and drop editor. On the left, in the Resources panel, you have a list of everything in the project. You can organize assets in subfolders, and you can also import other scenes made in Cocos Studio. In this example all the files with the ".csd" extension are also Cocos Studio files, which you can drop straight into the scene. The "Main Menu" scene here has a bunch of buttons at the bottom of the screen, and the "AltarScene" has the castle; they're combined together in "MainScene". This is not the same as "Scenes" in cocos2D, mind you, that's just a naming decision here - the point is to make your layout modular so you can edit individual parts on their own, and then combine them together, or re-use them.

On the right is the Properties panel, where you can edit the position, rotation, scale, etc; and you can also attach events and edit the Tag property, which is an ID you can use to access the object from code.

At the top are alignment buttons and a set of Build/Run/Preview controls, which you use to export the project and you can also use to live-test preview it. So for example you can configure it to live preview on Android, where you click the "Run" button and it will build and deploy over a debugging cable to your phone and launch it. Fun!

Note that this does NOT necessarily build and run your entire project, only the visual parts you've edited here.

At the bottom is the Animation panel, which you can use to create keyframe animation for any object in the scene. You can create multiple animations for an object, and access them later by name from code.

Also note the Languages menu at the top, where you can switch between Chinese (the native language for Cocos Studio) and English translation.

For explanation and a tutorial on how to use Cocos Studio, see the manual here:

Loading a scene from studio in Cocos2D-js

Code: Select all
var node;
var json = ccs.load(“file.json”);
node = json.node;

Playing an animation
Code: Select all

when playing the action, you can use the filename of the main file, or a sub-scene like “menu.json”

Accessing a sprite by ID tag
Code: Select all
var mySprite;
mySprite = node.getChildByTag(10003).getComponent("CCSprite").getNode();

Get the tag number from the "Tag" field in the Properties panel for the sprite in Cocos Studio.

Add an event handler to a button
Code: Select all
var json = ccs.load(file);
root = json.node;

var button = ccui.helper.seekWidgetByName(root, "Button_123");

// where this.touchEvent is an event handler function you've declared
User avatar
Posts: 176
Joined: Mon Jan 17, 2011 4:48 pm

Return to Game Development

Who is online

Users browsing this forum: No registered users and 0 guests