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

You are almost there, you would just have to add the "Laser" GameObject to the scene and than add the GameObject to the physics world, for it to work.

You would only have to make a few minor tweaks for it to work, as intended.

(Updated Code) Here is a short runable demo:

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 with a phaser group
    let group = this.physics.add.group({  classType: Laser2});
    
    group.createMultiple({max: 30})
      
    let groupBall = group.create(150, 10)
    
    // Or simply like this
    // groupBall.body.setVelocityY (150)
    groupBall.body.setVelocity(0, 150)
    
    let groupBall2 = group.create(200, 10)
    
    groupBall2.body.setVelocityY(200)
      
}

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

Warning: if you are not using a sprite or an image, and you are using a physics-group be careful, because not all properties of the group object can be used. Check the documentaiton to be on the save side.