[SOLVED] How to convert CCB files to CocosStudio?

Hi,
I have MacOS and I downloaded latest CocosStudio v 2.0.2. I created previous games in CocosBuilder. Now I want to update them to Cocos2d-JS 3.0 with CocosStudio. How to import my CCB files to CocosStudio?
According to this pages:
http://www.cocos2d-x.org/wiki/CocoStudio_Special_File
http://www.cocos2d-x.org/wiki/UI_Editor_Introduction
http://www.cocos2d-x.org/wiki/CocoStudio

I should be able to do that, but in CocosStudio 2.0.2 I don’t see Menu File->‘Open CCB file’ option. Moreover in version 1.3 for Windows there it is built in.
What to do?

It’s an entirely separate app and file format. Someone would need to create an importer for CocosStudio in order to do what you want. I believe you can still use your CCB files and read them in using cocos2d-js 3.x, but it likely is or will be deprecated going forward.

If you want to update your CocosBuilder scenes or menus you’ll have to recreate them from scratch or create/find an importer or conversion tool, and I don’t believe one exists yet.

Thanks for your reply! That really helped me. Finally I loaded ccbi scene from CocosBuilder to Cocos2dJS 3.0 but when the CocosBuilder scene has assigned JS Controller I get following error:

cocos2d: JS: :0:uncaught exception: Can not find controller : MainScene

No matter where I put the file.
This is the last piece of the puzzle to solve my problem :smile:
Kind regards.

I’ll probably have to create a simple test project to actually give you an answer, but my first instinct is that your class MainScene has not yet been loaded, or possibly because it’s not extending from cc.Scene.

Have you loaded the file that contains your MainScene class?
e.g. jsList":[ "src/MainScene.js", "src/app.js" ]

Also are you extending from cc.Scene?
e.g. var MainScene = cc.Scene.extend();?

Since CocosBuilder was built on Cocos2d-JS 2.x its MainScene variable was just a function which may be fine. I’ll try this out when I get home to see about getting the template project to load.

1 Like

I created a new Cocos2d-JS project with latest 3.1 framework. I created a new default template project in CocosBuilder (app downloaded at least a year ago, but .ccbi files are version 5 which is latest I believe).

Enabled extensions support in project.json

"modules" : ["cocos2d", "extensions"],

app.js - Removed code and replace with this inside HelloWorldLayer’s ctor function

console.log(MainScene);
// must register controller now (as per release notes)
cc.BuilderReader.registerController("MainScene", MainScene);
var scene = cc.BuilderReader.loadAsScene(res.MainScene_ccbi, MainScene);
cc.director.runScene(scene);

There still an issue with the button not getting hooked up correctly. I’ll take a look at that sometime this weekend.

1 Like

Thank you very much for your help.
I tried your code and something concerns me. But at first:
I also created new Cocos2d-JS project with v 3.1. I created a new default template project in CCB. After publishing it I copied MainScene.ccbi and MainScene.js to my Cocos2d-JS project. MainScene.ccbi to /res directory and I added it to resources.js. MainScene.js to /src directory and I added it to jsList in project.json. I also added “extensions” to modules.

Next My code looks like that - MainScene.js:

var MainScene = cc.Scene.extend({
	ctor:function() {
		cc.log("CTOR");
		this.init();
	},
	onEnter:function () {
		cc.log("MAIN SCENE ON ENTER");
		this._super();
	}
});

MainScene.prototype.init = function()
{	
	cc.log("INIT");
};

// Create callback for button
MainScene.prototype.onPressButton = function()
{	
    cc.log("PRESSED");
    this.helloLabel.runAction(cc.RotateBy.create(1,360));
};

and next app.js file:

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {

    	console.log(MainScene);
    	// must register controller now (as per release notes)
    	cc.BuilderReader.registerController("MainScene", MainScene);
    	var scene = cc.BuilderReader.loadAsScene(res.MainScene_ccbi, MainScene);
    	cc.director.runScene(scene);
    	
    	return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
    }
});

And UI loads properly, but I got log:

cocos2d: JS: Warning: MainScene.onPressButton is undefined.

So I have some questions:

  1. Did I correctly modified MainScene class?
  2. How to get reference to helloLabel (defaultly created Label in CCB project) for example and other sprites? Neither this.helloLabel nor MainScene.helloLabel work.
  3. How to handle onPressButton action?
  4. The only way to get sprites loaded (clickme-down.png and clickme.png) properly is to copy them into / project directory. How to do to properly show UI with all sprites placed in /res directory?

PS Could you send me example projects? Both CCB one and Cocos2d-JS :slight_smile: My email is sortris [at] gmail [dot] com.

Thanks for your help.
Kind regards! :slight_smile:

Ok, finally I managed how to handle onPressedButton action after importing UI from CocosBuilder.
You just need to pass not class name but class reference as controller.

mainScene = new MainScene();
// must register controller now (as per release notes)
cc.BuilderReader.registerController("MainScene", mainScene);
var scene = cc.BuilderReader.loadAsScene(res.MainScene_ccbi, mainScene);
cc.director.runScene(scene);

The last thing that is bothering me is how to get reference to objects binded in CocosBuilder. For example how to get reference to “button” variable of “helloLabel” outside of this class?

Thanks for the solution to the using the instance not the class.

Where are you trying to reference them? The Scene is the root class, so it should create and define all the children and have access to them all.

Thanks for your reply.
My code:

    	mainScene = new MainScene();
    	cc.BuilderReader.registerController("MainScene", mainScene);
    	var scene = cc.BuilderReader.loadAsScene(res.MainScene_ccbi, mainScene);
    	cc.director.runScene(scene);
    	
    	scene.helloLabel.runAction(cc.RotateBy(2, 360));

And reference scene.helloLabel returns undefined.

MainScene.js code:

var MainScene = cc.Scene.extend({
	ctor:function() {
		cc.log("Main Scene ctor");
		this._super();
		this.init();
		return true;
	}
});

MainScene.prototype.init = function() {
	cc.log("INIT");
	cc.log(this.helloLabel);
};

MainScene.prototype.onPressButton = function()
{	
    this.helloLabel.runAction(cc.RotateBy.create(1,360));
};

And here only the reference to helloLabel in onPressButton works. In init function not…
Can I get a global reference to the controller somehow?

Ah I see.

While you would think that scene would now have that member property helloLabel at the point you are accessing it I wouldn’t try to access helloLabel like that. Instead look to use helloLabel in onEnter, or I believe there is a CocosBuilder callback, something like ccbDidLoad() or similar. I’ll go test a couple ideas, let me know if you solve it.

The reason for the first part is runScene effectively blows away everything else, eventually at least and the main culprit has something likely to do with the order of execution that occurs when calling loadAsScene followed by runScene. I suspect it doesn’t actually load the properties until the scene is run … but I’ll have to go dive into the loadAsScene code to confirm.

1 Like

WOAH!
I added this code to MainScene.js:

MainScene.prototype.onDidLoadFromCCB = function() {
	cc.log("ON DID LOAD");
	cc.log(this.helloLabel);
	cc.log(this.button);
}

and it works like a harm :smiley:
I get logs:

cocos2d: JS: ON DID LOAD
cocos2d: JS: [object Label]
cocos2d: JS: [object Sprite]

Thanks a lot for your help.
Proudly changed topic name to [SOLVED] :smiley:
Kind regards.

1 Like

Hi i know this thread is really old but can u give the steps for opening the Cocosbuilder file in cocos studio? I cant seem to find any option to do that and I need to port a really old project that was made using cocos2d 2.0.2 to the latest branch. The project relies heavily on cocos builder for each game scene and the amount of time it would take the art team to recreate everything in Cocos Studio would be huge.

You’re prob stuck writing your own. I know a few people have wanted this, but prob not enough to warrant the core team to build a converter. That said you should be able to still use your CCB files with 3.x if you’re upgrading. You could create new menus/animations/etc in CocoStudio going forward and use both.

Thanks for the quick reply

Just as a note, there are a few discussion topics on how to find and use CocosBuilder alpha 4 or 5 to continue editing your .ccb files as well.

Thanks! Will dig up those posts.