精灵旋转与碰撞 PIXIJS

Question

I have a problem with my pixiJS App. I have many sprites that I can move in my scene. My goal is to create a plan with collisions between sprites, for that I use the bump plugin and the rectangleCollision function: https://github.com/kittykatattack/bump/

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

It works (the middle case on the pic) if my sprites have no rotation but if I rotate the sprites the collisions don't work (left and right case in the pic).

I think it's a problem with sprite bounds but I have no idea.

I have an array with all my sprites and I have a function when I right click on a sprite it applies a rotation and when I want to apply my rotation it does work but my collision is not correct

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,c2,endCollision,false,true);
    }
  }
}

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

Answer 1

The rotation property of sprites defaults to rotating the sprite around the top left vertice, not the center. The pivot point can be changed with the sprites pivot property, as shown here:

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

This will set the sprites pivot point to be right in the center of itself.