How do I detect when the pointer is over a sprite while I'm dragging another sprite? - phaser-framework

Question

In my update() function, I use pointerOver() to detect when the pointer is over a sprite. This normally works fine. However, if I happen to be dragging another sprite at the time, the pointerOver() function always returns false.
I thought I'd work around it by getting the location of the pointer and comparing it with the location and bounds of my sprite, but the pointer location is always (-1, -1).
Here's some example code to demonstrate the problem:
var game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
var triangle;
var square;
var isOver;
var pointerX;
var pointerY;
function preload()
{
game.load.image( 'triangle', 'assets/triangle.png' );
game.load.image( 'square', 'assets/square.png' );
}
function create()
{
triangle = game.add.sprite( 100, 100, "triangle" );
triangle.inputEnabled = true;
triangle.input.enableDrag( false, true );
square = game.add.sprite( 100, 200, "square" );
square.inputEnabled = true;
}
function update()
{
isOver = square.input.pointerOver() ? "Yes" : "No";
}
function render()
{
game.debug.text( "Mouse over square: " + isOver, 200, 100 );
game.debug.text( "Pointer: (" + game.input.pointer1.x + ", " + game.input.pointer1.y + ")", 200, 116 );
}
I found this post about using a sprite's input.priorityID: Phaser JS how to stop event Propagation(firing) from textButton.events.onInputDown event to game.input.onDown event?
Using the priorityID fixed it for when the triangle is on top the square and the triangle is not being dragged, but the problem remains when it's being dragged.
How do I detect when the pointer is over a sprite, even when I'm dragging another sprite?
Thanks.

Answer 1

I had a similar issue recently and I hope this will still be of help to you.
I found out that upon initiating a drag, the input on all sprites except for the one you're dragging becomes disabled. That probably happens internally and I couldn't find a way to override it.
What I did is the following: all the objects (in my case instances of Tile) I want to be draggable are held within a Board object, which in turn holds a reference to my Game state. In the Game state I have a flag dragIsActive. In the object class itself I have (TypeScript)
this.tileSprite.events.onDragStart.add(() => {
this.parentBoard.gameState.dragIsActive = true;
});
this.tileSprite.events.onDragStop.add(() => {
this.parentBoard.gameState.dragIsActive = false;
});
The equivalent JavaScript would be
this.tileSprite.events.onDragStart.add(function() {
this.parentBoard.gameState.dragIsActive = true;
});
this.tileSprite.events.onDragStop.add(function() {
this.parentBoard.gameState.dragIsActive = false;
});
called from the object's constructor.
In Game I have the following:
update() {
if (this.dragIsActive) {
var firstTile : Tile = this.game.input.activePointer.targetObject.sprite.parent;
this.board.tiles.forEach((t : Tile) => {
if (firstTile.tileSprite.overlap(t.tileSprite)) {
this.board.tilesToSlide.push(t);
}
});
this.board.tilesToSlide.forEach((tileToSlide) => {
// Do the processing on that array here.
});
}
}
JavaScript (just the forEach loop):
this.board.tiles.forEach(fucntion(t) {
if (firstTile.tileSprite.overlap(t.tileSprite)) {
this.board.tilesToSlide.push(t);
}
});
In my case the check is for two sprites overlapping, but in your case you can check if one just point of interest (e.g. the position of the sprite you're dragging) is inside the bounds of another sprite:
if (secondSprite.getBounds().containsPoint(firstSprite.position)) {
// This should be equivalent to pointerOver() while dragging something.
}
P.S. I hope you're aware that a sprite's position is at the top left of its bounding box unless explicitly set to something else. Set via sprite.anchor.set(x, y) - (0, 0) being top left (the default) and (1, 1) - bottom right.

Answer 2

you can also use this method to see if the point is contained within the sprite bounds.
if( Phaser.Rectangle.contains( sprite.body, this.game.input.x, this.game.input.y) ){
console.log('collide')
}