4 ways to hide/show Canvas elements in Unity
When working with the Unity canvas, there are times when you’ll need to change the visibility of a UI element. For example, you might need make a dialog visible to the user and then hide the dialog when the user has interacted with it. Unity allows us to do this in different ways and they each have situations when they come in handy. Here are some of them:
1. Using GameObject.SetActive()
The SetActive method activates/deactivates a game object in the scene, depending on the Boolean value you pass to it as an argument.
One thing to note about this approach is that since the game object is deactivated, none of the components attached to it are enabled. So this method is not suitable when we have some code that we need to run whether the UI element is visible or not.
For example, we might be attempting to achieve data and view separation in our code by using a programming library like UniRx. We might have a Boolean reactive property like DialogOpen. We want a certain dialog in the scene to toggle its visibility based on the value of DialogOpen, so we subscribe to changes to DialogOpen from a Dialog script attached to the dialog. What if we try to implement it like this?
Unfortunately this code will not work as expected if the game object is set to be inactive in the scene by default. Because the object is deactivated, the Dialog component will not be enabled and so our Start() method never gets called.
We could fix this by enabling the dialog by default from the scene and then calling SetActive() to initially deactivate it from Start(). Since Start() is called before the first frame update the user doesn’t get to see the dialog just before we hide it.
2. Using Image.enabled
Another way to show/hide a UI element in the canvas is by setting the enabled property of its Image component. Of course this only works if the game object actually has an Image component attached to it, so it won’t work for things like text.
Using this method for our dialog now:
It’s also worth noting that this doesn’t affect the visibility of children of the game object, so this method isn’t helpful when you need to hide the object along with all its children.
3. Using CanvasGroup
The third way we’ll talk about is to the attach a CanvasGroup component to the UI element. CanvasGroup has some properties that you can set from the editor or from code.
The Alpha property controls the transparency of the UI element. The Interactable property, as the name implies, determines whether or not the element should accept our input when it detects it. Block Raycasts basically determines whether the element should detect any input at all.
Now let’s try this on our dialog. When the value of DialogOpen changes to false, we want the dialog to become invisible and allow us to interact with elements rendered behind it in the canvas.
4. Using CanvasElementVisibility
You can also use CanvasElementVisibility, a small Unity package with a script I wrote so you can avoid repeating yourself if you choose to use the method above.
Now we can shorten the previous code:
So these are 4 useful ways to hide or show a UI element in the Unity canvas.
Do you have any insights on even more approaches to doing this? Kindly leave a reply for me if so.
Other articles you might find useful:
