我正在为 box2dweb 编写自己的渲染器,我决定使用 pixi.js。
我能够渲染矩形,但前提是它们没有旋转——如果旋转了,动画就会乱七八糟。它看起来像这样(左边一个是来自 box2d 的调试渲染器,右边一个是我的):http://scr.hu/0ozr/o552x
我知道我需要在 pixi 中为图形对象设置轴心,但我不知道如何从 box2d 获取盒子旋转的点的坐标。
我想我需要使用某种形式的接触约束,但我该如何访问它?
这是为多边形创建 pixi 图形对象的代码的一部分:(我需要将所有顶点转换为从多边形边界框左上角开始的坐标系,因为 PIXI 使用这种坐标系)。
getModel : function(body) {
var that = this;
var model = new PIXI.Graphics();
model.beginFill(0xFFFFFF);
var box = physHelpers.getBoundingBox(body);
model.position.x = box.x * that.scale;
model.position.y = box.y * that.scale;
var vertices = physHelpers.getTranslatedVertices(body);
model.moveTo(vertices[0].x * that.scale, vertices[0].y * that.scale);
for(var i = 1 ; i < vertices.length ; i++){
model.lineTo(vertices[i].x*that.scale, vertices[i].y*that.scale);
}
model.pivot = new PIXI.Point(box.width/2,model.height/2);
model.rotation = body.GetBody().GetAngle();
model.endFill();
return model;
}
最佳答案
好的,我知道了。当您更改枢轴时,PIXI 似乎会更改开始渲染的点(即使不更改旋转也会影响对象位置)。此外,box2d 旋转围绕 body 的中心旋转。
所以现在我可以使用 box2d body 位置而不用转换到左上角来开始渲染。
关于javascript - 在 pixi.js 中渲染来自 box2dweb 的旋转矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19845610/