Implementing Multiple Canvas Groups in Unity 5

 

There is often confusion about how to implement canvas groups in Unity 5. The documentation makes it fairly plain what canvas groups are, but doesn’t help so much on just how to use them. This confusion leads to people asking about creating multiple canvases (which is actually possible to do in Unity 5+).

The multiple canvas solution is simply the wrong way to go about implementing multiple canvas groups however. It shows a lack of understanding on how you can use this UI feature. Now, I do want to make it clear that I’ve noted others (including myself) managing to use multiple canvases (lightly) in a scene, without any seemingly majot detriment to performance. This is keeping in mind that performance is basically the primary reason touted as to why its best sticking to a single Canvas in a scene (the other reason being organization).

So,¬†there are reasons (not relating to Canvas Groups) as to why you’d want to use multiple canvases, but I won’t be covering that here this time.

Now, the way that I make use of multiple canvases is to separate all UI objects into different categories or areas of the UI. Then I create empty GameObjects, naming them based on their area, and place those areas inside of the Canvas object in the scene. If necessary I’ll even create sub areas. For example, I might have a UI that has three different sections to it, a Top Bar, Bottom Bar, and Missions area on the screen.

Unity Canvas Groups
GameObject Canvas Groups as Areas

To each one of those I’ll assign a Group Canvas. Which can easily be done by selecting the area GameObject, and then in the Inspector, by dropping down to the bottom and clicking “Add Component“. Search for canvas group from the drop-down and and select it. That will add a new section for the object in the inspector where you can now see the four different public values (Alpha, Interactable, Blocks Raycasts, Ignore Parent Groups).

Unity 5 Canvas Group Section in Inspector
Inspector Section

This provides all the power you’ll need to make full use of the canvas groups in your application. In prior Unity versions you may have been used to using “XXXX”.enabled = false/true for turning on and off sections of the GUI, or using SetActive. However, that has all become unnecessary. If you want to make an area un-interactable, you can simply change the GameObjects boolean:

thisArea.interactable = false;

Likewise, you may want to keep functionality attached to some of the UI game objects, but want them to disappear from the screen. This is easily solved by simply setting the alpha (float) to zero.

thisArea.alpha = 0.0f;

To have it re-appear, you simply switch the the alpha back.

thisArea.alpha = 1.0f;

As you can see, it would be easy to write some functionality to have area elements undergo a fade in or fade out transition effect.

Lastly, there may be times when you want to turn off the entire canvas area (or a sub area), all of the contained UI elements, but have one area be unaffected. Then its simply a matter of changing the Ignore Parent Groups boolean (which is set to false by default).

As you can see, using multiple canvas groups is both extremely useful/powerful, and also easy as well.

Leave a Reply