Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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


pranadevil
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 :lol:

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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