koobas.hobune.stream
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[i];
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[i].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
Hah jahroy guess i should have refreshed before posting :P, both have the same idea.
You could make my code accomplish the same thing by adding a function named resetOtherButtons() and calling it whenever a toggle button is turned on. The code in the new function would simply iterate over the array of buttons and set isSelected to false for each button other than the selected one. I just edited my answer to include the reset function...
Thanks a lot to both of you for the help, both solutions would work perfectly fine! What I ended up doing (for now), is creating a customStyle with one "On Normal" texture applied, which changes the background behind the button. The only drawback doing it this way is that I can't change the image of the button itself (for example adding a glow to the icon), but at least the background changes and accomplishes what I wanted. Later when I decide whether or not to change the appearance of the icon itself, I will use your suggestions to make it happen.
Thanks again!
Why not make your icon part of your background image? We typically use 6 different images for each button: normal, hover, active, on-normal, on-hover, on-active. Each button gets its own style and looks quite nice. In the code you pass an empty string to the GUI.Toggle() function so that the background images applied to the style do all the work.
Yes I thought about doing it this way but I really wanted to use a gui.toolbar! I thought there had to be an easy way to accomplish this using a toolbar, but apparently not. $$anonymous$$aybe I will go back to using separate buttons, or toggles, ins$$anonymous$$d of using a toolbar?!?
