Hola Stduio导入RUBE配置的过程

熟悉box2d开发的朋友都知道，有一款编辑物理场景的神器RUBE，虽然Hola Studio本身已经具备相当强大的物理引擎编辑功能，但RUBE毕竟是专业做物理场景的，有必要将RUBE导出的资源集成进来。

预览链接：
RUBE导入示例

下面介绍Hola Studio导入一个RUBE配置的过程。

1. 新建一个空白的项目。
2. 在场景中，拖入一个UIAssets组件
   
3. . 选中UIAssets组件，在右侧特有属性栏中单击“管理资源“添加资源（RUBE导出的图片资源和JSON配置）。
   
   4.在弹出的对话框中，单击增加按钮。
   
4. 在资源管理窗口中，上传你的RUBE图片资源和JSON配置，然后按确定添加进来。
   
5. 在场景的onOpen事件中添加如下代码，假设rube配置的名字叫rube.json：

var rube = new RubeCantk(this);
var assets = this.find("assets");
assets.loadJSON("rube.json", function (json) {
    rube.setAssetsLoader(this.find("assets"));
    rube.createRube(json);
    b2Settings.b2_velocityThreshold = 1000;
}.bind(this));

1. 预览当前场景，就可以看到RUBE加载后的效果
   

更多：

• RubeCantk可以配置debug，调用原生box2d debugDraw，需要显示box2d debugDraw时，只需要将场景的debugBox2d设置为true。

 rube.createRube(json, {debug:true});

//反转显示box2d debugDraw
var win = this.getWindow();
if(win.debugBox2d === undefined) {
}
win.debugBox2d = !win.debugBox2d;

• 可以配置禁用鼠标拖动操作，可以这样（默认支持鼠标拖动）

 rube.createRube(json, {interactive:false});

• RUBE和Studio产生的刚体可以同时存在。

• 可以操作原声刚体一样操作rube产生的刚体，通过find来查找，RUBE导出的body的name就是控件的name。

this.find("body0").remove(true);
this.find("box").setV(0, -3);

• 你可以监听contact事件。

this.find("body0").addEventListener("begincontact", function(event) {
    console.log("contact with:" + event.body.element.name);
});

• 每个RUBE对象（目前有刚体和图片）创建好之后有个回调，你可以再createRube的时候传入，这样你可以对每个控件做特别的处理，比如隐藏禁用某些控件，监听控件点击事件等。

    rube.createRube(json, {createdCallback: this.onRubeElementReady.bind(this)});

this.onRubeElementReady = function(element) {
    if(element.name === "image1" || element.name === "image0") {
        element.setEnable(false);
    } else if(element.isUIRubeImage) {
        element.on("click", this.onRubeBodyClick.bind(element));
    }
};

this.onRubeBodyClick = function(point) {
    var target = this.name;
    console.log(this.name, " onClicked");
    var win = this.getWindow();
    this.openWindow("dialog", 
        function (retData) {
            if(retData && retData.image) {
                this.changeRubeImage(target, retData.image);
            }
        }.bind(win), false, initData);
};

this.changeRubeImage = function(name, src) {
    for(var i = 0; i < this.children.length; i++) {
        var child = this.children[i];
        if(child.name === name) {
            child.setImageSrc(src);
        }
    }
}

欢迎加群讨论