带碰撞的精灵旋转 PIXIJS

问题描述

我的 pixiJS 应用程序有问题。我有很多精灵可以在我的场景中移动。我的目标是创建一个精灵之间碰撞的计划，为此我使用了凹凸插件和 rectangleCollision 函数：https://github.com/kittykatattack/bump/

let collision = b.rectangleCollision(selectCont,c2,true,false,true);

如果我的精灵没有旋转，它可以工作（图片中的中间情况），但如果我旋转精灵，碰撞不起作用（图片中的左右情况）。

我认为这是精灵边界的问题，但我不知道。

我有一个包含所有精灵的数组，我有一个函数，当我右键单击一个精灵时，它会应用旋转，当我想应用旋转时，它确实有效，但我的碰撞不正确 ?

for (var j = 0; j < cont.length; j++) {
  var c2 = cont[j];
  b.contain(c2,{x: 0,y: 0,width: 2400,height: 1800},true);
  
  if(selectCont!=c2){
    if(activeCollision == true){
       let collision = b.hit(selectCont,endCollision,true);
    }
  }
}

// function to apply a rotation to sprite
function rotate(){
  this.rotation -= Math.PI/4;
}

解决方法

精灵的 rotation 属性默认围绕左上角的顶点旋转精灵，而不是中心。可以使用 sprites pivot 属性更改枢轴点，如下所示：

sprite.pivot.set(sprite.width/2,sprite.height/2);

这会将精灵的轴心点设置在其自身的中心。