精灵从pixi到p2的边界多边形

Question

我正在使用将精灵导入PIXI

var texture= PIXI.Texture.fromImage("img.png");
var sprite = new PIXI.Sprite(texture);
// I set the position
stage.addChild(sprite);

我想检测这个精灵上的碰撞，因为PIXI没有碰撞检测支持。我正在使用p2.js，这需要一个用于碰撞检测的多边形边界框

如何从pixi获取多边形并将其传递给p2并检测碰撞？

任何示例或一些指针都将非常有用。

Answer 1

p2.js和Pixi.js有不同的坐标系，这使得解决方案有点复杂。p2.js中的"向上"方向是沿着正Y轴，Pixi中的方向是沿着负Y轴。为了解决这个问题，一种解决方案是在Pixi平台上应用负刻度，将其倒置：

stage.scale.y = -1;

你需要为每个精灵添加一个p2实体。要将位置和旋转数据从Pixi.js精灵传输到p2.js实体，请执行以下操作：

body.position[0] = sprite.position.x;
body.position[1] = sprite.position.y;
body.angle = sprite.rotation;

要跟踪重叠，您需要添加联系人侦听器：

world.on('beginContact', function(evt){
    // evt.bodyA and evt.bodyB started overlapping!
});
world.on('endContact', function(evt){
    // evt.bodyA and evt.bodyB are not overlapping any more.
});

请参见此示例：http://jsfiddle.net/18shpxq8/2/