Phaser - How to check for sprite moving between two other sprites?

Question

I'm trying to check if one sprite is passing the line between two other sprites. I tried to check if the sprite is overlapping a Phaser.Line with:

this.lineGreenToRed = new Phaser.Line(this.ballGreen.x, this.ballGreen.y, this.ballRed.x, this.ballRed.y);

this.checkPassed = this.lineGreenToRed.pointOnLine(this.ballBlue.position.x, this.ballBlue.position.y);
if (this.checkPassed) {
    console.log('GreenToRed passed');
    //counter++;
};
console.log(this.checkPassed);

Looking into the console this counts up the false events whenever my sprite is not on/over the line. Moving it over the line sometimes gives me the true event, but not always. It looks like the frames change too fast to detect it. Overlap check on Lines does not seem to be possible neither.

I have also tried with:

this.GreenToRedArray = this.lineGreenToRed.coordinatesOnLine();

and in update():

this.GreenToRedArray.forEach(this.checkPoint, this);

and then:

checkPoint : function(element){
      if (this.ballBlue.position.x == element[0] && this.ballBlue.position.y == element[1]){
        console.log('GreenToRed passed');
        this.score++;
        console.log(this.score);
        this.scoreText.setText(this.score);
    }
},

This works as long as I move quite slow over the line, but as soon as things move a little faster, it does not catch it anymore.

Any hint on how I could check if one sprite is moving over the line between two other sprites?

Think of it as two balls marking kind of a goal and a third ball being shoot through between these two.

Thanks a lot for any help.

James Skemp James Skemp · Accepted Answer · 2017-04-21T13:31:22

I haven't used Phaser.Lines too much, so after some research, and from what I've seen elsewhere, I might recommend going about this slightly differently.

One option would be changing the goal line to a Phaser.Sprite and then checking for overlap.

Alternatively, you could check for a rectangular intersection, as in the Overlap Without Physics example.

function update() {
    if (checkOverlap(this.ballBlue, this.goal)) {
        console.log('overlapping');
    }
}
function checkOverlap(spriteA, spriteB) {
    var boundsA = spriteA.getBounds();
    var boundsB = spriteB.getBounds();

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

That could be tweaked so if you don't want to use a Sprite, you could use a Phaser.Rectangle instead of a Phaser.Line, changing the function accordingly.

I suppose you could also draw another Phaser.Line from the previous position of the ball to the current position, and check an intersection.

Phaser - How to check for sprite moving between two other sprites?

1 Answers