Phaser.js图形与Matter.js物理体坐标不匹配问题求助

Phaser的Polygon图形和Matter.js物理体的顶点坐标系默认定义不同，导致两者无法对齐：

• Matter.js的fromVertices将顶点视为物体中心的偏移量
• Phaser默认把Polygon顶点视为图形左下角（origin=(0,0)）的偏移量

以下是两种直接有效的修复方法：

方案一：调整Phaser图形原点（最简洁） #

Phaser的GameObject.setOrigin()对Polygon完全生效，只需将图形原点设为中心，让顶点坐标与Matter.js的物理体顶点定义对齐：

修改代码中创建多边形的逻辑：

const poly = this.add.polygon(x + centreX, y + centreY, vertices, 0x1d4ed8);
// 添加此行，将图形原点设为中心
poly.setOrigin(0.5, 0.5);

设置后，Phaser会将你传入的顶点视为相对于图形中心的偏移，与Matter.js的物理体顶点坐标系完全匹配，两者即可完美对齐。

方案二：统一顶点为世界坐标系（备用） #

如果不想修改origin，可以调整顶点计算逻辑，直接使用世界坐标定义多边形，同时转换Matter.js的顶点基准：

// 移除顶点中的centreX/centreY偏移计算，直接使用世界坐标
const vertices = [
  { x: Math.cos(startAngle) * (radius - 10), y: Math.sin(startAngle) * (radius - 10) },
  { x: Math.cos(startAngle) * (radius + 10), y: Math.sin(startAngle) * (radius + 10) },
  { x: Math.cos(endAngle) * (radius + 10), y: Math.sin(endAngle) * (radius + 10) },
  { x: Math.cos(endAngle) * (radius - 10), y: Math.sin(endAngle) * (radius - 10) },
];

// 创建Phaser多边形时使用全局中心位置
const poly = this.add.polygon(x, y, vertices, 0x1d4ed8);

// 创建Matter物理体时，将顶点转换为相对于物体中心的偏移
this.matter.add.gameObject(poly, {
  shape: {
    type: 'fromVertices',
    verts: vertices.map(v => ({ x: v.x - x, y: v.y - y })),
  },
  isStatic: true,
});

这种方法通过统一坐标系基准，让两者的顶点定义逻辑保持一致，同样能解决偏移问题。

内容的提问来源于stack exchange，提问作者Pathogen