Can't figure this one out.. overlaps

[fiverivers]

Hi This is my code

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gamediv', { preload: preload, create: create, update: update });var sprite1;var sprite2;//yArray contains the 4 possible positions for a sprite//all must be used once and no more.var yArray = [50, 200, 350, 500];var y2Array = [50, 200, 350, 500];//var rand = reroll();ys1Array = Phaser.Math.shuffleArray(yArray);ys2Array = Phaser.Math.shuffleArray(y2Array);var leftSideSprites = [];var rightSideSprites = [];var leftSpriteArray = [];var rightSpriteArray = [];function preload() {        game.load.image('teaspoon', 'teaspoon.png');    game.load.image('teacup', 'teacup.png');    game.load.image('shoes', 'shoes.png');    game.load.image('socks', 'sock.png');    game.load.image('television', 'television.png');    game.load.image('remote', 'remote.png');    game.load.image('hat', 'hat.png');    game.load.image('head', 'head.png');};function create() {        leftSideSprites.push('teacup', 'shoes', 'television', 'head');    rightSideSprites.push('teaspoon', 'socks', 'remote', 'hat');        game.stage.backgroundColor = '#ffffff';    // Creating 8 sprites, randomly placing them and then assigning IDs to them.        for (i = 0; i <= 3; i ++) {                var spriteName = "sprite" + i;        spriteName = game.add.sprite(50, ys1Array[i], leftSideSprites[i]);        spriteName.id = i;        game.physics.enable(spriteName, Phaser.Physics.ARCADE);// Enabling input of each sprite        spriteName.inputEnabled = true;        spriteName.input.enableDrag();                spriteName.events.onDragStart.add(startDrag, this);        spriteName.events.onDragStop.add(stopDrag, this);                leftSpriteArray.push(spriteName);        }        for (var i = 0; i <=3; i++) {                var spriteName = "sprite" + i;        spriteName = game.add.sprite(670, ys2Array[i], rightSideSprites[i]);        spriteName.id = i;        game.physics.enable(spriteName, Phaser.Physics.ARCADE);        rightSpriteArray.push(spriteName);    }        console.log(leftSpriteArray[2]);    console.log(rightSpriteArray[2].id);};function update() {};function overlapHandler (clickedSprite) {        console.log("SUCCESS");}function startDrag(clickedSprite) {        console.log('the id of the sprite I clicked = ' + clickedSprite.id);    sprite1 = leftSpriteArray[clickedSprite.id];    sprite2 = rightSpriteArray[clickedSprite.id];}function stopDrag(clickedSprite) {    game.physics.arcade.overlap(sprite1, sprite2, overlapHandler(clickedSprite) , null, this);    }

Basically the overlap handler is called any time I drag the sprite even though it doesn't collide with anything. Is there anyway for it to be called only when two specific sprites overlap.

[Pedro Alpera]

I have seen this post about it:

 

http://www.html5gamedevs.com/topic/8546-phaser-using-overlap-with-two-sprites/?hl=overlap

 

Also you could use something like this:

 

http://docs.phaser.io/Phaser.Physics.Arcade.html#distanceBetween

 

distanceToPointer(displayObject, pointer) → {number}

Find the distance between two display objects (like Sprites).

[fiverivers]

Thanks for the info however, I would really like to figure out why this doesn't work as i've invested so much time into it

 

e: I'll check out that post it looks like the solution! Thanks friend.

[lewster32]

If you pass a function to overlap, it will return the two overlapping sprites as the parameters. If you apply some id, property etc onto those sprites, you can compare them in the overlap handler and only then determine if the comparison is valid:

function overlapHandler (s1, s2) {    if (s1.id === s2.id) {      console.log("SUCCESS");    }}function stopDrag(clickedSprite) {    game.physics.arcade.overlap(sprite1, sprite2, overlapHandler , null, this);    }

The problem is, the way you're doing it now, you're calling the function rather than passing it, so regardless of whether the overlap returns true or false, when you use overlapHandler(clickedSprite) you're running that function there and then, and passing the result back to the overlap function - in this case 'undefined' as that function doesn't return anything. Unless you mean to return something from the function (which in this situation and most cases isn't what you want to do) you should be passing just the reference to the function, i.e. leaving off the () and anything between them.

[fiverivers]

If you pass a function to overlap, it will return the two overlapping sprites as the parameters. If you apply some id, property etc onto those sprites, you can compare them in the overlap handler and only then determine if the comparison is valid:

function overlapHandler (s1, s2) {    if (s1.id === s2.id) {      console.log("SUCCESS");    }}function stopDrag(clickedSprite) {    game.physics.arcade.overlap(sprite1, sprite2, overlapHandler , null, this);    }

The problem is, the way you're doing it now, you're calling the function rather than passing it, so regardless of whether the overlap returns true or false, when you use overlapHandler(clickedSprite) you're running that function there and then, and passing the result back to the overlap function - in this case 'undefined' as that function doesn't return anything. Unless you mean to return something from the function (which in this situation and most cases isn't what you want to do) you should be passing just the reference to the function, i.e. leaving off the () and anything between them.

 

Thanks that makes sense however, s1 and s2 in the code you have demonstrated come out as undefined. Any ideas?

 

EDIT: I GOT IT!! Thanks man!