How To Change Sprites Colour Or Transparency – Unity C#

If you’ve ever wanted to write a script that could make your sprite flash a different colour or turn them transparent in Unity, there’s an easy way. I did this in various ways in my game Puzzledorf. One example is the fireworks that explode when you do something right:

Or making the Press Any Key text fade in and out on the Titlescreen, or the fading button highlights on the menus:

Sprite Renderer

You’re sprite is contained in a component called the Sprite Renderer.

Sprite Renderer

Now if you click on “Color”, you can manually change the sprites transparency in the colour changer by turning alpha down to 0, or tint the sprite by modifying how much red, blue and green is in the image.

Color Changer

Confusingly, if it’s set to all white, the sprite is its normal colour, while all black will make the sprite black. You’ll notice also that the colours range from 0 to 255, with 0 being no colour and 255 being full colour.

Now unfortunately if you turn blue and green off, the sprite won’t be all red, just tinted red. If you want to completely change colours, you’ll have to start with a white sprite, otherwise it will just tint.

Coding Colour Changes

To change the colour in a script, you will need to get the Sprite Renderer in your code, and then we can easily change it’s color property. (Color is the American spelling whereas colour is the Australian spelling).

Create a scene with a game object that has a sprite renderer / sprite attached. Then create a new script called ColourChange and add the following code:

    SpriteRenderer sprite;
   
    void Start()
    {
        sprite = GetComponent<SpriteRenderer>();
    }
    
    void Update()
    {
        if(Input.GetKeyDown(KeyCode.C))
        {            
            // Change the 'color' property of the 'Sprite Renderer'
            sprite.color = new Color (1, 0, 0, 1); 
        }
    }

The very first thing we do is create a variable to store the Sprite Renderer, and we call this sprite. Then in Start() we get the component for the Sprite Renderer, so this way we can access it’s color property. If your sprite is in a child game object of where you attached this script, instead of GetComponent, use GetComponentInChildren like this:

sprite = GetComponentInChildren<SpriteRenderer>();

Now in Update() we first of all check to see if the key C is being pressed on the keyboard. If you’re confused with how that works, read the Unity documentation on it here; it’s helpful.

Then we change the color property of our Sprite Renderer by creating a new Color. This literally just means we’re changing those same colour properties from earlier, but with code. It looks like this:

sprite.color = new Color (Red, Green, Blue, Alpha);

Confusingly, instead of being a value between 0 and 255, like it was in the editors colour changer, now we have to give it a value between 0 and 1 for each colour property, 0 being no colour, 1 being full colour for that property.

So in other words, if you run your game and test it now, it will tint your sprite red, because we told it to be:

  • Full Red
  • No Green
  • No Blue
  • Fully Visible

Likewise if we changed our colour property like this:

sprite.color = new Color (0, 1, 0, 1);

It would tint our sprite green. Try it.

Then if you did this:

sprite.color = new Color (1, 1, 1, 0);

Your sprite would be its normal colour, but it would be transparent, because we turned the alpha all of the way down. So that’s a nice way to make your sprite invisible, but still enabled.

You should be able to use this to create some nice effects in your games now like a character flashing when it’s hurt.

10 thoughts on “How To Change Sprites Colour Or Transparency – Unity C#

Add yours

  1. This is legendary! Thank you!
    You are my saviour!!!! I passed my Computing CAT because of the colour flashing effect!

    Like

  2. I tried for an hour to change the color of the SpriteRenderer through code before finding this article. I don’t know why this has to be so confusing. Even after getting through the confusion of 0-1 vs 0-255, things like HSVTORGB still provide unexpected results. Searching online, I mostly found a lot of other people confused. I was glad to finally come across your post here.Thank you.

    Like

  3. Thank you! I tried several options all similar to this (including HSVTORGB) and nothing was working. This should not be so confusing but you cleared it up.

    Like

Leave a comment

Blog at WordPress.com.

Up ↑