how to know if the mouse pointer is over a sprite/bitmap

[pranadevil]

hi guys i want to know if there is a way in phaser to know if the mouse pointer is over a sprite/bitmap?

i have a bitmapdata containing a sprite on it, it is rotating and moving in the screen this is the hardest part!!

 

thanks in advance

[jmp909]

http://phaser.io/examples/v2/input/pixel-perfect-click-detection

[pranadevil]

cool but how i can get the (x,y) coordinates inside the sprite??

[DonFrag]

image.events.onInputOver.add(over, this);image.events.onInputOut.add(out, this);

then in the handler function you get the mouse coordinates

[pranadevil]

image.events.onInputOver.add(over, this);image.events.onInputOut.add(out, this);

then in the handler function you get the mouse coordinates

 

examples?

[DonFrag]

    this.inputEnabled = true;   this.events.onInputOver.add(function(){	   console.log(game.input.activePointer.x);	   console.log(game.input.activePointer.y);   }, this);

i made this with my sprite who extends the sprite class, so you should replace this with the sprite or image itself

[megmut]

render: function () {     this.game.debug.text('x: ' + this.game.input.x, 5, 15);      this.game.debug.text('y: ' + this.game.input.y, 5, 30);}

The above method will print text in top most left corner with the input x and y. (this is just useful for building and deving a game / app)

 

To check if you are in the same area, I use the object.over and object.out functions:

this.sprite = this.add.image(x, y, 'cacehAsset');this.sprite.inputEnabled = true;this.sprite.events.onInputOver.add(this.over, this);this.sprite.events.onInputOut.add(this.out, this);over: function(object) {        console.log('Input device is inside object', object);        console.log('current x: ', this.game.input.x, 'current y: ', this.game.input.y');        console.log('relative x: ', this.game.input.x - object.x, 'relative y: ', this.game.input.y - object.y);},out: function(object) {        console.log('Input device is no longer inside object', object);	},

1. The first console log fires when the input device has entered the bounds of the object in question. 

2. The second console log displays the users current x / y cords.

3. The third console log shows you the actual x and y within the object itself. if you're sprite is at say, x: 200, y: 300, and your pointer is 201, 316.. this will show you x: 1, y: 16. (relative position).

4 The fourth console fires when the input has left the object in question.

 

We know that the object in console log 3 is the right object as the method is requiring one parameter, and above, we are passing it that parameter by using (this.over, this); thus passing that specific object to the over method. 

 

Hope this helps.

 

Nick

[pranadevil]

render: function () {     this.game.debug.text('x: ' + this.game.input.x, 5, 15);      this.game.debug.text('y: ' + this.game.input.y, 5, 30);}

The above method will print text in top most left corner with the input x and y. (this is just useful for building and deving a game / app)

 

To check if you are in the same area, I use the object.over and object.out functions:

this.sprite = this.add.image(x, y, 'cacehAsset');this.sprite.inputEnabled = true;this.sprite.events.onInputOver.add(this.over, this);this.sprite.events.onInputOut.add(this.out, this);over: function(object) {        console.log('Input device is inside object', object);        console.log('current x: ', this.game.input.x, 'current y: ', this.game.input.y');        console.log('relative x: ', this.game.input.x - object.x, 'relative y: ', this.game.input.y - object.y);},out: function(object) {        console.log('Input device is no longer inside object', object);	},

1. The first console log fires when the input device has entered the bounds of the object in question. 

2. The second console log displays the users current x / y cords.

3. The third console log shows you the actual x and y within the object itself. if you're sprite is at say, x: 200, y: 300, and your pointer is 201, 316.. this will show you x: 1, y: 16. (relative position).

4 The fourth console fires when the input has left the object in question.

 

We know that the object in console log 3 is the right object as the method is requiring one parameter, and above, we are passing it that parameter by using (this.over, this); thus passing that specific object to the over method. 

 

Hope this helps.

 

Nick

 

 

 

 

thanks for the help and explanation i really appreciate the time you took writing that mini tuto