Phaser 3-设置图形对象的锚点

Question

我正在尝试将矩形图形对象的锚点设置为其中心，以便可以对其进行旋转补间。我可以找到的唯一相关信息是使用dispalyOriginX和dispalyOriginY属性，但这似乎无济于事。这是我的代码：

export default class GameUi extends Phaser.GameObjects.Group {
  constructor(scene) {
    super(scene);

    let test = new Graphics(scene);
    test.setName('test');
    test.lineStyle(4, 0xffffff, 1);
    test.strokeRectShape(new Rectangle(100, 100, 75, 50));

    // The following doesn't work :(
    // test.displayOriginX = 0.5;
    // test.displayOriginY = 0.5;

    scene.tweens.add({
      targets: test,
      angle: 20,
      duration: 2000,
      ease: "Power2",
      yoyo: true,
      loop: -1
    });

    this.addMultiple([test], true);
  }
}

该矩形应该围绕其中心旋转，但是如您在下图中所见，它似乎围绕游戏区域的左上角旋转。我尝试了displayOrigin属性，其值介于0.5到500之间，所有结果都相同。

我以为是因为我将矩形添加到导致问题的组中，但是我尝试不将矩形添加到具有相同效果的组中。这是我的代码不在组中时的样子：

export default class GameUi {
  constructor(scene) {
    let test = scene.add.graphics();
    // the rest stays the same as in my first code example
  }
}

Answer 1

我不知道您的Rectangle类是什么，但我认为它是Phaser.graphics的扩展？

如果是，则需要在矩形实例上调用setOrigin方法。

tempRect = new Rectangle(100, 100, 75, 50) # create
tempRect.setOrigin(tempRect.halfWidth, tempRect.halfHeight) // Set origin to middle point

test.strokeRectShape(tempRect);