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 squarePolygon = this.matter.add.polygon(8, 8, 4, 16, {
			isStatic: true,
			vertices: [{
				x: 0,
				y: 0,
			}, {
				x: 16,
				y: 0,
			}, {
				x: 16,
				y: 16,
			}, {
				x: 0,
				y: 16,
			}],
		});
    // Create initial polygon without sprite... centering is correct
		this.createPolygon(24, 8);
    // Create polygon and assign it as the body of the sprite... sprite is incorrectly positioned
		const trianglePolygon = this.createPolygon(40, 8);
		const matterSprite = this.matter.add.sprite(trianglePolygon.position.x, trianglePolygon.position.y, "tiles", 13, {
    isStatic: true
    });
    matterSprite.setExistingBody(trianglePolygon);
    matterSprite.setDisplayOrigin(matterSprite.width / 2, matterSprite.height / 2)
    // Create polygon, sprite, and don't connect them at all... this works, but is it correct?  Seems a little weird to not have them connected
		const sprite = this.add.sprite(56, 8, "tiles", 13);
		this.createPolygon(56, 8);
		console.log("triangle", trianglePolygon.centerOffset, trianglePolygon.centerOfMass);
	}
  
  createPolygon(x, y) {
    const polygon = this.matter.add.polygon(x, y, 4, 16, {
          isStatic: true,
          vertices: [{
            x: 0,
            y: 0,
          }, {
            x: 16,
            y: 0,
          }, {
            x: 16,
            y: 16,
          }, {
            x: 0,
            y: 8
          }],
        })
    // Taken from https://github.com/phaserjs/phaser/issues/6178#issuecomment-1198086878
		const offsetX = polygon.centerOffset.x - 8;
		const offsetY = polygon.centerOffset.y - 8;
		polygon.vertices?.forEach((vert) => {
			vert.x += offsetX;
			vert.y += offsetY;
		});
    return polygon;
  }
}

const config = {
	type: Phaser.AUTO,
	parent:...