Sign in to follow this  
georgejfrick

Problems with Button frames

Recommended Posts

 

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.