4a. Connecting with Cocos2d JS
For any non-trivial use of CocosBuilder you will need to connect your ccb-files with your JavaScript code. This section explains how this works.
The way you can link your code with CocosBuilder is to use controller objects. The controller object is created at the same time as your ccbi-file is loaded. To set the name of the controller objects class, select the root node in your ccb-file and enter the name in the JS Controller filed of Code Connections.
When the complete ccbi-file has loaded. cc.BuilderReader will call the onDidLoadFromCCB method. (It's optional to implement this method, if it doesn't exist it will not be called.)
This is an example of what a very simple controller class with only the onDidLoadFromCCB method implemented can look like:
//
// MainScene class
//
var MainScene = function(){};
MainScene.prototype.onDidLoadFromCCB = function()
{
cc.log("File was loaded");
};
References to objects in your ccbi-file can be linked to member variables when the file is loaded. These member variables can be either in the root node's controller object, in which case it must have been assigned a controller object. You can also assign them to a custom object, which is optionally passed as the owner object to the cc.BuilderReader. To load ccbi-file and assign members to it's owner, the node graph needs to be loaded by calling cc.BuilderReader.load("MyInterfaceFile", owner) or cc.BuilderReader.loadAsScene("MyInterfaceFile", owner);
To link a node in your ccb-file, simply select the object, under Code Connections change the Don't assign popup menu to either Doc root var or Owner var. Then enter the name of your member variable to the right of the popup menu.
When the ccbi-file is loaded in your game, the member variable will automatically be assigned to either your owner or controller object. To access it from inside the class use the this keyword.
MainScene.prototype.onDidLoadFromCCB = function()
{
cc.log("CocosBuilder variable: " + this.sprtBurst);
};
To add a callback when a CCMenuItemImage is tapped, simply select the CCMenuItemImage in CocosBuilder, then add the name of the method you want to call in the Selector field. Set the target either to the Document root or the Owner.
The callback will send the CCMenuItemImage as its only parameter to the method that you specify. You can also choose to leave the parameter out.
MainScene.prototype.onPressedMenuItem = function()
{
cc.log("Pressed menu item!");
};
Support for CCControl is coming soon to Cocos2d JS.
CocosBuilder documents, or ccb-files, needs to be published into a compact binary format, ccbi, before they can be loaded into your application. Once published they can be easily loaded with a single line of code. To load a node graph call the cc.BuilderReader.load method as follows.
var myNode = cc.BuilderReader.load("MyNodeGraph");
For your convenience, CCBReader can also wrap your node graph in a scene. To load your ccbi-file in a scene call cc.BuilderReader.loadAsScene.
var myScene = cc.BuilderReader.loadAsScene("MyScene");
Sometimes you need to be able to access member variables from and get callbacks to another object than the root node of a ccb-file. To do this you will need to pass a owner to the CCBReader. To get the variable or callback assigned to the owner, make sure that you've selected owner when declaring the member variable name or callback in CocosBuilder. Then call the cc.BuilderReader.load or cc.BuilderReader.loadAsScene method but add an extra variable with the owner.
// Setup myCallbackObject somewhere in your code;
var myNode = cc.BuilderReader.load("MyNodeGraph", myCallbackObject);
If you are using sub ccb-files specifying the root node as target will refer to the root node of the sub ccb-file. The owner target is the object that you pass to the CCBReader.