Hitbox behaves strangely on sprite rotation

Phaser 3
1

Hello everyone!
I am making a level where a player has to catch various items. One type of item is tetrominos (tetris pieces) I used to have them in all orientations in one spritesheet, but that resulted in large hitboxes which made collisions inaccurate.
I am now using sprite rotation instead (through 90, -90 and 0 degrees). However, this became a new problem with hitboxes not aligning with the rotated sprite, which again makes collisions with the player sprite inaccurate.

This image shows the hitbox problem better. On the left is the original orientation and on the right is a rotated sprite with the problematic hitbox.
image

Does anyone have any idea how to fix this in an efficient way?
Here are some code snippets which are relevant to these sprites:

class Level1 extends Phaser.Scene {
constructor() {
	super("level1");
  }
  xCoords = [64,128,192,256,320,384,448,512,576,640,704,769,833,897,961];
  angles = [90, 0, -90];
  grav = 40;
create() {
  //spawning tetrominos
  this.tet1 = new Tetromino(this, this.xCoords[Math.round(Math.random() * (this.xCoords.length - 1))], 0);
  this.tet2 = new Tetromino(this, this.xCoords[Math.round(Math.random() * (this.xCoords.length - 1))], 0);

  this.tetrominos = this.physics.add.group();
  this.tetrominos.add(this.tet1);
  this.tetrominos.add(this.tet2);
}
update() {
    this.itemFall(this.tet1, 20);
    this.itemFall(this.tet2, 15);
}
//falling items
  itemFall(item, accel) {
    //set acceleration
    item.body.setAcceleration(0,accel);
    //reset item when it falls beyond the world boundary (top/bottom)
    if (item.y > config.height) {
      this.itemReset(item);
    }
  }
  itemReset(item) {
    item.setVelocityY(0);
    item.y = 0;
    item.x = this.xCoords[Math.round(Math.random() * (this.xCoords.length - 1))];
    console.log(item.texture.key);
    if (item.texture.key == "tetromino1") {
      item.setTexture("tetromino1", Phaser.Math.Between(0, 31));
      item.setAngle(this.angles[Math.round(Math.random() * (this.angles.length - 1))])
    }
  }
}
/*tetromino class*/
class Tetromino extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x=0, y=0, texture = 'tetromino1', frame = Phaser.Math.Between(0, 31)) {
    super(scene,x,y,texture,frame)
    scene.add.existing(this)
    scene.events.on('update', this.update, this)
  }
}
2

I think I found a solution. I edited the size of the sprite body (and therefore hitbox) depending on its angle like so:

// this belongs in the create function - set the origin to the center
//spawning tetrominos
        this.tet1 = new Tetromino(this, this.xCoords[Math.round(Math.random() * (this.xCoords.length - 1))], 0);
        this.tet1.setOrigin(0.5,0.5);
        this.tet2 = new Tetromino(this, this.xCoords[Math.round(Math.random() * (this.xCoords.length - 1))], 0);
        this.tet2.setOrigin(0.5,0.5);

//this is from the itemReset () function:
if (item.texture.key == "tetromino1") {
  item.setTexture("tetromino1", Phaser.Math.Between(0, 31));
  item.setAngle(this.angles[Math.round(Math.random() * (this.angles.length - 1))]);
//if horizontal, change size to wide and short
  if (item.angle == 90 || item.angle == -90){
    item.setSize(68,34);
  }
// if vertical, change size to narrow and tall
  else if (item.angle == 0){
    item.setSize(34,68);
  }
}

If anyone has a more suitable solution, please let me know :slight_smile: