精灵从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中的"向上"方向是沿着正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/
相关文章:
- SVG/JavaScript:尝试选择和更改多边形点
- 如何获取谷歌地图多边形的当前fillColor
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 上传带有XMLHttprequest的文件-多部分/表单数据中缺少边界
- 使用Google Maps API驱动时间多边形
- Matlab点在多边形中
- 对于如何在没有modernizr的情况下用边界半径的功能检测检查来替换我的旧浏览器检查
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 如何在fabric js中向多边形添加图像
- 使用css跨浏览器动态剪切多边形
- fabric js多边形集合坐标
- 从传单数据到GeoJSON的多边形
- 我们可以为Cesium中使用CZML绘制的多边形设置outlineWidth属性吗
- 如何在pixi.js多边形上放置纹理
- 精灵从pixi到p2的边界多边形
- 如何在mongodb的边界框中获取任何项目(点,线字符串,多边形)
- 谷歌地图绘制多边形并缩放到其边界
- 从多边形(多边形)边界内的多边形中心生成n个随机点(Lat-Lng对)
- 我的谷歌地图多边形边界和缩放不起作用
- 如何在HTML中获取元素的形状/多边形/边界路径/框架