本文由qinning199原创，转载请注明：http://www.cocos2dx.net/post/206
最近研究网页版游戏开发，因为之前用的就是cocos2d-x 2.2.1框架，所以就选用了cocos2d-js v3.0final，之前cocos2d-x也是使用了cocosbuilder用作界面开发，所以这次做网页版也是打算使用cocosbuilder做界面和一些简单动画。
研究了一下cocos2d-js中得tests工程，发现关于cocosbuilder绑定的东西非常少，只有如下代码：
cc.BuilderReader.registerController("TestButtonsLayer",{
"onCCControlButtonClicked" : function(sender,controlEvent) {
var str = (function(){
switch(controlEvent) {
case cc.CONTROL_EVENT_TOUCH_DOWN: return "Touch Down.";
case cc.CONTROL_EVENT_TOUCH_DRAG_INSIDE: return "Touch Drag Inside.";
case cc.CONTROL_EVENT_TOUCH_DRAG_OUTSIDE: return "Touch Drag Outside.";
case cc.CONTROL_EVENT_TOUCH_DRAG_ENTER: return "Touch Drag Enter.";
case cc.CONTROL_EVENT_TOUCH_DRAG_EXIT: return "Touch Drag Exit.";
case cc.CONTROL_EVENT_TOUCH_UP_INSIDE: return "Touch Up Inside.";
case cc.CONTROL_EVENT_TOUCH_UP_OUTSIDE: return "Touch Up Outside.";
case cc.CONTROL_EVENT_TOUCH_CANCEL: return "Touch Cancel.";
case cc.CONTROL_EVENT_VALUECHANGED: return "Value Changed.";
}
return "";
})();
this["mCCControlEventLabel"].setString(str);
}
});
这种用法是在cocosbuilder中把按照上左图所示，选中Javascript Controlled选项，然后如下图将JS Controller设成TestButtonsLayer，在Selector中填写onCCControlButtonClicked即可，变量名可以通过this["mCCControlEventLabel"]或者this.mCCControlEventLabel 方式引用。
cc.BuilderReader.registerController("HelloCocosBuilderLayer",{
_openTest : function(ccbFileName) {
cc.BuilderReader.setResourcePath("res/");
var node = cc.BuilderReader.load(ccbFileName,this);
this["mTestTitleLabelTTF"].setString(ccbFileName);
var scene = new cc.Scene();
if(node != null)
scene.addChild(node);
/* Push the new scene with a fancy transition. */
cc.director.pushScene(new cc.TransitionFade(0.5,scene,cc.color(0,0)));
},"onMenuTestClicked" : function() {
this._openTest("res/ccb/ccb/TestMenus.ccbi");
},"onSpriteTestClicked" : function() {
this._openTest("res/ccb/ccb/TestSprites.ccbi");
},"onButtonTestClicked" : function() {
this._openTest("res/ccb/ccb/TestButtons.ccbi");
},"onAnimationsTestClicked" : function() {
this._openTest("res/ccb/ccb/TestAnimations.ccbi");
},"onParticleSystemTestClicked" : function() {
this._openTest("res/ccb/ccb/TestParticleSystems.ccbi");
},"onScrollViewTestClicked" : function() {
this._openTest("res/ccb/ccb/TestScrollViews.ccbi");
},"onTimelineCallbackSoundClicked" : function() {
this._openTest("res/ccb/ccb/TestTimelineCallback.ccbi");
}
});
如上代码与上段代码类似。
但是在绑定变量却出现了问题，我想在ccb中得名字是a，但是项目中我却向命名成b，上面tests中方法无法满足我的需求，因为我使用了cocos2d-x中得ccb文件，但是其中很多变量名绑定与项目中实际使用的名字不一致，该怎么办呢，后来我发现这个问题没法解决，于是，我便决定放弃registerController的方式。改用之前原始的方法，其实我研究cocos2d-js源代码的时候，发现这种原始的跟cocos2d-x类似的方法其实依旧存在，只是tests工程中没有对此有任何介绍。
于是，我又到网上寻找，最终，我发现了解决的方法，如下代码即可
var HelloCocosBuilderLayer = cc.Layer.extend({
_burstSprite:null,_testTitleLabelTTF:null,_customPropertyInt:0,_customPropertyFloat:0,_customPropertyBoolean:false,_customPropertyString:"",//跳转到其他 ccbi界面
openTest:function(ccbFileName,nodeName,nodeLoader){
var ccNodeLoaderLibrary = cc.NodeLoaderLibrary.newDefaultCCNodeLoaderLibrary();
ccNodeLoaderLibrary.registerCCNodeLoader("TestHeaderLayer",new TestHeaderLayerLoader());
if(nodeName != null && nodeLoader != null) {
ccNodeLoaderLibrary.registerCCNodeLoader(nodeName,nodeLoader);
}
/* Create an autorelease CCBReader. */
var ccbReader = new cc.BuilderReader(ccNodeLoaderLibrary);
ccbReader.setCCBRootPath("res/");
var node = ccbReader.readNodeGraphFromFile(ccbFileName,this);
this._testTitleLabelTTF.setString(ccbFileName);
var scene = cc.Scene.create();
if(node != null)
scene.addChild(node);
cc.Director.getInstance().pushScene(cc.TransitionFade.create(0.5,cc.black()));
},//接受Menu对象
onResolveCCBCCMenuItemSelector:function(target,selectorName){
return null;
},//接受Button对象
onResolveCCBCCControlSelector:function(target,selectorName){
if(this == target && "onMenuTestClicked" == selectorName){
return this.onMenuTestClicked;
}
if(this == target && "onSpriteTestClicked" == selectorName){
return this.onSpriteTestClicked;
}
if(this == target && "onButtonTestClicked" == selectorName){
return this.onButtonTestClicked;
}
if(this == target && "onAnimationsTestClicked" == selectorName){
return this.onAnimationsTestClicked;
}
if(this == target && "onParticleSystemTestClicked" == selectorName){
return this.onParticleSystemTestClicked;
}
if(this == target && "onScrollViewTestClicked" == selectorName){
return this.onScrollViewTestClicked;
}
if(this == target && "onTimelineCallbackSoundClicked" == selectorName){
return this.onTimelineCallbackSoundClicked;
}
return null;
},//接受_burstSprite、LabelTTF、LabelBM等对象
onAssignCCBMemberVariable:function(target,memberVariableName,node){
if(target == this && memberVariableName == "mBurstSprite"){
if(node instanceof cc.Sprite){
this._burstSprite = node;
}
return true;
}
if(target == this && memberVariableName == "mTestTitleLabelTTF"){
if(node instanceof cc.LabelTTF){
this._testTitleLabelTTF = node;
}
return true;
}
return false;
},onAssignCCBCustomProperty:function(target,ccbValue){
var bRet = false;
if (target == this) {
if (memberVariableName == "mCustomPropertyInt") {
this._customPropertyInt = ccbValue;
cc.log("CustomPropertyInt = " +this._customPropertyInt);
bRet = true;
} else if ( memberVariableName == "mCustomPropertyFloat") {
this._customPropertyFloat = ccbValue;
cc.log("CustomPropertyFloat = " + this._customPropertyFloat);
bRet = true;
} else if ( memberVariableName == "mCustomPropertyBoolean" ) {
this._customPropertyBoolean = ccbValue;
cc.log("CustomPropertyBoolean = " + this._customPropertyBoolean);
bRet = true;
} else if ( memberVariableName == "mCustomPropertyString" ) {
this._customPropertyString = ccbValue;
cc.log("CustomPropertyString = " + this._customPropertyString);
bRet = true;
}
}
return bRet;
},onNodeLoaded:function(node,nodeLoader){
var ccRotateBy = cc.RotateBy.create(20.0,360);
var ccRepeatForever = cc.RepeatForever.create(ccRotateBy);
this._burstSprite.runAction(ccRepeatForever);
},//各个方法的回调
onMenuTestClicked:function(sender,controlEvent){
this.openTest("res/ccb/ccb/TestMenus.ccbi","TestMenusLayer",new MenuTestLayerLoader());
},onSpriteTestClicked:function(sender,controlEvent){
this.openTest("res/ccb/ccb/TestSprites.ccbi","TestSpritesLayer",new SpriteTestLayerLoader());
},onButtonTestClicked:function(sender,controlEvent){
this.openTest("res/ccb/ccb/TestButtons.ccbi","TestButtonsLayer",new ButtonTestLayerLoader());
},onAnimationsTestClicked:function(sender,controlEvent){
var actionManager;
var ccNodeLoaderLibrary = cc.NodeLoaderLibrary.newDefaultCCNodeLoaderLibrary();
ccNodeLoaderLibrary.registerCCNodeLoader("TestHeaderLayer",new TestHeaderLayerLoader());
ccNodeLoaderLibrary.registerCCNodeLoader("TestAnimationsLayer",new AnimationsTestLayerLoader());
var ccbReader = new cc.BuilderReader(ccNodeLoaderLibrary);
ccbReader.setCCBRootPath("res/");
var animationsTest = ccbReader.readNodeGraphFromFile("res/ccb/ccb/TestAnimations.ccbi",this,actionManager);
//多了一个动画管理
actionManager = ccbReader.getAnimationManager();
animationsTest.setAnimationManager(actionManager);
this._testTitleLabelTTF.setString("TestAnimations.ccbi");
var scene = cc.Scene.create();
if(animationsTest != null) {
scene.addChild(animationsTest);
}
//跳转界面
var transitionColor = cc.c3b(0,0);
cc.Director.getInstance().pushScene(cc.TransitionFade.create(0.5,transitionColor));
//this.openTest("ccb/ccb/TestAnimations.ccbi","TestAnimationsLayer",new AnimationsTestLayerLoader());
},onParticleSystemTestClicked:function(sender,controlEvent){
this.openTest("res/ccb/ccb/TestParticleSystems.ccbi","TestParticleSystemsLayer",new ParticleSystemTestLayerLoader());
},onScrollViewTestClicked:function(sender,controlEvent){
this.openTest("res/ccb/ccb/TestScrollViews.ccbi","TestScrollViewsLayer",new ScrollViewTestLayerLoader());
},onTimelineCallbackSoundClicked:function(sender,controlEvent){
this.openTest("res/ccb/ccb/TestTimelineCallback.ccbi","TimelineCallbackTestLayer",new TimelineCallbackTestLayerLoader());
}
});
HelloCocosBuilderLayer.create = function(){
var retLayer = new HelloCocosBuilderLayer();
if(retLayer && retLayer.init()){
return retLayer;
}
return null;
};
var HelloCocosBuilderLayerLoader = cc.LayerLoader.extend({
_createCCNode:function(parent,ccbReader){
return HelloCocosBuilderLayer.create();
}
});
至此，问题终于解决，但是这种用的时候需要将上左图中的JavaScript Controller选中去掉才行。
