从 pixi 到 p2 的精灵边界多边形
bounding polygon of a sprite from pixi to p2
我正在使用
将精灵导入 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 并检测碰撞?
任何示例或一些指导都会很有帮助。
p2.js和Pixi.js坐标系不同,求解起来有点复杂。 p2.js 中的 "up" 方向沿着正 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.
});
我正在使用
将精灵导入 PIXIvar texture= PIXI.Texture.fromImage("img.png");
var sprite = new PIXI.Sprite(texture);
// I set the position
stage.addChild(sprite);
我想检测这个精灵的碰撞,因为 PIXI 不支持碰撞检测。我正在使用 p2.js
,这需要一个用于碰撞检测的多边形边界框
如何从 pixi 获取多边形并将其传递给 p2 并检测碰撞?
任何示例或一些指导都会很有帮助。
p2.js和Pixi.js坐标系不同,求解起来有点复杂。 p2.js 中的 "up" 方向沿着正 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.
});