Jump to content

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


Recommended Posts

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);


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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];
    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);
    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;
    timer = game.time.create(false);
    // Hold the circle in the slot for 4 seconds, then eject
    timer.add(4000, eject_circle, [circle, slot]);

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...