Collision not working with different classes

[jjwallace]

I have a main class that attempts to make two groups collide.  The items are added to the group in different classes but it seems not collision occures.

Main Class:  

import DragObj from '../objects/drag.obj';
import Block from '../objects/block';

class MainState extends Phaser.State {

    preload() {
        
    }

    create() {
        //  Set-up the physics body
        this.game.physics.startSystem(Phaser.Physics.ARCADE);
        
        this.game.ballGroup = this.game.add.group();
        this.game.blockGroup = this.game.add.group();
        
        //this.game.physics.arcade.gravity.y = 200;
        
        this.game.ballGroup.enableBody = true;
        this.game.blockGroup.enableBody = true;
        
//        this.game.ballGroup.bounce.setTo(1);
//        this.game.blockGroup.bounce.setTo(1);
        
        this.game.physics.arcade.enable(this.game.ballGroup);
        this.game.physics.arcade.enable(this.game.blockGroup);
        
        this.game.physics.arcade.collide(this.game.ballGroup, this.game.blockGroup);
        
        var myBlock = new Block(this.game, this.game.world.centerX, this.game.world.centerY, 'block', 10);
        
        var dragObject = new DragObj(this.game, this.game.world.centerX, this.game.world.height);
        
    }

}

export default MainState;

 

 

 

 

BLOCKS

class Block extends Phaser.Sprite {

    constructor(game, x, y, key, health) {
        super(game, x, y, key, health);
        this.game.stage.addChild(this);

        //this.animations.add('ani');    
        //this.animations.play('ani', 30, true);

        this.anchor.setTo(0, 0);

        game.physics.arcade.enable(this);

        this.body.bounce.set(1);
        this.body.immovable = true;
        //var sfxHit = game.add.audio('ball_hit', 100, false);
        
        this.game.blockGroup.add(this);
        
        function hitWorldBounds (sprite) {

            //sfxHit.play();

            //  Play the flash animation.
            //  
            //  Sometimes you'll notice it doesn't always start, i.e. if the sprite
            //  collides with the world bounds quickly before the previous 'flash'
            //  has completed. This is just because the animation needs to complete
            //  before playing again, the event did actually occur twice.

            //sprite.play('ani');

        }

        //  And then listen for it
        //this.body.onWorldBounds.add(hitWorldBounds, this);

    }

    update() {
        //this.x ++;
    }
}

export default Block;

Balls

 

class Ball extends Phaser.Sprite {

    constructor(game, x, y, key, angle, speed) {
        super(game, x, y, key);
        this.game.stage.addChild(this);
        this.animations.add('ani');    
        //this.animations.play('ani', 30, true);

        this.anchor.setTo(0.5, 0.5);
        
        game.physics.arcade.enable(this);

        this.angle = angle;
        game.physics.arcade.velocityFromAngle(angle, speed, this.body.velocity);

        this.body.bounce.set(1);

        this.body.collideWorldBounds = true;
        this.body.onWorldBounds = new Phaser.Signal();
        
        var sfxHit = game.add.audio('ball_hit', 100, false);
        
        game.ballGroup.add(this);
        //game.ballGroup.add(this);
        
        function hitWorldBounds (sprite) {

            //sfxHit.play();

            sprite.play('ani');

        }

        //  And then listen for it
        this.body.onWorldBounds.add(hitWorldBounds, this);
        
    }
    
    update() {
        //this.x ++;
    }
}

export default Ball;

 

[jjwallace]

Moved the collide to update function, everything is working now!