Hello everyone,
I’ve encountered a challenge while working with Phaser 3 and Matter.js that I could use some help with.
I’m currently attempting to create a closed path and add a body to it using Matter.js as the physics engine. My approach involves creating a graphics object for the path and then using Matter to add a body to it. However, I’m facing some issues with alignment.
Here’s a snippet of the code I’ve been working on:
// the graphics object has been created above
scnGame.matter.add.gameObject(graphics, {
vertices,
isStatic: true,
render: {
fillStyle: "#060a19",
fillColor: "#060a19",
strokeStyle: "#060a19",
lineWidth: 1,
},
// scale: 15, // ignored
// restitution: 3 // ignored
// position // is ignored too
});
The outcome surprises me because the body doesn’t seem to coincide with the graphics object as expected:
I’ve attempted manual alignment, but properties like scale and position don’t seem to take effect.
I found an example, but it uses specific numbers ([0, 600], [408, 492]) that I don’t quite understand the origin of.
I’m a bit confused about why this misalignment is occurring and how to ensure the body aligns correctly with the graphics object. Any guidance or insights on aligning Matter.js bodies with graphics objects in Phaser 3 would be greatly appreciated!
Thank you in advance for any help or suggestions you can provide.