Jump to content

Checking if mouse is over a sprite (hover)?


Recommended Posts

This is probably very easy to do, but I can't find a way of doing it. I wanted to change the alpha of a sprite when my cursor in over it, just like Jquery's hover() function.


I tried doing something like this:


image.events.onInputOver.add(listener, this);


function listener (image) {

image.alpha = 0.5;



And it changed the alpha, but it didn't go back to normal when my cursor went outside the sprite. The effect I wanted was: 


Mouse over? Change alpha to 0.5

Mouse off? Alpha back to normal



How can I do this effect?


I really appreciate any help you can provide!

Link to comment
Share on other sites


There is a file hitArea.js in examples (2.0.1), where you can find:

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

Should probably do?

Can't say which example it is though :)



Well, it was way simpler than I thought!


I always have a hard time searching stuff in documentation/examples so I didn't even know there was an onInputOut. Thanks!


I had to create two different functions, one that changes the alpha to 0.5 and another that changes it back to normal. I wonder if there is a way of passing another parameter into a function beyond "this". Then I could create a function called "alphaChanger" and pass the value of alpha that I wanted as an argument. Does anyone know if it's possible?

Link to comment
Share on other sites

  • 2 years later...

Hey, guys. I am using similar code to make a selectable menu. you hover over the text and click.

I am using sprites as the mouse detectors and adding the text as a child to the sprite box. My issue is the hover over is not accurate at all. When the mouse is somewhere else on the screen the over function will run and change opacity. What am I doing wrong? Why is there an offset? Hope this makes sense. Thank you


var tbmd = game.add.bitmapData(0,0);

	    tbmd.ctx.fillStyle = '#c3f600';

		var testBox = game.add.sprite(200,200, tbmd);
		testBox.inputEnabled = true;
		testBox.events.onInputOver.add(over, this);
	    testBox.events.onInputOut.add(out, this);
	    function over(item) {
		function out(item) {


Link to comment
Share on other sites

  • 2 weeks later...

Hi, i hope someone can help me i have this code, for change button states but my over is not working, and i dont know why,

        this.game.load.spritesheet('menuJogar', 'assets/menuJogar.png', 311, 262);

create : function(){

var jogar = this.game.add.button(0,0, "menuJogar",this.iniciaJogo,this,0,1,0);
        jogar.input.useHandCursor = true;      


if somebody could help , would be nice ty :)

Link to comment
Share on other sites

I still have no idea of why this isn't working as expected. I'm using Phaser 2.5 and TypeScript. What I'm expecting: Function being triggered by an onInputOver event (pointer passing over a sprite/button, just like hover on jQuery). What I'm getting: function being triggered by click. Any idea of what am I doing wrong? Is this a bug?


 create() {
      this.butStar2 = this.game.add.button(this.game.width * 0.2555, this.game.height * 0.32, 'butStar2');
      this.butStar2.onInputOver.add((e) => {


 overS(e) {
      if ( e.key === 'butStar2') {
      } else {




Link to comment
Share on other sites

  • 2 weeks later...

Thanks for the link, rich. For some reason i don't understand it suddenly works now. I haven't changed a single character of my whole game code - it just works since your comment here. It has not worked even once, ever.

Sometimes it feels like code just has to get "ripe", by lying around a bit. Computers... Hey kikemx89, you should try again - maybe it works at you too now :ph34r:

Link to comment
Share on other sites


  • Recently Browsing   0 members

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