完全相同的想法沿其中心线放置一个矩形，但无法将图像放置在正确的位置，我该如何解决？

Question

我正在尝试使用 Phaser 3 绘制某种“射线”。

我开始用一个简单的矩形来表示射线的实验。这是代码。

  this.add.circle(90, 290, 10, 0xf00000);
  this.add.circle(290, 190, 10, 0xf00000);
  let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
  let reference = this.add.rectangle(90, 290, 600, 5, 0x00f000).setOrigin(0);
  reference.rotation = angle

这条线不是从起点的中心开始的。

我知道原因是 Phaser 绘制的线（实际上是矩形）从左上角 90、290 开始，矩形的中心线应该从这里开始。

要修复它，我只需要更改左上角的 y

let reference = this.add.rectangle(90, 290-5/2, 600, 5, 0x00f000).setOrigin(0);

其中 5/2 中的 5 表示绿色矩形的高度。

然后我得到了我想要的

然而，当我试图沿着“射线”移动某些东西时，事情变得复杂了。

这是代码。

var game = new Phaser.Game({
  scene: {
    preload: preload,
    create: create
  }
});

function preload() {
  this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
  this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');
}

function create() {
  this.add.circle(90, 290, 10, 0xf00000);
  this.add.circle(290, 190, 10, 0xf00000);
  let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
  let reference = this.add.rectangle(90, 290 - 5 / 2, 600, 5, 0x00f000).setOrigin(0);
  reference.rotation = angle
  
  let bolt = this.add.sprite(90, 290-76/2, 'bolt', 'bolt_strike_0002').setOrigin(0);
  bolt.rotation = angle;
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

我只是在之前工作代码的基础上加了两行代码，思路是一样的

  let bolt = this.add.sprite(90, 290-76/2, 'bolt', 'bolt_strike_0002').setOrigin(0);
  bolt.rotation = angle;

76/2中的76表示我放的螺栓(image/rectangle)的高度。

290表示起点中心的y坐标

完全相同的想法，将绿色矩形沿其中心线放置，但无法将 bolt 放置在正确的位置（沿绿色矩形的中心线），这是为什么呢？我错过了什么？

Answer 1

为了定位图像/矩形，...移相器使用 origin。
快速解决问题的方法是使用 setOrigin(0, .5)
(Details to Phasers Origin )

这里参数说明：

• 第一个参数是 x - 值：0 = 0% = left
• 第二个参数是y值：0.5 = 50% = middle

Info: If you set only one, like setOrigin(0), both x and y are set to 0.

此处更新示例：

var game = new Phaser.Game({
  scene: {
    preload: preload,
    create: create
  }
});

function preload() {
  this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
  this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');
}

function create() {
  this.add.circle(90, 290, 10, 0xf00000);
  this.add.circle(290, 190, 10, 0xf00000);
  let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
  let reference = this.add.rectangle(90, 290 , 600, 5, 0x00f000).setOrigin(0, .5);
  reference.rotation = angle
  
  let bolt = this.add.sprite(90, 290, 'bolt', 'bolt_strike_0002').setOrigin(0, .5);
  bolt.rotation = angle;
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Info: In this Answer: , you can see how a different set origin alteres the effect of the scale property.

Answer 2

您需要一个偏移量，它会改变其在局部坐标中的位置，并且任何对象的介质都是 (width/2,height/2) 给定原点在左上角。