Phaser 3 physics group with circle

Question

I'm fairly new to Phaser, and am following this tutorial: https://www.codecaptain.io/blog/game-development/shooting-bullets-phaser-3-using-arcade-physics-groups/696

Except, that instead of the Laser being a Sprite , I just want it to be a simple circle, so I tried the following;

export class Laser extends Phaser.Physics.Arcade.Body {
    constructor(scene: Phaser.Scene, x: number, y: number) {
        const c = new Phaser.GameObjects.Ellipse(scene, x, y, 25, 25, 0x00ff00);

        super(scene.physics.world, c);
    }
}

This just throws the following error Uncaught TypeError: child.addToDisplayList is not a function .

Am I missing something fairly fundamental here? I can only seem to be able to use Phaser.Physics.Arcade.Sprite or Phaser.Physics.Arcade.Image . Is it not possible to just have a physics object that consist of multiple rectangles or circles?

Answer 1

Your code looks good, but you would still have to add the GameObject to the scene and the physics world , for it to work.

You would only have to make minor tweaks for it to work.

(Updated Code) Here a short executable demo to show case this:

 document.body.style = 'margin:0;'; class Laser extends Phaser.Physics.Arcade.Body { constructor(scene, x, y) { // add object to the scene, so that it can be displayed const c = scene.add.ellipse( x, y, 25, 25, 0x00ff00); // create the actual body super(scene.physics.world, c); // add Body to world scene.physics.add.existing(c) } } class Laser2 extends Phaser.GameObjects.Ellipse { constructor(scene, x, y) { super(scene, x, y, 25, 25, 0xff0000); //give the GameObject a Physics body scene.physics.add.existing(this) } } var config = { type: Phaser.AUTO, width: 536, height: 183, physics: { default: 'arcade', arcade: { gravity:{ y: 100 }, debug: true } }, scene: { create }, banner: false }; function create () { this.add.text(10,10, 'Falling balls- red are from a Group').setScale(1.5).setOrigin(0).setStyle({fontStyle: 'bold', fontFamily: 'Arial'}); // create a laser let laser = new Laser(this, 50, 50) // create second laser let group = this.physics.add.group({ classType: Laser2}); group.create(150, 0) group.create(170, -100) group.create(180, -50) } new Phaser.Game(config);

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