Блог

Мне нужно отскочить от большого количества теннисных мячей на экране. В центре каждого шара есть текст метки. Поскольку шаров может быть много, я использую растровый текст для добавления меток на шар.

Подход, которому я следовал до сих пор для достижения этого, заключается в следующем:

 // 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 ).

Все, что мне нужно сделать, это отскочить несколько теннисных мячей по экрану с текстом метки в его центре (нужно обновлять его довольно часто).