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. Below, you can see I’ve got transparent waterfalls as an example. The transparency was changed in code.

Puzzledorf

Sprite Renderer

Your sprite is contained in a component called the Sprite Renderer.

Sprite Renderer

The Sprite Renderer also contains a “Color” property. This is where all of the color changing happens, and I will show you how to change this with code. If you click on “Color”, you can see a color wheel. Playing with it changes your sprites color.

Full white is your sprites normal colour, full black is just black, and other variations will tint your sprite.

R, G, B is how much red, blue and green are used to tint the sprite.

Color Changer

A is for alpha, and this is how you make things transparent. 0 alpha will make it invisible.

Coding Color 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 ColorChange 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.

If you liked this article, please check out Puzzledorf to show your support. If you enjoy playing, leaving a review helps the games visibility on Steam.

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 reply to Dale Forbes (@cgcowboy) Cancel reply

Blog at WordPress.com.

Up ↑