Using Unity 5 GUI, suppose I want text only menu buttons.
I make buttons with text children and disable the button’s image script, so the button background does not draw, I see text only as desired.
However, the colors (normal, highlighted, pressed, disabled) do not apply to the text color. They seem to apply only to the image, which I disabled.
How can I have the text color change when the button UI is manipulated?
You could use the button to receive the mouse hover. Add this script to each of the buttons:
using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class MenuButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler {
public Text theText;
public void OnPointerEnter(PointerEventData eventData)
{
theText.color = Color.red; //Or however you do your color
}
public void OnPointerExit(PointerEventData eventData)
{
theText.color = Color.white; //Or however you do your color
}
}
(Sorry about the code not formatting correctly in the post)
Right click Canvas, got to UI, add a Text element. On this text element click on add component and under UI select button.
You now have a button script attached to your text element, change the highlight colour in the button script, click Play and bask in the radiant glow of your new highlighting UI text.
For posterity’s sake, here’s a C# script to change the color of Text on a GUI Button, inspired by jcv8000’s script. The main difference is that this script is fully automatic and covers more cases than the others posted so far.
Features:
This script takes the text’s original color into account and multiplies it by the color values that are already specified in the Button script and by the Button’s color multiplier. The change in the Text’s color will always match the change in the Button’s color.
It has cases to handle the Button being disabled, and it even works if you’ve disabled the Button from an external script.
All you need to do is add the script to the Button object. No fuss.
using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
[RequireComponent (typeof(Button))]
public class MenuButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler
{
Text txt;
Color baseColor;
Button btn;
bool interactableDelay;
void Start ()
{
txt = GetComponentInChildren<Text>();
baseColor = txt.color;
btn = gameObject.GetComponent<Button> ();
interactableDelay = btn.interactable;
}
void Update ()
{
if (btn.interactable != interactableDelay) {
if (btn.interactable) {
txt.color = baseColor * btn.colors.normalColor * btn.colors.colorMultiplier;
} else {
txt.color = baseColor * btn.colors.disabledColor * btn.colors.colorMultiplier;
}
}
interactableDelay = btn.interactable;
}
public void OnPointerEnter (PointerEventData eventData)
{
if (btn.interactable) {
txt.color = baseColor * btn.colors.highlightedColor * btn.colors.colorMultiplier;
} else {
txt.color = baseColor * btn.colors.disabledColor * btn.colors.colorMultiplier;
}
}
public void OnPointerDown (PointerEventData eventData)
{
if (btn.interactable) {
txt.color = baseColor * btn.colors.pressedColor * btn.colors.colorMultiplier;
} else {
txt.color = baseColor * btn.colors.disabledColor * btn.colors.colorMultiplier;
}
}
public void OnPointerUp (PointerEventData eventData)
{
if (btn.interactable) {
txt.color = baseColor * btn.colors.highlightedColor * btn.colors.colorMultiplier;
} else {
txt.color = baseColor * btn.colors.disabledColor * btn.colors.colorMultiplier;
}
}
public void OnPointerExit (PointerEventData eventData)
{
if (btn.interactable) {
txt.color = baseColor * btn.colors.normalColor * btn.colors.colorMultiplier;
} else {
txt.color = baseColor * btn.colors.disabledColor * btn.colors.colorMultiplier;
}
}
}
Building on what @domussolisortum created, and:
Code:
using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using TMPro;
[RequireComponent( typeof( Button ) )]
public class FullyReactiveButton : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler
{
private TextMeshProUGUI txt;
private Button btn;
public Color normalColor;
public Color disabledColor;
public Color pressedColor;
public Color highlightedColor;
void Start()
{
txt = GetComponentInChildren<TextMeshProUGUI>();
btn = gameObject.GetComponent<Button>();
}
private ButtonStatus lastButtonStatus = ButtonStatus.Normal;
private bool isHighlightDesired = false;
private bool isPressedDesired = false;
void Update()
{
ButtonStatus desiredButtonStatus = ButtonStatus.Normal;
if ( !btn.interactable )
desiredButtonStatus = ButtonStatus.Disabled;
else
{
if ( isHighlightDesired )
desiredButtonStatus = ButtonStatus.Highlighted;
if ( isPressedDesired )
desiredButtonStatus = ButtonStatus.Pressed;
}
if ( desiredButtonStatus != this.lastButtonStatus )
{
this.lastButtonStatus = desiredButtonStatus;
switch ( this.lastButtonStatus )
{
case ButtonStatus.Normal:
txt.color = normalColor;
break;
case ButtonStatus.Disabled:
txt.color = disabledColor;
break;
case ButtonStatus.Pressed:
txt.color = pressedColor;
break;
case ButtonStatus.Highlighted:
txt.color = highlightedColor;
break;
}
}
}
public void OnPointerEnter( PointerEventData eventData )
{
isHighlightDesired = true;
}
public void OnPointerDown( PointerEventData eventData )
{
isPressedDesired = true;
}
public void OnPointerUp( PointerEventData eventData )
{
isPressedDesired = false;
}
public void OnPointerExit( PointerEventData eventData )
{
isHighlightDesired = false;
}
public enum ButtonStatus
{
Normal,
Disabled,
Highlighted,
Pressed
}
}
You can do by scripting, but that’s just painful. You should rather watch this 1. It tells you how to create transitions when hovering over, or clicking etc an UI element.
It’s possible to assign the text to the “Target Graphic” field on the Button. This will manipulate the color of the text itself instead of an image.
OK my turn 
I need to change text color accrding to button tint color.
I have subclassed Button class and implement Update message routine. Now when button color changes the text color changes to the same color.
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;
public class ButtonController : Button
{
public void Update ()
{
Button button = this.GetComponent<Button>();
Text text = (Text)button.GetComponentInChildren<Text>();
ColorBlock colorBlock = this.colors;
if (this.currentSelectionState == SelectionState.Normal)
{
text.color = colorBlock.normalColor;
}
else if (this.currentSelectionState == SelectionState.Highlighted)
{
text.color = colorBlock.highlightedColor;
}
else if (this.currentSelectionState == SelectionState.Pressed)
{
text.color = colorBlock.pressedColor;
}
else if (this.currentSelectionState == SelectionState.Disabled)
{
text.color = colorBlock.disabledColor;
}
}
}
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class TextButton : Button {
Text text;
protected override void Awake()
{
text = GetComponentInChildren<Text>();
base.Awake();
}
public override void OnPointerEnter(PointerEventData eventData)
{
text.color = colors.highlightedColor;
base.OnPointerEnter(eventData);
}
public override void OnPointerExit(PointerEventData eventData)
{
text.color = colors.normalColor;
base.OnPointerExit(eventData);
}
public override void OnPointerDown(PointerEventData eventData)
{
text.color = colors.pressedColor;
base.OnPointerDown(eventData);
}
public override void OnPointerUp(PointerEventData eventData)
{
text.color = colors.normalColor;
base.OnPointerUp(eventData);
}
}
You can have both Text and Button components attached to one object and set up the transition in the latter, it will affect your text:)
My contribution: a modified version which changes all children TMP text and images
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using TMPro;
[RequireComponent(typeof(Button))]
public class ChildrenButtonChange : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler
{
//All of the buttons that use this class
private static Button current;
private TextMeshProUGUI[] txt;
private Image[] images;
private Button btn;
protected Color normalColor;
protected Color disabledColor;
protected Color pressedColor;
protected Color highlightedColor;
void Start()
{
txt = GetComponentsInChildren<TextMeshProUGUI>();
images = GetComponentsInChildren<Image>();
btn = gameObject.GetComponent<Button>();
normalColor = btn.colors.normalColor;
disabledColor = btn.colors.disabledColor;
pressedColor = btn.colors.pressedColor;
highlightedColor = btn.colors.highlightedColor;
}
private ButtonStatus lastButtonStatus = ButtonStatus.Normal;
private bool isHighlightDesired = false;
private bool isPressedDesired = false;
void LateUpdate()
{
ButtonStatus desiredButtonStatus = ButtonStatus.Normal;
if (ChildrenButtonChange.current == null || ChildrenButtonChange.current != btn)
{
isHighlightDesired = false;
isPressedDesired = false;
}
if (!btn.interactable)
desiredButtonStatus = ButtonStatus.Disabled;
else
{
if (isHighlightDesired)
desiredButtonStatus = ButtonStatus.Highlighted;
if (isPressedDesired)
desiredButtonStatus = ButtonStatus.Pressed;
}
if (desiredButtonStatus != this.lastButtonStatus)
{
this.lastButtonStatus = desiredButtonStatus;
switch (this.lastButtonStatus)
{
case ButtonStatus.Normal:
ApplyColor(normalColor);
break;
case ButtonStatus.Disabled:
ApplyColor(disabledColor);
break;
case ButtonStatus.Pressed:
ApplyColor(pressedColor);
break;
case ButtonStatus.Highlighted:
ApplyColor(highlightedColor);
break;
}
}
}
public void OnPointerEnter(PointerEventData eventData)
{
isHighlightDesired = true;
ChildrenButtonChange.current = btn;
}
public void OnPointerDown(PointerEventData eventData)
{
isPressedDesired = true;
ChildrenButtonChange.current = btn;
}
public void OnPointerUp(PointerEventData eventData)
{
isPressedDesired = false;
ChildrenButtonChange.current = null;
}
public void OnPointerExit(PointerEventData eventData)
{
isHighlightDesired = false;
current = null;
}
public enum ButtonStatus
{
Normal,
Disabled,
Highlighted,
Pressed
}
private void ApplyColor(Color color)
{
foreach (TextMeshProUGUI t in txt) t.color = color;
foreach (Image i in images) i.color = color;
}
}