koobas.hobune.stream
Drawing 4 GUIButton's with a forloop. Need help changing color?
I have a forloop to display 4 buttons. There is a value called CorrectAnswer. The button clicked compares its index to the CorrectAnswer int. How can I change that one button's text color but the other 3 remain white?
//Display the answers.
for (int i = 0; i <= 3; i++)
{
if (GUI.Button(new Rect((Screen.width / 2) - (buttonWidth / 2), (Screen.height / 2 - 25) - (25 / 2) + i * 40,
buttonWidth, buttonHeight), mathList[mathIndex].Answers[i]))
{
//If correct answer...
if (i == mathList[mathIndex].CorrectAnswer)
{
Debug.Log("Correct");
GUI.skin.button.normal.textColor = Color.green;
GUI.skin.button.onHover.textColor = Color.green;
StartCoroutine(CorrectPause());
//here
}
else //if incorrect....
{
GUI.skin.button.normal.textColor = Color.red;
GUI.skin.button.onHover.textColor = Color.red;
Debug.Log("Incorrect");
StartCoroutine(IncorrectPause());
//here
}
}
}
You have to store the result during the MouseUp event, and then set the button's color during the Repaint event.
Think of it this way. When you click on a button, Unity is actually calling OnGUI once for each event. And there might be a few frames in between mouse down and mouse up, so the events might look like this...
MouseDown
Repaint
Repaint
MouseUp
Repaint
GUI.Button() evaluates to true during the MouseUp event, but not during the Repaint event. So you need to store the result during the button's if statement, and then use that result to display the correct style next time OnGUI is called for Repaint.
Here is the code:
private int userAnswer = -1;
void OnGUI()
{
// Define your styles
var correctStyle = new GUIStyle(GUI.skin.button);
correctStyle.normal.textColor = Color.green;
correctStyle.hover.textColor = Color.green;
var incorrectStyle = new GUIStyle(GUI.skin.button);
incorrectStyle.normal.textColor = Color.red;
incorrectStyle.hover.textColor = Color.red;
// Loop over answers
for (int i = 0; i <= 3; i++)
{
// Determine the style based on userAnswer
// Start with the default style...
GUIStyle style = GUI.skin.button;
// Correct answer...
if (i == userAnswer && i == mathList[mathIndex].CorrectAnswer)
{
style = correctStyle;
}
// Incorrect answer...
else if (i == userAnswer)
{
style = incorrectStyle;
}
// Present the button
Rect rect = new Rect((Screen.width / 2) - (buttonWidth / 2),
(Screen.height / 2 - 25) - (25 / 2) + i * 40,
buttonWidth, buttonHeight);
if (GUI.Button(rect, mathList[mathIndex].Answers[i], style))
{
// Store the answer
userAnswer = i;
// Do the coroutine
if (userAnswer == mathList[mathIndex].CorrectAnswer)
{
StartCoroutine(CorrectPause());
}
else
{
StartCoroutine(IncorrectPause());
}
}
}
}
FYI: It's generally not a good idea to modify GUI.skin.button directly. Instead you should make a copy of it and feed your custom style into GUI.Button(). Otherwise you can get unpredictable results.
