Problems with Button frames

[georgejfrick]

 

 

Hello,
 
 
 I'm creating a Phaser button:

createButton: function( size, label, style, callback , context ) {            var button =  new Phaser.Button( this.game, 0, 0 , this.theme.textureKey,                callback, context, this.theme.button[size].hover,                this.theme.button[size].up,this.theme.button[size].hover );            button.input.useHandCursor = true;            var buttonStyle = _.clone(style);            buttonStyle.wordWrap = true;            buttonStyle.wordWrapWidth = button.width - (button.width / 10);            buttonStyle.align = "center";            var buttonText = new Phaser.Text(this.game, button.width/2, button.height/2, label , buttonStyle);            buttonText.bringToTop();            buttonText.lineSpacing = -5;            buttonText.anchor.setTo(0.5, 0.5);            button.addChild(buttonText);            button.childText = buttonText;            return button;        }, 

That I then add to a game using add.existing

 

The problem I'm having is that if the user clicks the button and I temporarily hide it (and then use it again), when it is shown again it is still in the mouse-over position and the cursor is still the hand. The only way to update it is to mouse over the button then mouse out again.

 

This is really a problem, as the only work around I've found is to destroy the button after every use?!?!

 

Any help?

 

George

[tips4design]

Are you using the latest version? This was fixed in 2.4.2 I think.

[georgejfrick]

Are you using the latest version? This was fixed in 2.4.2 I think.

 

I am on:

 

* v2.4.2 "Altara" - Built: Wed Jul 29 2015 14:59:16

[georgejfrick]

Bump.

 

I guess I'm recycling the buttons each time. Not happy about having to go back and redo so much work. I've also yet to get help with a single problem which is slowly lowering my moral in regards to Phaser.

[tips4design]

Well, what you could do to fix it is manually trigger the inputOut event or remove the inputOver flag (don't know exactly the code for this) every time you show the button again.

[georgejfrick]

Well, what you could do to fix it is manually trigger the inputOut event or remove the inputOver flag (don't know exactly the code for this) every time you show the button again.

 

Yeah, even with swapping the buttons I'm having trouble.

 

Now I get problems where the mouse is over a button and it is not displaying the mouse over state; so I'm experiencing two problems and looking for yet another work around. I'm close to throwing the button class out.

 

I'll dig in the docs and see if I can try your solution.

[tips4design]

Yeah, even with swapping the buttons I'm having trouble.

 

Now I get problems where the mouse is over a button and it is not displaying the mouse over state; so I'm experiencing two problems and looking for yet another work around. I'm close to throwing the button class out.

 

I'll dig in the docs and see if I can try your solution.

 

What I did in my case was to drop the mouse-over frame (I had on/off buttons and now the only two states is activated/deactivated with no hover effect). This is a bug and should be fixed.

[georgejfrick]

Well, what you could do to fix it is manually trigger the inputOut event or remove the inputOver flag (don't know exactly the code for this) every time you show the button again.

 

Yeah I tried firing the event myself with no luck.

 

I've tried swapping the frames for my toggle buttons (like mute), but the behavior is still unacceptable.

 

1) If you hide/re-use a button, it stays in the mouse over state, and the cursor stays the pointer.

 

I'm getting around this by deleting the button when they click it (destroy).

 

2) If it is a toggle button (implemented multiple ways, both swapping buttons and swapping frame sets); when you swap it, and even if you try to force it (setFrames, then setFrame); it revers to the mouse-out image and normal cursor.

 

So in both cases it is the opposite affect of what it should be and I'm unable to find a work around that doesn't consist of 'stop using button'.

[tips4design]

Can you edit this fiddle to reproduce your problem? http://jsfiddle.net/5qzjjegt/4/

 

PS: The Phaser lib linked should be replaced with the one from the dev build. (I don't have it hosted anywhere)

[georgejfrick]

Can you edit this fiddle to reproduce your problem? http://jsfiddle.net/5qzjjegt/4/

 

PS: The Phaser lib linked should be replaced with the one from the dev build. (I don't have it hosted anywhere)

 

No editing needed, when I click the button the text stays as "pointer over: true"

 

but I made this: https://jsfiddle.net/5qzjjegt/4/

 

Click button 1 - button hides, text remains "pointer over: true",

click second button. Now both say "pointer over: true", but you are over the right button.

 

It works perfectly until you click one of them.

[tips4design]

You forgot to save the fiddle before giving me the link. Did you try using the dev build? https://github.com/photonstorm/phaser/blob/dev/build/phaser.js

[georgejfrick]

You forgot to save the fiddle before giving me the link. Did you try using the dev build? https://github.com/photonstorm/phaser/blob/dev/build/phaser.js

 

https://jsfiddle.net/5qzjjegt/6/

 

I did not try the dev build, I'm not sure i want to put a dev build into my client's production system?

[georgejfrick]

Hey sorry to revive a really old topic; but since I created it and it's not resolved I wanted anyone who searched to find an answer..

1) The most likely problem in these cases is not using the out and up frames as the same. A button will sit on its 'up' frame if it's been clicked, as specified. For many of my activities; I was able to go back and fix this by correctly specifying the same frame for up and out.

2) When this wasn't the case, I recreated the button(s); which isn't that hard.

3) Create a custom button sprite; you can use the existing Button class as a guide but modify how it changes frames.