Custom collider for Arcade physics

What I have tried to do so far is to create 2 physics groups for the player:

  • The first one contains the sprite and the collision pixels (that are only rectangles of 1x1 of size). This is the group that I use when I want to move the player, because all its components move together (the sprite and the pixels). This group shouldn’t have any collider.
  • The second one consists of only the collision pixels, and it has a collider with the platforms.

So I tried to create the first group (that I call player) containing the sprite and the pixels, and I gave it a collider just for testing:

this.player = this.physics.add.group();
const sprite = this.add.sprite(...);
// rectangles of only 1 pixel
const bottomPixel = this.add.rectangle(...);
const leftPixel = this.add.rectangle(...);
const rightPixel = this.add.rectangle(...);
this.player.addMultiple([sprite, bottomPixel, leftPixel, rightPixel]);
this.physics.add.collider(this.player, this.platforms);

forto-hitbox3

The problem is that all the components are individually subject to gravity and they fall down, but I would like the collision pixels to stay fixed like in the first picture (even though I would like the general structure i.e. the player group to be subject to gravity). Preferably, I would like a solution that doesn’t involve repositioning the components for each frame.