熟悉box2d开发的朋友都知道,有一款编辑物理场景的神器RUBE,虽然Hola Studio本身已经具备相当强大的物理引擎编辑功能,但RUBE毕竟是专业做物理场景的,有必要将RUBE导出的资源集成进来。
预览链接:
RUBE导入示例
下面介绍Hola Studio导入一个RUBE配置的过程。
- 新建一个空白的项目。
- 在场景中,拖入一个UIAssets组件
- . 选中UIAssets组件,在右侧特有属性栏中单击“管理资源“添加资源(RUBE导出的图片资源和JSON配置)。
4.在弹出的对话框中,单击增加按钮。
- 在资源管理窗口中,上传你的RUBE图片资源和JSON配置,然后按确定添加进来。
- 在场景的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));
- 预览当前场景,就可以看到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);
}
}
}
欢迎加群讨论