Change canvas ui alpha

Unity Engine
1

I am struggling with the simplest script calls and can’t figure out how to search for stuff like this.

For example, i want to make a canvas UI element fully transparent.
At first i thought gameObject.GetComponent.color.a = 0; but that doesnt work?
How do i make a canvas item transparent, and where in gods name to i start seraching for it in the documentation. Is it an image, is it a renderer. When i search for alpha, i get examples of a canvasGroup with no code and very little description. What is a proper way to search for stuff like this?

2

A Canvas is analogous to a Camera, while Image etc (anything that derives from the UI.Graphic class) is analogous to things derived from Renderer. A Canvas isn’t an Image.

CanvasGroup is a class that effectively modifies all UI.Graphic’s that are its children (as well as any other CanvasGroups that are its children). You put one on the parent object of all your UI elements you want to affect, and you can then alter GetComponent().alpha.

3

Thanks for the reply!

Do i always need to work with a canvas group? Can i hide hide one object and show an other that are in the same group in the hierarchy?

4

You can work with as many or as few as you need. Objects of the Graphic class (including Image, Text, etc) have their own alpha controls (via GetComponent().color.a), but ultimately these get multiplied by any CanvasGroup they are a child of.

So to hide Graphic A and show Graphic B, you would want to set A.color.a to zero; if they are both a child of CanvasGroup C, then C.alpha = 0 would hide both, and C.alpha = 1 would use A & B’s own color.a again.

1 Like
5

Hey guys – a related question I’m struggling with. . . when I change the alpha of a CanvasGroup – it changes each items opacity. . . so the elements that are overlapping show through each other (does that make sense?) – I can’t seem to figure out a way to have the “merged” layer set at a certain opacity level. . . I’m using sliders – and since they are made up of multiple elements – they look ugly when they are slightly less opaque.

6

Yeah, it’s not really possible. You could maybe fake it, but you’d have to use some really impressive hacks (render the UI to a render texture, then make that render texture fade out, maybe?)