gpt4 book ai didi

javascript - 从 pixi 到 p2 的 Sprite 边界多边形

转载 作者:太空宇宙 更新时间:2023-11-04 16:20:56 29 4
gpt4 key购买 nike

我正在使用

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

我想检测这个 Sprite 的碰撞,因为 PIXI 不支持碰撞检测。我正在使用 p2.js这需要一个用于碰撞检测的多边形边界框

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

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

最佳答案

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

stage.scale.y = -1;

您需要为每个 Sprite 添加一个 p2.Body。要将位置和旋转数据从 Pixi.js Sprite 传输到 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/

关于javascript - 从 pixi 到 p2 的 Sprite 边界多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29302247/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com