Phaser Matter SetBody Weird Offset

by incutonez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.85.1/phaser.min.js"></script>

TypeScript

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);