Changing the color of a UI Button with scripting?

Unity Engine
1

I’m trying to change the color of a button depending on an array. Is there any way I can dynamically change the color of a button? It should be under the image class, but it’s not.

If not, can I do a similar procedure, but with sprites? In the future, I plan to change the sprite based on the array, but until then I want to just use colors for debugging. Or I could just add dumb images.

Problem solved, was easy. I just didn’t think it through.

2 Likes
2

You should definitely be able to set Image.color. I’m doing it right now.

1 Like
3

put this in the start method of some C# script:

GetComponent<Image>().color = Color.red;

should recolor the button red when the script starts.

just access the color property of the Image component on the button, and set it to whatever color you want.

13 Likes
4

Thanks a ton. I don’t know why I didn’t try that. I feel like a dork.

1 Like
5

This is easy one.

How to change for example “Normal Color” if Transition is ColorTint?

If you set new color to the Image (like in posts before) then you loose the higlight color, etc.

1 Like
6 
        var colors = GetComponent<Button> ().colors;
        colors.normalColor = Color.red;
        GetComponent<Button> ().colors = colors;
43 Likes
7

Thanks. That was a code which I was looking for :wink:

8

thanks it really helped .
how can i do this for displaying random colours?

9

Do this but use random numbers:

_This = this.GetComponent<Image>();
_This.color = new Color(255, 0, 0);
10

This is how I normally go about doing this…

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class ColorActivity : MonoBehaviour {
    //Reference to button to access its components
    private Button theButton;

    //this get the Transitions of the Button as its pressed
    private ColorBlock theColor;

    // Use this for initialization
    void Awake () {
        theButton = GetComponent<Button>();
        theColor = GetComponent<Button>().colors;

    }


    /// <summary>
    /// Example
    /// just add this to your Button component On Click()
    /// </summary>
    public void ButtonTransitionColors()
    {

        theColor.highlightedColor = Color.blue;
        theColor.normalColor = Color.cyan;
        theColor.pressedColor = Color.green;

        theButton.colors = theColor;
        print("Cliked");
    }
}

then just add it to the button on click
hope it helps

8 Likes
11

this is not working . can anyone help?

12

Sorry false alarm :roll_eyes:

13

I’d suggest to use Color32(…), because it works with bytes (0-255) ,whereas Color(…) expects values between 0-1.

_This.color=new Color32(255,0,0);
4 Likes
14

Does any one here knows how to change image color through time, so that when I change the image color it doesn’t change automatically, instead it changes slowly! Thank you :slight_smile:

15

@wasicool7

Hi there,

just animate button’s Image component color, by changing it over time… it will affect whole button color.

Or alternatively animate Button component colors, these are contained in ColorBlock, which you can get, update and then put back, so you can animate normal color only, for example.

You could use animation clip, curve + time, sin wave - whatever is right for your purpose.

2 Likes
16

As a side note, this is a very easy way to make UI elements invisible

17

Thanks for this

18

Perfect!!!

19
20

How to change the Image colour in canvas on being pressing button???