'How to make sprite not collide with another sprite but only with player. Phaser 3 and matter js

Big story short: I'm using matter js with phaser3 and I have a player, platform, saw and tree. Like in a regular platformer, the saw should be halfway between the ground and the air/space. enter image description here

The problem is that the platform is a physics body, and so is the saw. The player has to collide with the saw, a tree, the platform. And the saw needs to collide with only the player and not the platform. I thought of using collisionfilters, but I don't know which layer to put it on. Any help would be greatly appreciated. The jsfiddle for a minimal reproducible example is given below. Thanks!

Jsfiddle: jsfiddle.net/prateek_1/6Lsjf9w4/29



Solution 1:[1]

I assume the saw should hit the player but not the platform. this article explains it pretty well https://blog.ourcade.co/posts/2020/phaser-3-matter-physics-collision-filter/
Or checkout the official exmaples, this one inspecific https://phaser.io/examples/v3/view/physics/matterjs/collision-group

Here is a short example (how it could work):

let playertouchingground = true
const config = {
  type: Phaser.AUTO,
  width: 400,
  height: 180,
  physics: {
    default: "matter",
    matter: { debug: true}
  },
  scene: {
    create,
    update
  },
};

var game = new Phaser.Game(config);

function create() {
  ground = this.matter.add.sprite(0, 180, 'platform')
      .setStatic(true)
      .setScale(100, 1)
      .setOrigin(0)

  ground.body.label = 'platform'
  ground.setCollisionCategory(1)

  player = this.matter.add.sprite(125, 140, 'player')
  player.body.label = 'player'
  player.setCollisionGroup(2)
  player.setFixedRotation()
  
  saw = this.matter.add.sprite(140, 40, 'saw')
      .setBody('circle')
  
  saw.setCollisionGroup(2)
  saw.setCollidesWith(0)
  
  this.matter.world.on("collisionactive", (e, o1, o2) => {
      console.log(o1.label, o2.label)
      playertouchingground = true;
  });

  this.matter.world.on("collisionend", (e, o1, o2) => {
      playertouchingground = false;
    }
  )
  this.cursors = this.input.keyboard.createCursorKeys();
}


function update() {

  if (this.cursors.left.isDown ) {
      player.setVelocityX(-3)
  } else if (this.cursors.right.isDown ) {
      player.setVelocityX(3)
  } else {
      player.setVelocityX(0);
  }

  if (this.cursors.up.isDown && playertouchingground ) {
      player.setVelocityY(-8)
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.23.0/phaser.min.js" ></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1