Extending ellipse objects

Phaser 3
1

I’m fairly new to the Phaser3 system and I’m trying to build a game where there will be hundreds of simple circles that will change size (and eventually colour, etc.) based on a number of parameters. After reading around, it seemed that the best way to achieve this would be to extend an Ellipse game object. However, I can’t seem to get these circles to appear and I’m hoping someone can point me in the direction of where I’ve gone wrong.

As an alternative idea, is there a game object suitable for drawing a number of basic shapes (circles, lines, squares, etc) on? Or should I just have a custom class that draws everything directly into the scene?

class Cell extends Phaser.GameObjects.Ellipse {
  constructor (scene, x, y, cellSize) {
    super(scene, x, y);
    this.population = 20;
    this.capacity = 100;
    this.cellSize = cellSize;
    this.setFillStyle(0xff0000);
  }

  update() {
    const size = (this.population / this.capacity) * this.cellSize;
    this.setDisplaySize(size, size);
    super.update();
  }
}

class BattleScene extends Phaser.Scene {
  create() {
    this.cell1 = new Cell(this, 100, 100, 50);
    this.cell2 = new Cell(this, 200, 100, 50);

    this.add.group([this.cell1, this.cell2])

    // This ellipse appears as expected 
    this.testEllipse = this.add.ellipse(300, 100, 100,100, 0x00ff00)
  }

  update(time, delta) {
    this.cell1.update();
    this.cell2.update();
  }
}
2

Use

this.add.existing(this.cell1);
this.add.existing(this.cell2);

after creating them.

2 Likes
3

Also if you want to create your extended classes instances using the Phaser factory function (like in this.add.sprite(...)) you can register your classes with the factory doing this:

Phaser.GameObjects.GameObjectFactory.register('cell', function (x, y, key, cellSize) {
        
        var cell = new Cell(this.scene, x, y, cellSize);

        this.displayList.add(cell);
        this.updateList.add(cell);

        return cell;
    }
);

Then you’ll be able to use this.add.cell(...) from your scenes

1 Like
4

Thanks! That was exactly what I needed.

As a follow up question, is there a more generic game object type that I can use to draw a number of shapes in response to user interactions?

5

There is Graphics.

1 Like