Matter Physics Polygon Body Has Weird Offset

Phaser 3
1

In this fiddle, I’m trying to understand why the sprite in the red outline has some weird offset applied to it (image below)… I set the position the same way I set the position of the blue outline sprite, so what’s going on here? Does it have something to do with the center of mass? I could fix this by applying some arbitrary offset in the setPosition method, but I don’t know how I’d determine that offset.

class Example extends Phaser.Scene {
	constructor() {
		super();
	}

	preload() {
		this.load.spritesheet("tiles", "https://i.imgur.com/FeCe8cx.png", {
			frameWidth: 16,
			frameHeight: 16,
			spacing: 4,
		});
	}

	create() {
		const wallBottomLeft = this.matter.add.sprite(16, 16, "tiles", 13, {
			isStatic: true,
			ignoreGravity: true,
			shape: {
				type: "polygon",
			},
			vertices: [{
				x: 0,
				y: 0,
			}, {
				x: 16,
				y: 0,
			}, {
				x: 16,
				y: 16,
			}, {
				x: 0,
				y: 8,
			}],
			render: {
				lineColor: 0xFF0000,
			},
		});
		wallBottomLeft.setPosition(wallBottomLeft.x + 8, wallBottomLeft.y + 8);

		const wallBottom = this.matter.add.sprite(32, 16, "tiles", 14, {
			isStatic: true,
			ignoreGravity: true,
		});
		wallBottom.setPosition(wallBottom.x + 8, wallBottom.y + 8);
	}
}

const config = {
	type: Phaser.AUTO,
	parent: "phaser-example",
	zoom: 2,
	pixelArt: true,
	physics: {
		default: "matter",
		matter: {
			debug: true,
		},
	},
	scene: [Example],
	width: 256,
	height: 176,
	scale: {
		mode: Phaser.Scale.ScaleModes.HEIGHT_CONTROLS_WIDTH,
	},
};

new Phaser.Game(config);

polygon

2

All right, here’s the evolution of what I’ve done (fiddle). I found this answer that solves my issue for just the polygon. Once I assign this polygon to a sprite’s body, things got weird… image for reference. In the image, you can see that the 2nd custom polygon has the correct shape, but the sprite is slightly askew. I ended up having the sprite and the body completely disconnected from one-another, and all seems well, but it seems weird to not connect them?

I’ve tried messing around with the sprite’s setPosition and setOrigin, but that makes things even weirder. I read that once you assign a sprite a body, it uses the body’s position as the sprite’s position, but that doesn’t explain why the sprite’s position is askew… unless the center of mass or centerOffset affect the sprite in some way… but if that’s the case, how would I change the sprite’s position if setPosition affects the body’s position!? It’s really confusing.

3

Okay, according to this post, I was missing setDisplayOrigin (fiddle). I don’t completely understand why, but it fixed the issue with a sprite having the custom polygon body.