Hola Stduio导入RUBE配置的过程

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

预览链接:
RUBE导入示例

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

  1. 新建一个空白的项目。
  2. 在场景中,拖入一个UIAssets组件
    Hola Stduio导入RUBE配置的过程_第1张图片
  3. . 选中UIAssets组件,在右侧特有属性栏中单击“管理资源“添加资源(RUBE导出的图片资源和JSON配置)。
    Hola Stduio导入RUBE配置的过程_第2张图片
    4.在弹出的对话框中,单击增加按钮。
    Hola Stduio导入RUBE配置的过程_第3张图片
  4. 在资源管理窗口中,上传你的RUBE图片资源和JSON配置,然后按确定添加进来。
    Hola Stduio导入RUBE配置的过程_第4张图片
  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加载后的效果
    Hola Stduio导入RUBE配置的过程_第5张图片

更多:

  • 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);
        }
    }
}

欢迎加群讨论
Hola Stduio导入RUBE配置的过程_第6张图片

你可能感兴趣的:(管理,box2D,rube,HolaStudio)