【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選中去掉纔行。