Checking if mouse is over a sprite (hover)?

[Martiny]

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!

[localGhost]

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

[Martiny]

 

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?

[charlieRobinson]

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.beginPath();
	    tbmd.ctx.rect(0,0,50,50);
	    tbmd.ctx.fillStyle = '#c3f600';
	    tbmd.ctx.fill();

		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) {
			item.alpha=.5;
		}
		function out(item) {
			item.alpha=1;
		}

 

[joao]

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,

preload:function(){
        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

[rich]

If you're using Phaser 2.4.8 there was a bug in it that stopped onOver (and similar) from working. This is fixed in 2.5.0.

[joao]

Thanks for reply, its  working now!!  

[kikemx78]

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) => {
       this.overS(e);
      });

 }

 overS(e) {
      if ( e.key === 'butStar2') {
        alert('yes');
      } else {
        alert('wtf');
      }

    }

 

 

[Bonsaiheldin]

I'm having a similar problem like kikemx78: Instead of being fired just when the cursor is over a sprite, onInputOver gets only fired when the left mouse button is down, too. Otherwise the signal never fires.

Using 2.5.0, JavaScript.

[rich]

This is how you set-up Button callbacks: http://phaser.io/examples/v2/buttons/action-on-click

Look at the code for this example, you'll also see that it works on the site (using 2.5.0), i.e. the button changes frame on mouse over, without any click needed.

[Bonsaiheldin]

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