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

【问题标题】：bounding polygon of a sprite from pixi to p2从 pixi 到 p2 的精灵的边界多边形
【发布时间】：2015-05-31 20:57:48
【问题描述】：

我正在使用

将精灵导入 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 并检测碰撞？

任何示例或一些指示都会非常有帮助。

【问题讨论】：

你也想要物理吗？或者只是收到有关重叠的通知？
@schteppe 仅重叠

标签： javascript html pixi.js

【解决方案1】：

p2.js 和 Pixi.js 有不同的坐标系，这使得解决方案有点复杂。 p2.js 中的“向上”方向是 Y 轴正方向，而 Pixi 中是 Y 轴负方向。为了解决这个问题，一种解决方案是对 Pixi 阶段应用负比例以将其上下翻转：

stage.scale.y = -1;

您需要为每个精灵添加一个 p2.Body。要将 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/

【讨论】：