How to hide GUI buttons?

[Hakimo]

Hi,

I'm using GUI.toggle to show a menu. Is there a way to hide the small toggle radio button when the menu is showing?

Thanks

-Hakimo

[andeeeee]

You can use the toggle's state variable to hide it when it is not needed:-

var showingMenu: boolean;
 
function OnGUI() {
   if (!showingMenu) {
      showingMenu = GUI.Toggle(toggleRect, showingMenu, "Show Menu");
   } else {
      // Menu code.
   }
}

The menu code should include something that can set showingMenu to false again when the menu session is over. Since the toggle is not visible when it is set, you might consider using a simple button control to show the menu.

[Hakimo]

Thanks very much. I always seem to forget that I can use the if(!condition).

At the moment, I'm still trying out to see what's the best way to create a pause menu. So far I've looked at designing it thought GUI.skin and now I'm looking at GUI.Texture

Cheers.

-Hakimo

[Ezzerland]

Thanks very much. I always seem to forget that I can use the if(!condition).

At the moment, I'm still trying out to see what's the best way to create a pause menu. So far I've looked at designing it thought GUI.skin and now I'm looking at GUI.Texture

Cheers.

-Hakimo

I'd recommend GUI.Skin, or at the least, GUI.Style

If you need any further help regarding this, don't hesitate to ask. But the documentation for unity regarding this is pretty good.

[Hakimo]

Hi,
I thought so too. I think the reason I'm using GUI.texture is because I can use my own textures as buttons since my menus are very simple. With GUI.skins, I think it's better for stuff like forms and complex stuff. Also, skinning the GUI.skins to match what I want seems a bit complicated.

Thanks again.
-Hakimo

[Ezzerland]

If you are skinning more than one type of GUI object, for example, a GUI.Box and a GUI.Button, or more, then you are better off using GUI.Skin

I would be more than happy to provide examples of how to do this.


On the otherhand, if you are only customizing one item in the scene, for example a GUI.Button (or multiple buttons that will all look the same), then I would recommend GUI.Style

Again, I would be willing to give you code snippets on how to do this, but I strongly recommend one or the other of these two. They are very easy to implement, and very flexible

To each their own, but I'm here if ya need

[Hakimo]

Wow thanks for the reply. After what you said, it seems GUI.Skin is what I need. If I'm not using GUI.textures, I do want to customise the box and the buttons.

Just a head's up, I'm learning Unity through a book called Unity Game Development Essentials. Given the example screenshot it showed, it suggest to use GUI.textures.

What I'm going for is something like this:



Except that each button will have a different texture and colour. If I were to use GUI.Skin, I plan to use GUI.toggle. Is that possible to skin as well?

Thanks again.
-Hakimo

[Ezzerland]

For the above example, I would use a GUI.Skin

You can add custom fields inside of this GUI.Skin for each different button, and name it as you please. This would be done inside of the unity inspector, and therefore reduce the amount of changes etc made in your scripts, as unity would take care of the bulk of coding for you.

[Hakimo]

Hi Ezzerland,
I'm using GUI.Skin at the moment. I'm not sure if it's the right way.

Here's the code I wrote:

// Skin
var mainmenuSkin : GUISkin;
 
// GUI Area Width
var areaWidth : float;
 
// GUI Area Height
var areaHeight : float;
 
function OnGUI() 
{
    GUI.skin = mainmenuSkin;
    
    var ScreenX = ((Screen.width * 0.5) - (areaWidth * 0.5));
    var ScreenY = ((Screen.height) - (areaHeight * 0.5));   
    GUI.Box (Rect (20,50,280,380), "", "menuBG");
    GUILayout.BeginArea(Rect(ScreenX, ScreenY, areaWidth, areaHeight));
    
        if(GUILayout.Button("","buttonPlay"))
        {
            print("Play");
        }
        
        if(GUILayout.Button("","buttonBg"))
        {
            print("Background");
        }
        
        if(GUILayout.Button("", "buttonHow"))
        {
            print("How to");
        }
        
        if(GUILayout.Button("", "buttonMusic"))
        {
            print("Music");
        }
        
        if(GUILayout.Button("", "buttonCredits"))
        {
            print("Credits");
        }
        
    GUILayout.EndArea();
}

It does display a menu that I wanted but in code, I felt that putting the "GUI.Box" outside of the GUILayoutBeginArea seems wrong. In the inspector, I set the Area Width and Area Height as 150 and 720 respectively. The reason is so that my buttons stay at the middle.

Also, now that I have the menu, how do I assign the functions of the buttons? E.g For the How To, I want to display an image text. Basically hide the other buttons > show the image and include a back button. Do I have to open a level to a new scene or? Not sure how to approach this.

Oh yea, I have some active button I'm using. How do I set it so when a button is pressed, it'll stay in that state? e.g. Music is on or off?

Thanks

-Hakimo

[Ezzerland]

The GUI.Box outside of the layout menu is fine, the problem with that is that you specified two different co-ordinance for where your box shows and where your menu shows.

Try:

GUI.Box (Rect (ScreenX-0, ScreenY-0, 280, 380), "", "menuBG");

You will have to subtract from ScreenX and ScreenY to get the box to center around the menu, if that was your goal with the box, or you could manually do the layout how you want. I put the -0 part in so that you were aware you could do it that way as well. Wasn't sure if you knew


Your >> print("Background"); <<
is exactly how you assign functions to the buttons. print is a function that you're using in a manner that if (button is pushed) print (button name).

If you want to write your own function, then outside the OnGUI (Further down in your script), you would write your own. It would look something like this:

var musicIsPlaying = true; //music is on by default
 
 
function OnGUI() {
 
 if(GUILayout.Button("", "musicSwitch")){
         MyMusicOnOffFunction();
         print("Music On/Off Button");
 }
 
}
 
function MyMusicOnOffFunction() {
 
  //function code here
  if (musicIsPlaying) {
    //music is currently playing and we want it off
    musicIsPlaying = false;
  } else if (!musicIsPlaying) {
    //music is currently off and we want it back on
    musicIsPlaying = true;
  }
 
}

Then all you need to do is add the if statement around the bit of code that plays your music, so that it only executes if your musicIsPlaying Boolean variable is set to true.

This same above code should answer your img on/off question as well. You set a Boolean variable to false by default, so that img or w/e does not show until that var is set to true.

You can do this without the work of the extra function as well, like so:

if(GUILayout.Button("", "musicSwitch")){
         if (musicIsPlaying) {
             //music is currently playing and we want it off
             musicIsPlaying = false;
         } else if (!musicIsPlaying) {
             //music is currently off and we want it back on
             musicIsPlaying = true;
         }
         print("Music On/Off Button");
}

But, one last thing to add.
If the only function of some of your buttons is to set one var to true/false, I recommend using a toggle switch instead. This can easily be made to look like a button, or again you could use your GUI.Skin to make it look as whatever you wish.

Hope this helps

Thanks,
Rob

[Hakimo]

Hi Ezzerland,

Thanks again for the help. Lol I never tried adding the (ScreenX - 0). I had to manually put in a different value so the menus will position itself the position I want. If I use Screen X and Y as its parameters, the areaWidth and areaHeight will have conflict with the position of the buttons as well. I tried to edit the margin-top for the buttons, but they won't budge :P

As for the buttons, e.g. Music, I have one texture each for on and off state. How do I make it so when the button is switched off, it'll show and remain as switched off? I place the "off texture" in the "active" part in custom style. It shows the texture when click but it doesn't stay there. Tried to put it in "On-active" as well but that didn't work

I have some more questions, but I'll take it one step at a time.

Thanks.

-Hakim

[Ezzerland]

Gonna make a slight alteration to one of my above examples. In your GUI.Skin you named each button with its own skin, from what I can tell. You'll make use of GUIStyleState and then just alter the GUIStyle within the GUI.Skin through code to get you the end result.

var musicIsPlaying = true; //music is on by default
var musicOnSkin : GUIStyleState; //button should say turn off
var musicOffSkin : GUIStyleState; //button should say turn on
 
 
function OnGUI() {
 
 
 if(GUILayout.Button("", "buttonMusic")){
         MyMusicOnOffFunction();
         print("Music On/Off Button");
 }
 
}
 
function MyMusicOnOffFunction() {
 
  //function code here
  if (musicIsPlaying) {
    //music is currently playing and we want it off
    buttonMusic.normal = musicOffSkin;
    musicIsPlaying = false;
  } else if (!musicIsPlaying) {
    //music is currently off and we want it back on
    buttonMusic.normal = musicOnSkin;
    musicIsPlaying = true;
  }
 
}

ofc I left out the GUI.Skin in the example, but you get the idea
If you have a hover effect, you can change it the same way.

[Hakimo]

Hi Ezzerland,

Sorry I had to finish some other parts but now I'm back at fixing the GUI. I'm stuck at the moment using GUIStyleState. I tried using the:

 GUI.skin.buttonMusic.normal = musicOffSkin;

Now, I'm getting errors on that the "buttonmusic" is not a member of the GUISkin. Also, what did you mean by alter the GUI.Style within the GUISkin? Also, I made the buttons using Custom Styles, did you mean I must add another element for the image or?

Thanks again.

-Hakimo

[Hakimo]

Sorry to bump this thread again but does anyone know how to change a GUI button after it being pressed? Basically I have a switch on music button with it's image and once pressed, I like it to change to a switch off button.

Ezzerland recommended me using GUIStyleState but I have no idea how to use it or to make mine work

Hope someone can help with this.

Thanks in advance.
-Hakimo

[KyleStaves]

If you don't want to use Styles you could always use a simple bool.

if (button is active){
make button with your "active" image
} else {
make button in the exact same spot with the same size and your "inactive" image
}

[Hakimo]

Hi KyleStaves,

I did use a boolean that is basically the toggle class in GUI. I set up my code as:

 var musicSwitch : boolean = false;
 
 function OnGUI() {
 ....
 musicSwitch = GUILayout.Toggle(musicSwitch, "", "button");
 
 if(musicSwitch)
 {
  myMusicFunction();
 }
}
 
function myMusicFunction() {
 if (musicPlayer.isPlaying)
      {
        musicPlayer.Stop();
      } 
      
     else if(!musicPlayer.isPlaying)
      musicPlayer.Play(); 
}

So right now, it does work visually, but it's not functioning properly. It's a bit hard to describe but one I switch off > close menu > open menu > switch on, it doesn't play the music. I have to close the menu again, click the switch button and exit menu for it to play :P

Not really sure how to swap buttons properly and making sure the function works.

* I just noticed that the swap button image is fine but I think there's something wrong with my function logic.

Thanks again.
-Hakimo

[Hakimo]

Whoops, I managed to fix it now Thanks again for the replies

[darthevil]

Hi I know that it was a while back and the subject has changed a bit now but back on the second post I want to do the same thing but I'm new to scripting and I didn't really understand the code. Could someone please explain it in an easier way thanks.

[Hakimo]

Hi DarthEvil,

Welcome to the Forum. Before doing this, I suggest you read up about GUISkin and a bit of scripting. That's what I used to create this. Here's the code you referring to:

function OnGUI() {
   if (!showingMenu) {
      showingMenu = GUI.Toggle(toggleRect, showingMenu, "Show Menu");
   } else {
      // Menu code.
   }

Not sure which part you're not familiar with but I'll try:

The "showingmenu" is actually just a button image I made in GUISkin. What the code does is "if the button is not showing, then show the button. When you click on it, it will show the menu(Menu Code) and will hide the button" This is a special feature of GUI.Toggle. The menu code basically contains GUILayout.Buttons. I do recommend reading the links I mentioned before for better understanding.

Hope it helps.
-Hakimo

[darthevil]

Thanks for clearing that up and for the links, I'm gonna look at them now.