PhysicsEditor and MatterJs Issue

Phaser 3
1

I started out with a MatterJs image and a call to setCircle. Then I had a setOnCollideWith to handle the collision with another object. This worked fine.

this.image = this.scene.matter.add.image(x, y, ‘assets’, ‘peg_normal’);
this.image.setCircle(this.image.width/2, { isStatic: true, friction: 0 });
this.image.setOnCollideWith(this.scene.ball.image, () => {
this.hitPeg();
});

Next, I created a physics shape with PhysicsEditor by CodeAndWeb.

"peg": {
	"type": "fromPhysicsEditor",
	"label": "peg",
	"isStatic": true,
	"density": 0.1,
	"restitution": 0.9,
	"friction": 0,
	"frictionAir": 0.009999999776482582,
	"frictionStatic": 0.5,
	"collisionFilter": {
		"group": 0,
		"category": 2,
		"mask": 1
	},
	"fixtures": [
		{
			"label": "",
			"isSensor": false,
			"circle": {
				"x": 18.977272727272727,
				"y": 18.90909090909091,
				"radius": 15
			}
		}
	]
}

Then I updated my code to set the shape on my image.

let pegsmatter = this.scene.cache.json.get(‘pegsmatter’);
this.image = this.scene.matter.add.image(x, y, ‘assets’, ‘peg_normal’, { shape: pegsmatter.peg } as any);

The collider seems to be in the right place, but the collision physics changed significantly (No bounce even thought I set the restitution really high) and setOnCollideWith no longer fires.

Any thoughts?

2

I found a workaround. Instead of using “fromPhysicsEditor”, I edited my json to be “fromVertices” or “circle”. That fixed the altered physics problem. Then to fix the collision issue, I made sure to pass all the settings upfront.

const pegsmatter = this.scene.cache.json.get('pegsmatter');
const pegSettings: any = {
  shape: pegsmatter.peg,
  isStatic: true,
  collisionFilter: {
    category: CATEGORY_PEG,
    mask: CATEGORY_BALL,
    group: 0
  },
  onCollideWith: {}
};
const ballId = (this.scene.ball.image.body as MatterJS.BodyType).id;
pegSettings.onCollideWith[ballId] = () => {
  this.hitPeg();
};
this.image = this.scene.matter.add.image(x, y, 'assets', 'peg_normal', pegSettings);
this.image.setFrame('peg_normal');

For some reason, I had to set the image again for the complex colliders.

3

One last follow up. I found a better solution. The original approach was fine, but the physics were getting messed up because the individual parts were not getting set to static even though the main object was static. So another call to setStatic fixed that.
As for the OnCollideWith, I just added the OnCollideWith to each part.

const ballId = (this.scene.ball.image.body as MatterJS.BodyType).id;
(this.image.body as MatterJS.BodyType).parts.forEach(part => {
    part.onCollideWith[ballId] = () => {
        this.hitPeg();
    };
});
this.image.setStatic(true);