GUI.Toolbar - Custom on/off button states

I have a toolbar with an array of custom images for each button, so far so good. Where I hit the wall is when I tried to make each button have its own “Active” state…

What’s I’m doing now is using to arrays of images, the first array being my “Normal” state, the second array being the “Active” states.

It’s kind of a hack, since I have to switch array members depending on which button was pressed, and go back the the original image everytime another button is pressed.

Is there a better way to have custom “Active” state for each toolbal button, or should I use individual buttons instead of a toolbar?

Thx in advance!

Look into the use of GUISkin and custom GUIStyles.

First, create a GUISkin. This can be done by right-clicking in the project pane.

A GUISkin is basically an array of GUIStyles. There are styles for all the basic GUI controls, plus a place where you can create your own custom styles.

Custom Styles can be added to the array named customStyles, which can be found at the bottom of your GUI Skin in the Inspector (left-click your GUISkin and look in the Inspector). You can add as many custom styles as you like. Each style has 8 different states: normal, hover, active, and focused for both the on and off state. Each state can have its own background image.

I would recommend adding a style for each button and naming the style in a way that it can accessed in your script. One way to do this would be to have an array of button objects that you iterate over to draw your buttons. It sounds like you’re going to want toggles since you want two different states, so each button object might have a boolean to track its state and a name that can be used to look up its style. You might also want to store its position just for fun:

 class ActionButton
 {
   var styleName   :  String;   // name of custom style in GUI Skin
   var isSelected  :  boolean;  // is the toggle button on or off
   var label       :  String;
   var position    :  Rect;     // where to draw this button on the screen 
 }


 /* an array of buttons that you can populate in the inspector */

 var buttonList  :  ActionButton [];


 function OnGUI ()
 {

   for ( var i = 0; i < buttonList.length; i ++ ) {

     var butt = buttonList*;*

butt.isSelected =
GUI.Toggle(butt.position, butt.isSelected, butt.label, butt.styleName);

if ( butt.isSelected ) {
print("This butt is turned on: " + butt.label);
resetOtherButtons(i);
}

}
}
function resetOtherButtons ( ignoreThisNumber )
{
for ( var i = 0; i < buttonList.length; i ++ ) {
if ( i != ignoreThisNumber ) {
buttonList*.isSelected = false;*
}
}
}

I think I had the exact same issue. Let me show you my code and and you can decide whether or not it helps you.

    void OnGUI()
{
    if (GUI.Toggle(new Rect(70, 165, 217, 133), boolC, "", "cat1"))
    {
        boolP = false;
        boolM = false;
        boolZ = false;
        category = 0;
    }

    if (GUI.Toggle(new Rect(70, 305, 217, 133), boolP, "", "cat2"))
    {
        boolC = false;
        boolM = false;
        boolZ = false;
        category = 1;
    }

    if (GUI.Toggle(new Rect(70, 445, 217, 133), boolM, "", "cat3"))
    {
        boolC = false;
        boolP = false;
        boolZ = false;
        category = 2;
    }

    if (GUI.Toggle(new Rect(70, 585, 217, 133), boolZ, "", "cat4"))
    {
        boolC = false;
        boolP = false;
        boolM = false;
        category = 3;
    }
}

The “cat#” are individual custom style sin my GUISkin. You can’t actually give each button in a toolbar a unique active/pressed/hover texture unfortunately it’s all for one and one for all. What I did was created four custom toggles that act like buttons and behave like a toolbar by setting the others to false when one is pressed and using the category int and a switch(category) for any logic I might need to do based on which button was pressed. If you think this might help and have any questions just comment on this post and I’ll reply as soon as possible

Hope that helps.
Hans