[Solved] ver. 5.1.2 UI Button doesn't stay pressed... Is it a bug?

[waleedhemade]

Hi,

I have a project for Android where I need to create a game music mute button. The expected to happen is:

The button on game start (music_on.png): → Highlighted (music_on.png) → Pressed (music_off.png): and it should stay pressed until re-pressed

1- What was happening:

When button pressed it goes to the music_off.png at the moment of the pressing or as long as you keep it pressed and when mouse button released or finger up it goes back to music_on.

2 - I’ve tried this script:

public void OnMusicButtonPressed() {
AudioSourceMusicPlayer = GameObject.Find(“MusicSource”).GetComponent();
GameObject b = GameObject.Find(“MusicButton”);
if(MusicPlayer.mute) {
MusicPlayer.mute = false;
b.GetComponent().sprite = b.GetComponent().spriteState.highlightedSprite;
} else {
MusicPlayer.mute = true;
b.GetComponent().sprite = b.GetComponent().spriteState.pressedSprite;
}
}

highlightedSprite and pressedSprites are loaded in the Inspector with the above used images.

This led to the images changes in the inspector when button is pushed and gives the required button action and image but in the game view or on a physical mobile device I’m still getting the sequence I identified earlier in (1) above.

Is this normal?

Thanks

[Kiwasi]

This is normal behaviour for a button. What you are asking for is a toggle button.

I’d simply have two buttons on top of each other and have them switch each other off.

[waleedhemade]

Hi BoredMormon and thanks for looking into the issue. Actually I thought of the answer you mentioned by in another way by having an UI Image on top of the button and allow the clicks to reach the button and then change the Image.

Still, the script I’ve made above changes the Source Image of the Image component of the button, and I can see it change in the inspector as I run it, but the button image doesn’t change.

My understanding is:

1- The Source Image sprite is the sprite rendered in the normal state for the button
2- If I change the Source Image and move the mouse away of the button (i.e. button should return to normal state) then the renderer should go back to rendering the button’s Source Image not highlighted or pressed…etc
3- My expectation that doesn’t happen is the button to start showing the music_off.png as it is now the Source Image (which never happens)

Is my logic correct or am I missing something here?

Thanks

[Kiwasi]

The issue is the button is also changing the Image as well. Basically overwriting your changes,

Your script might work as is if you delete the reference to the image on the button component. Or it might just null reference on you , I’m not sure how it’s built internally.

[waleedhemade]

BoredMormon, sorry for debating you further on the issue but here are 2 images that I’ve taken, the first is the Normal Button, the second is after the Button Pressed and mouse moved away from the button, as you can see the image has changed as “Permanently”, please note how the Source Image in the Image component changed the text and the image even in the bottom window, still, the button is still showing the old image (when it was normal)… How is that? Is there a way to force the renderer to refresh for example?

[Kiwasi]

Let me step through what happens.

• You click the button
• Your code runs and changes the image
• The button code runs and changes the image

The same image is being messed with twice, hence the odd results.

You best solution would be to turn off the transition and add your own code that intercepts the on click event and manages the image swap.

Or do two buttons.

[waleedhemade]

Well done BoredMormon, I chose “None” in the Transition located in the Button component and the script worked like charm!.. Thanks

[SimonDarksideJ]

I’d agree with @Kiwasi on this one, The toggle control is a better fit for what you are trying to achieve @waleedhemade . Remember, the controls that unity provide are only examle templates.

I did an example implementation of a toggle like button for Issue #2 of the Unity 3D Magazine, which you can check out here :

http://unt3dmag.com/store/

[waleedhemade]

A brilliant idea @SimonDarksideJ that you covered in the GUI Evolved article and would really move to that in a future project as actually your article explores great techniques for doing UIs. Still, I’ve solved it the way I described above and to tell you the truth Simon for the sake of this project it made no change and no coding ;). Still, thanks pal and your article changed my concept of thinking in the whole UI. Respect.

[SimonDarksideJ]

No worries, I’m also a firm believer in the “If it ain’t broke, don’t fix it” Philosophy @waleedhemade

Good luck on your game dev adventure! (and check out the rest of the mag’s issues, they are all free now - if you haven’t already )

[waleedhemade]

I couldn’t wait for that invitation, the mag absorbed me ;)… Thanks @SimonDarksideJ

[SimonDarksideJ]

Oh and pay attention to the “Write for us” section on the site #NudgeNudge
Got something to offer or want something promoted, then drop a line to the editor!

[fight_1977]

Awesome magazine! But if there is a .pdf file type, it is more suit for audiences,anyway,thanks for @SimonDarksideJ