javascript bindingでcocosbuilderとcocos2dx連携

cocosbuilderからcocos2d-xのjavascript bindingsを利用する際の方法についてメモ。
まず、cocosbuilderの

• File -> new -> Interface File...

から、新しいccbファイルを作成する。このccbファイルがcocos2dxのcc.Sceneオブジェクトと同等になる。ここではKotoappMain.ccbというファイルを作成し、JSでも同名のオブジェクトからアクセスしてみます。
作成したKotoappMain.ccbをダブルクリックすると、右上にCode Connectionと書いてある部分がある。その中にあるJS ControllerにKotoappMainと記入する。

これでKotoappMainというオブジェクトからアクセス可能になる。次に

• File -> Project Settings...

にあるStart ccb file nameにKotoappMainと記述する。

cocosbuilderでpublishすると、main.jsが出力されるので、cocos2dxプロジェクトのResources/main.jsをこれに置き換えましょう。その中身を見るとこんな感じになっている。

// Autogenerated main.js file
require("jsb.js");

function main()
{
	cc.FileUtils.getInstance().loadFilenameLookup("fileLookup.plist");
    //cc.Texture2D.setDefaultAlphaPixelFormat(6);
	var director = cc.Director.getInstance();
    var scene = cc.BuilderReader.loadAsScene("KotoappMain");
    var runningScene = director.getRunningScene();
    if (runningScene === null) director.runWithScene(scene);
    else director.replaceScene(scene);
}
main();

9行目のloadAsSceneで先程Start ccb file nameで指定したKotoappMainが記述される。ccbi拡張子を追加してKotoappMain.ccbiと記述しても動くようだ。jsb.jsファイル以外にもrequireの必要があるファイルはrequireしておく。publishして作成されたKotoappMain.ccbiファイルはmain.jsと同じフォルダに置いておきましょう。 次に、ccbiファイルがロードされた後の挙動は下記のように書く。

var KotoappMain = function(){};

KotoappMain.prototype.onDidLoadFromCCB = function () {
    cc.log("loaded!!");
};

これでccbiファイルがロードされた時にcc.logが吐かれる。