Martiny Posted March 27, 2014 Share Posted March 27, 2014 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.5Mouse 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 More sharing options...
localGhost Posted March 27, 2014 Share Posted March 27, 2014 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 Juls and Martiny 2 Link to comment Share on other sites More sharing options...
Martiny Posted March 27, 2014 Author Share Posted March 27, 2014 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 More sharing options...
charlieRobinson Posted June 6, 2016 Share Posted June 6, 2016 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; } Link to comment Share on other sites More sharing options...
joao Posted June 18, 2016 Share Posted June 18, 2016 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 Link to comment Share on other sites More sharing options...
rich Posted June 18, 2016 Share Posted June 18, 2016 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 1 Link to comment Share on other sites More sharing options...
joao Posted June 18, 2016 Share Posted June 18, 2016 Thanks for reply, its working now!! Link to comment Share on other sites More sharing options...
kikemx78 Posted June 19, 2016 Share Posted June 19, 2016 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'); } } Link to comment Share on other sites More sharing options...
Bonsaiheldin Posted June 27, 2016 Share Posted June 27, 2016 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. Link to comment Share on other sites More sharing options...
rich Posted June 27, 2016 Share Posted June 27, 2016 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 1 Link to comment Share on other sites More sharing options...
Bonsaiheldin Posted June 27, 2016 Share Posted June 27, 2016 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 Link to comment Share on other sites More sharing options...
Recommended Posts