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

**URL:** <https://phaser.discourse.group/t/matterjs-cant-have-a-differentiation-in-my-collisions-jsfiddle-inside/2519>\
**Category:** Phaser 3\
**Created:** [May 22, 2019, 2:08am UTC](https://phaser.discourse.group/t/matterjs-cant-have-a-differentiation-in-my-collisions-jsfiddle-inside/2519 "2019-05-22T02:08:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![espace](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/espace/32/1405_2.png) [@espace](https://phaser.discourse.group/u/espace)\
**Post date:** [May 22, 2019, 2:08am UTC](https://phaser.discourse.group/t/matterjs-cant-have-a-differentiation-in-my-collisions-jsfiddle-inside/2519/1 "2019-05-22T02:08:40Z")

</div>

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/](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')
			}
		}
	})
}
```

---

<div class="post-metadata">

**Author:** ![espace](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/espace/32/1405_2.png) [@espace](https://phaser.discourse.group/u/espace)\
**Post date:** [May 22, 2019, 8:58am UTC](https://phaser.discourse.group/t/matterjs-cant-have-a-differentiation-in-my-collisions-jsfiddle-inside/2519/2 "2019-05-22T08:58:58Z")

</div>

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/](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

    }		
	})
}
```

---

<div class="post-metadata">

**Author:** ![espace](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/espace/32/1405_2.png) [@espace](https://phaser.discourse.group/u/espace)\
**Post date:** [May 22, 2019, 9:23am UTC](https://phaser.discourse.group/t/matterjs-cant-have-a-differentiation-in-my-collisions-jsfiddle-inside/2519/3 "2019-05-22T09:23:24Z")

</div>

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

[https://jsfiddle.net/pcLka2t0/2/](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
}
}		
	})
}
```