如何在PhaserJS的MatterJS顶点刚体上添加随动无物理精灵

你当前的问题是：直接给物理GameObject附加精灵属性时，精灵并未与刚体建立关联，因此无法同步运动。以下是两种无需在update循环手动更新的实现方式：

方式一：利用Phaser GameObject子元素嵌套 #

这是最简洁的方案，将精灵设为物理刚体GameObject的子元素，自动同步位置、旋转：

// 创建主物理多边形刚体
const poly1 = this.add.polygon(200, 200, Ployploy, 0x0000ff, 0.2);
const ThisPlayer = this.matter.add.gameObject(poly1, { 
  shape: { type: 'fromVerts', verts: Ployploy, flagInternal: true } 
});

// 创建精灵（坐标相对于父元素中心），并添加为子元素
const testSprite = this.add.sprite(0, 0, '');
ThisPlayer.add(testSprite);

// 若需要偏移，直接修改精灵相对坐标
testSprite.x = 30;
testSprite.y = -20;

子元素会自动继承父刚体的所有变换属性，无需额外处理。

方式二：使用MatterJS约束绑定 #

通过固定约束将精灵的物理体与主刚体绑定，适合需要更精细控制物理交互的场景：

// 创建主物理多边形刚体
const poly1 = this.add.polygon(200, 200, Ployploy, 0x0000ff, 0.2);
const ThisPlayer = this.matter.add.gameObject(poly1, { 
  shape: { type: 'fromVerts', verts: Ployploy, flagInternal: true } 
});

// 创建带物理体的精灵
const testSprite = this.matter.add.sprite(200, 200, '');
testSprite.setStatic(true); // 避免精灵受重力影响

// 添加固定约束，绑定两个刚体
this.matter.add.constraint(ThisPlayer, testSprite, 0, 1, {
  pointA: { x: 0, y: 0 }, // 主刚体上的绑定点（相对中心）
  pointB: { x: 0, y: 0 }  // 精灵刚体上的绑定点（相对中心）
});

调整pointA可以设置精灵相对于主刚体的偏移位置。

关键提示 #

• 精灵的锚点默认是(0.5,0.5)，若需调整可使用testSprite.setOrigin(0,0)等。
• 多精灵绑定只需重复上述步骤，批量添加子元素或创建约束即可。

内容的提问来源于stack exchange，提问作者Brenden McGraw-Hobbs