Check if any sprite in a group intersects with any other sprite in another group

[ISOmetric]

I've got a wee game where I've created a group of circles and a group of rectangles (they're called slots in the code) which are placed randomly on the canvas. The circles move around the world pseudo-randomly and when they intersect with a slot, the text at the top of the screen should change. However, I'm struggling to 'traverse' the groups properly: my function only checks one specific circle against one specific slot. I'm still pretty new to Phaser, and this 'game' is cobbled together from various examples so I'm sorry if it doesn't make much sense.

Here's the sandbox: https://phaser.io/sandbox/edit/EilDwRdH

And here's the markup of the specific functions I'm using to check intersection:

function update() {
    circles.forEach(function(c_circle) {
        slots.forEach(function(c_slot) {
            if (checkOverlap(c_circle, c_slot)) {
                text.text = 'Overlapping: true';
            } else {
                text.text = 'Overlapping: false';
            }
        });
    });
}

function checkOverlap(spriteA, spriteB) {

    var boundsA = spriteA.getBounds();
    var boundsB = spriteB.getBounds();

    return Phaser.Rectangle.intersects(spriteA, boundsB);
}

 

[samme]

You can use arcade.overlap with 2 groups:

var overlapping = game.physics.arcade.overlap(circles, slots);

http://phaser.io/sandbox/CctaPrse/play

[ISOmetric]

Thanks samme, didn't realize I could do that with entire groups!

With this format, how would I implement events that should happen upon each intersection? In my particular case, I want to create a system where whenever a circle intersects a slot, the circle moves to the centre of the slot and sits for a few seconds before moving on? I know how I would implement this with single objects but not with groups of objects.

[samme]

A collision callback receives the 2 colliding sprites:

function onOverlap (circle, slot){
    // …
}

game.physics.arcade.overlap(circles, slots, onOverlap);

 

[ISOmetric]

The callback has fixed my problem, thanks very much samme. However, I've now hit another issue, where I want to deactivate the callback for a short period of time.

As I said before, I'm trying to get the circles to move onto the slots, sit for a while and then move off again. I've got the timer working, so they sit for the time I've allocated, but as soon as they start to move off the slot they are still intersecting it.. and the callback function is called again. This happens repeatedly, so once a circle moves to a slot it essentially just sits there permanently. Any advice for that? Thanks.

[samme]

You can use 

sprite.body.checkCollision.none = true;

to temporarily disable collision checking for one body, then reverse it later.

[ISOmetric]

You really are a very big help samme, but it seems that every time I try to move to the next step of this process, there's something interfering!

I think I'm having an issue with setting the velocity after ejecting a circle from a slot. It also seems to be somehow tied into my timer(s). When a circle is ejected, it heads off at a velocity of 200x200 (south-east, I guess) but has some odd behavior when it hits the game bounds. I think it's still trying to move at the same velocity even though it has hit a wall, so it judders in the corner for a few seconds before bouncing. I think this is the core bit of the code where problems are arising:

 

function disable_collision(circle){
    circle.body.checkCollision.none = true;
}

function enable_collision(){
    this.body.checkCollision.none = false;
}

function eject_circle(){
    // Function to remove a circle from a slot
    circle = this[0];
    slot = this[1];
    disable_collision(circle);
    circle.body.velocity.setTo(200,200);
    timer = game.time.create(false);
    // Give the cirle 'enough time' to leave the slot before re-enabling collision
    // ?? Is a timer the best way to do this?
    timer.add(150, enable_collision, circle);
    timer.start();
    circle.tint = 0xFFFFFF;
    slot.tint = 0xFFFFFF;

}

function on_overlap(slot, circle) {
    // Function called when a circle overlaps with a slot
    circle.tint = 0x000FFF;
    slot.tint = 0xBB00BB;
    circle.x = slot.x;
    circle.y = slot.y;
    circle.body.velocity.setTo(0,0);
    timer = game.time.create(false);
    // Hold the circle in the slot for 4 seconds, then eject
    timer.add(4000, eject_circle, [circle, slot]);
    timer.start();
}

The full example, with the behavior described, is here: https://phaser.io/sandbox/edit/IlpZAzQN and the above functions can be found in the 'update' panel.

NB: I've set my game bounds to 1000 by 450 - the blue section to the right is my 'drag tray' for which I haven't implemented much functionality yet.

 

Thanks for the help! I really appreciate it!

[samme]

I don't know exactly why but the circles' checkCollision was flipping back and forth. I removed the `circle` and `slot` global variables and changed the Timers to TimerEvents, which are a little simpler: https://phaser.io/sandbox/edit/egRsObKX