How to delete matter js object on collision dynamically phaser js

Question

I'm making a platformer game in which there is player and some powerups. To check the collision I used matterjs collisionactive function:

this.matter.world.on("collisionactive", (e, o1, o2) => {
    
});

Inside the function, I need to remove the powerup from the game. So I tried o1.destroy , where o1 is the powerup. This did not work, and neither did it return a error. I also tried this.matter.world.remove(o1);. This did not work either. Why am I not able to remove the objects? Any help is greatly appreciated. Thanks!

Answer 1

There are some issues, if you only remove the object from them world. The best/cleanest solution is to use the destroy() method of the GameObject.

I would use the event collisionstart, there check if the player is interacting with the powerup, and destroy the gameObject. This will also clear the physics object.

Here is a example, based on the last answer:

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()
  
  powerup = this.matter.add.sprite(140, 10, 'powerup').setBody('circle')
  powerup.body.label = 'powerup'
    powerup.setCollisionGroup(2)
  
    this.matter.world.on("collisionstart", (e, o1, o2) => {
      
      if([o1.label, o2.label].indexOf('powerup') != -1 &&
      [o1.label, o2.label].indexOf('player') != -1){
        o2.gameObject.destroy();
       }
  });

  this.matter.world.on("collisionend", (e, o1, o2) => {
      playertouchingground = true;
    }
  )
  
  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>

btw.: this.matter.world.remove(o1) should work, but doesn't hide/remove the image, as mentioned in this post. The solution is shown in the code above, since it works.