The bullet collider doesn't work

Phaser 3
1

Hello, I’m making a shooter videogame, and having trouble deleting bullets after they are hitting obstacles, here is my Bullets class:

export class Bullet extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y, angle, speed) {
        super(scene, x, y, 'bullet');
        this.scene = scene;
        this.speed = speed;
        this.angle = angle;

        scene.add.existing(this);
        scene.physics.world.enable(this);

        this.body.setAllowGravity(false);
        this.setRotation(angle)
        this.velocityX = Math.cos(angle) * speed;
        this.velocityY = Math.sin(angle) * speed;
    }

    onHit() {
        this.destroy();
    }

    update() {
        this.body.setVelocity(this.velocityX, this.velocityY);

        console.log('updated')
        if (this.x < 0 || this.x > this.scene.sys.canvas.width || this.y < 0 || this.y > this.scene.sys.canvas.height) {
            this.onHit();
            console.log('flew');
        }
    }
}

and here is my createScene() and update() for game:

function createScene() {
    this.keys = this.input.keyboard.addKeys({
        up: Phaser.Input.Keyboard.KeyCodes.W,
        left: Phaser.Input.Keyboard.KeyCodes.A,
        down: Phaser.Input.Keyboard.KeyCodes.S,
        right: Phaser.Input.Keyboard.KeyCodes.D,
        reload: Phaser.Input.Keyboard.KeyCodes.R
    });

    const map = this.make.tilemap({ key: 'map' });
    const tileset = map.addTilesetImage('DesertTilemapBlankBackground', 'tiles');
    map.createLayer('ground', tileset, 0, 0);
    const obstaclesLayer = map.createLayer('obstacles', tileset, 0, 0);
    obstaclesLayer.setCollisionByExclusion([-1]);


    this.bullets = this.physics.add.group({
        classType: Bullet,
        runChildUpdate: true
    });
    this.physics.add.collider(this.bullets, obstaclesLayer, (bullet) => {
        bullet.onHit();
        console.log('hit')
    });
    this.createBullet = (x, y, angle, speed) => {
        const bullet = new Bullet(this, x, y, angle, speed);
        this.bullets.add(bullet);
    };



    this.player = new Player(this);
    this.physics.world.bounds.width = map.widthInPixels;
    this.physics.world.bounds.height = map.heightInPixels;
    this.physics.add.collider(this.player.container, obstaclesLayer);
    this.cameras.main.setZoom(1);
}

function updateScene(time, delta) {
    if (!this.player) return;
    this.player.update(time, delta);
}

and my game config just in case:

export const getGameConfig = (parent, preloadAssets, createScene, updateScene) => ({
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    pixelArt: true,
    roundPixels: true,
    antialias: true,
    parent: parent,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false,
            velocityIterations: 200,
            positionIterations: 200,
        },
    },
    scene: {
        preload: preloadAssets,
        create: createScene,
        update: updateScene,
    },
});

What I’ve spotted - is that decreasing the speed of bullet (2500 currently) will fix the issue, but I have to decrease it really a lot to make it work. Also, on high speed they sometimes removing, and sometimes dont, but I can clearly see that there are frames when bullets are collapsing with obstacles, but they still dont get removed. Please help me with my issue

2

:wave:

When you use a group or array in a collider, you mustn’t destroy members from the collision callback, I think. You could work around this by doing

bullet.setActive(false).setVisible(false);
bullet.body.setEnable(false);

in the collision callback and then looping through the group members and destroying the inactive ones in scene update().