Matterjs can't have a differentiation in my collisions? jsfiddle inside

Phaser 3
1

hi,

I would like to differentiate my collisions, but with this minimal code, the events on collisions don’t occurs. Why ?

https://jsfiddle.net/espace3d/vLq08gke/31/

var cat1;
var cat2;
var cat3;
var player;
var enemy;
var obstacle;

config = {
	type: Phaser.CANVAS,
	width: 800,
	height: 800,
	backgroundColor: '#0d1018',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
		}
	},
	callbacks: {
		postBoot: function (game) {
			game.canvas.style.width = '100%';
			game.canvas.style.height = '100%';
		}
	},
	scene: {
		preload: preload,
		create: create,
	}
};

var game = new Phaser.Game(config);

function preload() {
	this.load.image("player", "https://i.postimg.cc/KvY7DVGx/player.png");
	this.load.image("enemy", "https://i.postimg.cc/qRk6Mhg4/enemy.png");
	this.load.image("obstacle", "https://i.postimg.cc/tgdVjtqB/obstacle.png");
}

function create() {
	cat1 = this.matter.world.nextCategory();
	cat2 = this.matter.world.nextCategory();
	cat3 = this.matter.world.nextCategory();
	this.matter.world.setBounds().disableGravity();
	// player is green
	player = this.matter.add.image(400, 700, 'player');

	// obstacle is blue
	obstacle = this.matter.add.image(430, 400, 'obstacle')

	//enemy is red
	enemy = this.matter.add.image(400, 100, 'enemy');
	enemy.setVelocityY(10);

	//collision category
	player.setCollisionCategory(cat2);
	obstacle.setCollisionCategory(cat3);

	enemy.setCollisionCategory(cat1);
	enemy.setCollidesWith([cat2, cat3]);

	this.matter.world.on('collisionstart', function (event, objA, objB) {
		if (objA.gameObject.texture.key === "bullet_enemy") {
			if (objB.gameObject.texture.key === "player") {
				alert('player')
			}
			if (objB.gameObject.texture.key === "obstacle") {
				alert('obstacle')
			}
		}
	})
}
2

Find a solution by myself, but the problem is that the event occurs with delay. Could you try and help me ?

https://jsfiddle.net/pcLka2t0/

var cat1;
var cat2;
var cat3;
var player;
var enemy;
var obstacle;

config = {
	type: Phaser.CANVAS,
	width: 800,
	height: 800,
	backgroundColor: '#0d1018',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
		}
	},
	callbacks: {
		postBoot: function (game) {
			game.canvas.style.width = '100%';
			game.canvas.style.height = '100%';
		}
	},
	scene: {
		preload: preload,
		create: create,
	}
};

var game = new Phaser.Game(config);

function preload() {
	this.load.image("player", "https://i.postimg.cc/KvY7DVGx/player.png");
	this.load.image("enemy", "https://i.postimg.cc/qRk6Mhg4/enemy.png");
	this.load.image("obstacle", "https://i.postimg.cc/tgdVjtqB/obstacle.png");
}

function create() {
	cat1 = this.matter.world.nextCategory();
	cat2 = this.matter.world.nextCategory();
	cat3 = this.matter.world.nextCategory();
	this.matter.world.setBounds().disableGravity();
	// player is green
	player = this.matter.add.image(400, 700, 'player');

	// obstacle is blue
	obstacle = this.matter.add.image(430, 400, 'obstacle')
  obstacle.name="obstacle"

	//enemy is red
	enemy = this.matter.add.image(400, 100, 'enemy');
	enemy.setVelocityY(10);

	//collision category
	player.setCollisionCategory(cat2);
	obstacle.setCollisionCategory(cat3);

	enemy.setCollisionCategory(cat1);
	enemy.setCollidesWith([cat2, cat3]);

	this.matter.world.on('collisionstart', function (event) {
			if (event.pairs[0].bodyB.gameObject.texture.key === "player") {
				console.log('player')
event.pairs[0].bodyB.gameObject.alpha =.5
}
			if (event.pairs[0].bodyB.gameObject.texture.key === "obstacle") {
				console.log('obstacle')
		event.pairs[0].bodyB.gameObject.alpha =.5

    }		
	})
}
3

Found !
bodyA is the object who receive the collision and bodyB is the collider

https://jsfiddle.net/pcLka2t0/2/

var cat1;
var cat2;
var cat3;
var player;
var enemy;
var obstacle;

config = {
	type: Phaser.CANVAS,
	width: 800,
	height: 800,
	backgroundColor: '#0d1018',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
		}
	},
	callbacks: {
		postBoot: function (game) {
			game.canvas.style.width = '100%';
			game.canvas.style.height = '100%';
		}
	},
	scene: {
		preload: preload,
		create: create,
	}
};

var game = new Phaser.Game(config);

function preload() {
	this.load.image("player", "https://i.postimg.cc/KvY7DVGx/player.png");
	this.load.image("enemy", "https://i.postimg.cc/qRk6Mhg4/enemy.png");
	this.load.image("obstacle", "https://i.postimg.cc/tgdVjtqB/obstacle.png");
}

function create() {
	cat1 = this.matter.world.nextCategory();
	cat2 = this.matter.world.nextCategory();
	cat3 = this.matter.world.nextCategory();
	this.matter.world.setBounds().disableGravity();
	// player is green
	player = this.matter.add.image(400, 700, 'player');

	// obstacle is blue
	obstacle = this.matter.add.image(440, 400, 'obstacle')
  obstacle.name="obstacle"

	//enemy is red
	enemy = this.matter.add.image(400, 100, 'enemy');
	enemy.setVelocityY(10);

	//collision category
	player.setCollisionCategory(cat2);
	obstacle.setCollisionCategory(cat3);

	enemy.setCollisionCategory(cat1);
	enemy.setCollidesWith([cat2, cat3]);

this.matter.world.on('collisionstart', function (event) {
			if (event.pairs[0].bodyB.gameObject.texture.key == "enemy") {
			if (event.pairs[0].bodyA.gameObject.texture.key == "player") {
				console.log('player')
event.pairs[0].bodyA.gameObject.alpha =.2
}
			if (event.pairs[0].bodyA.gameObject.texture.key == "obstacle") {
				console.log('obstacle')
		event.pairs[0].bodyA.gameObject.alpha =.2
}
}		
	})
}