【cocos2d-js教程】cocos2d-js中使用cocosbuilder绑定变量和Selector

本文由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, 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, scene, 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, memberVariableName,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,0);        cc.Director.getInstance().pushScene(cc.TransitionFade.create(0.5, scene, 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选中去掉才行。