cocos2d-js 绑定 cocosBuilder

cocos2d-js 绑定 cocosBuilder

　　最近研究cocos2d-js开发h5游戏，一开始选用的界面编辑器是cocostudio v2.2.9，发现里边存在好多问题，比如更新图片资源的时候以前编辑好的界面会出现不对位，必须要关闭当前的csd文件然后再打开才能显示正常，而且在这个时候cocostudio很脆弱，心情不好就崩溃了；还有就是帧动画的时候只有位置、缩放和旋转三个属性，对于一些复杂的动画效果实现起来只能用这三个属性墨迹，导致做出来的动画真心没法看。。。所以还是改用cocosBuilder，但是发现test里边cocos2d-js绑定cocosBuilder的例子绑不是很满意，自己搞了一下，上技术：

　　1.cocos2d-js Version cocos2d-js-v3.6 

　　2.cocosBuilder Version 3.0 (3.0)

　3.用cocosBuilder创建一个工程就是默认的MainScene.ccb 然后将其导入 项目res/ccbi文件夹下

　　4.将项目文件里边的project.json文件的 modules 改为 "modules" : ["cocos2d","extensions"]

　　5.修改引擎文件  CCBReader.js 下

 

 

 

　　6.代码

//这是一个父类
var BaseLayer = cc.Layer.extend({
　　//加载cbbi文件 并添加到当前蹭上
    loadCCB:function(ccbFileName,ccbFilePath){
        cc.BuilderReader.registerController(ccbFileName,this);
        cc.BuilderReader.setResourcePath("res/ccbi/");
        var node = cc.BuilderReader.load(ccbFilePath, this);
        this.addChild(node);
    },
　　//通过上边引擎代码的修改，当播放完动画之后会回调本方法，参数是播放完的动画的名字
    completedAnimationSequenceNamed:function(animationName){
        cc.log(animationName + "动画播放完毕");
    },
　　//加载完ccbi会调用此方法
    onDidLoadFromCCB:function(ccbFileName){
        cc.log(ccbFileName + "加载完毕");
    }
});

//刚才的ccbi文件会绑定到当前这个层上
var MainSceneLayer = BaseLayer.extend({

　　//重写父类的方法 已处理自己播放完动画要做的事情
    completedAnimationSequenceNamed:function(animationName){
        cc.log(animationName + "动画播放完毕");

        if(animationName == "action"){
　　　　　　　//onTest是本层的一个测试方法 证明当前的this 就是 本层的this
            this.onTest();
        }

    },
　　//ccbi里边按钮的回调方法 同过对引擎的修改 只要本层写了这个方法 并且名字和ccbi里边的一样 就能直接绑定上不需要其他做
    onPressButton:function(sender){
        cc.log("MainSceneLayer.ctor()111"+sender.getTag() + this._item);
　　　　　//播放动画 ccbi里边我创建了一个名字叫action的时间线
        this.rootNode.animationManager.runAnimationsForSequenceNamed("action");
    },
    onTest:function(){
　　　　//helloLabel是ccbi里边的一个LabelTTF 名字就叫helloLabel 通过this.可以直接获取 已经绑定好了 无需其他操作
        this.helloLabel.setString("nimeide");
    }


});


添加MainSceneLayer的代码很简单 这是写在app.js里边的
　　

var layer = new MainSceneLayer();
//第一个参数是你的ccbi的JS Controller 的值
//第二个参数是你的.ccbi文件的路径
layer.loadCCB("MainScene","res/ccbi/MainScene.ccbi");

this.addChild(layer);

　好了大功告成 需要注意的是 要把资源都加载进来噢　

　添加两个运行效果的图片 前面的为点击按钮之前  后边的为点击按钮之后