`this.add.image` 按预期工作，而 `Phaser.GameObjects.Image` 的子类将图像向上移动了一点，我该如何解决？

Question

我正在尝试在玩家的顶部放置一个健康条，它看起来像下面的那个

这是代码，

  create() {
    let player = this.add.image(100, 100, 'elves', 'blue_idle_0').setOrigin(0);
    this.add.rectangle(100, 100, player.width, player.height, 0xff0000, .3).setOrigin(0);
    console.log(player.width, player.height);

    let bar = new Phaser.GameObjects.Graphics(this);
    this.add.existing(bar);
    this.x = 100 + 10;
    this.y = 100 - 5 - 16;
    bar.fillStyle(0x000000);
    bar.fillRect(this.x, this.y, 80, 16);

    bar.fillStyle(0xffffff);
    bar.fillRect(this.x + 2, this.y + 2, 76, 12);

    bar.fillStyle(0x00ff00);
    let d = 76
    bar.fillRect(this.x + 2, this.y + 2, d, 12);
  }
}

按预期工作。

我使用 'elves' 从官方示例库借来的纹理创建了一个播放器。

我放了一个额外的红色矩形来指示播放器的左上角位于 (100, 100)。条形底部和矩形顶部之间的间距等于 5。

但是，当我将上面的所有内容封装在扩展 GameObjects.Image 的 class Player 中时，我遇到了一个错误。

这是代码。

class Player extends Phaser.GameObjects.Image {
  constructor(scene, x, y, texture, frame) {
    super(scene, x, y, texture, frame);
    this.setOrigin(0);
    scene.add.existing(this).setOrigin(0);
    scene.add.rectangle(x, y, this.width, this.height, 0xff0000, .3).setOrigin(0);
    console.log(this.width, this.height);

    let bar = new Phaser.GameObjects.Graphics(scene);
    scene.add.existing(bar);
    this.x = x + 10;
    this.y = y - 5 - 16;
    bar.fillStyle(0x000000);
    bar.fillRect(this.x, this.y, 80, 16);

    // Health
    bar.fillStyle(0xffffff);
    bar.fillRect(this.x + 2, this.y + 2, 76, 12);

    bar.fillStyle(0x00ff00);
    let d = 76
    bar.fillRect(this.x + 2, this.y + 2, d, 12);
  }
}

class BootScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'BootScene'
    });
  }

  preload() {
    this.load.path = 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/'
    this.load.atlas('elves', 'elves-craft-pixel.png', 'elves-craft-pixel.json');
  }

  create() {
    new Player(this, 100, 100, 'elves', 'blue_idle_0');
  }
}

var config = {
  width: 800,
  height: 600,
  backgroundColor: '0xD3D3DC',
  scene: [BootScene]
}

var game = new Phaser.Game(config);

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

条形和矩形都停留在它们应该在的位置

只有玩家向上移动了一点。

我错过了什么？

Answer 1

您快完成了，您对 this.x 和 this.y 所做的额外更改应该在健康栏上完成：

    // not needed to add here the offset
    this.x = x + 10;
    this.y = y - 5 - 16;

我只是将额外的值添加到健康栏位置 （我只是 added-up 位置的偏移量到 health-bar 所需的偏移量，以使代码更短):

    // the offset is only needed on the health-bar
    ...
    bar.fillRect(this.x + 10 , this.y - 21, 80, 16);
    ...
    bar.fillRect(this.x + 12, this.y - 19, 76, 12);
    ...
    bar.fillRect(this.x + 12, this.y -19, d, 12);

这里是您的代码的改编版：

class Player extends Phaser.GameObjects.Image {
  constructor(scene, x, y, texture, frame) {
    super(scene, x, y, texture, frame);
    this.setOrigin(0);
    scene.add.existing(this).setOrigin(0);
    scene.add.rectangle(x, y, this.width, this.height, 0xff0000, .3).setOrigin(0);
    console.log(this.width, this.height);

    let bar = new Phaser.GameObjects.Graphics(scene);
    scene.add.existing(bar);
    this.x = x;
    this.y = y ;
    bar.fillStyle(0x000000);
    bar.fillRect(this.x +10 , this.y-21, 80, 16);

    // Health
    bar.fillStyle(0xffffff);
    bar.fillRect(this.x + 12, this.y - 19, 76, 12);

    bar.fillStyle(0x00ff00);
    let d = 76
    bar.fillRect(this.x + 12, this.y -19, d, 12);
  }
}

class BootScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'BootScene'
    });
  }

  preload() {
    this.load.path = 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/animations/'
    this.load.atlas('elves', 'elves-craft-pixel.png', 'elves-craft-pixel.json');
  }

  create() {
    new Player(this, 100, 100, 'elves', 'blue_idle_0');
  }
}

var config = {
  width: 800,
  height: 600,
  backgroundColor: '0xD3D3DC',
  scene: [BootScene]
}

var game = new Phaser.Game(config);

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

`this.add.image` 按预期工作，而 `Phaser.GameObjects.Image` 的子类将图像向上移动了一点，我该如何解决？

`this.add.image` works as expected whereas subclass of `Phaser.GameObjects.Image` moves the image up a bit, how do I fix it?

javascript

phaser-framework