javascript - CONTAINER（位于 GROUP 内）内的 Sprite 不可见

Question

我需要在屏幕上弹跳很多网球。每个球的中心都有一个标签文本。由于可能有很多球，我使用位图文本在球上添加标签。

到目前为止，我为实现这一目标所遵循的方法如下：

// Created a GROUP that will hold multiple balls
class Balls extends Phaser.Physics.Arcade.Group {
  constructor(scene) {
    super(scene.physics.world, scene);

    // Keep adding'Ball' to the group here
    scene.time.addEvent({
      delay: 2000,
      loop: true,
      callback: () => {
        const ball = new Ball(scene);
        this.add(ball);
      },
    });
  }
  // do some other stuff
}

// Created a CONTAINER that will hold BALL SPRITE with BITMAP TEXT
class Ball extends Phaser.GameObjects.Container {
  constructor(scene) {
    super(scene, 0, 0);

    const ball = scene.physics.add.sprite(0, 0, 'myBall');
    const label = scene.add.bitmapText(0, 0, 'fontName', 'label text');

    this.add(ball);
    this.add(label);

    // Enabling physics on container
    scene.physics.world.enable(this);

    // Moving/Bouncing balls around the screen
    this.body.setVelocity(50, 50).setBounce(1).setCollideWorldBounds(true);
  }
  // do some other stuff
}

现在的问题是球在屏幕上不可见，但它们在屏幕上存在并且弹跳良好（转动后可以看到容器周围的绿色轮廓debug: true）。

我需要做的就是在屏幕上弹一些网球，在它的中心有一个标签文本（需要经常更新它）。

标签： javascriptphaser-framework