Unity Canvas Optimizations

Especially for mobile games, you need to be careful with Canvas.

Just like any graphical element in the project, each image or text in the HUD requires processing, generating render calls (Draw Calls). In addition, Canvas performs other processes, such as detecting mouse interactions, monitoring clicks, mask calculations and resizing (redraws), which can impact game performance.

We're going to share with you a compilation of tips so that you never have headaches with Canvas:

Simplify your hierarchies:

It is common to group multiple HUD elements together, organizing them as children of a component to represent a specific section of the Canvas. For example, putting together a background image, some other decorative images, some text, and a button to form a purchase panel.

It is not a good idea to have complex hierarchies in an object. For two reasons:

• In Unity, when an object is moved, its local and global positions are updated. If that object has a child, the child's local position (relative to the parent) and its global position also need to be recalculated. If the child also has another child object, this process repeats, with each update occurring in sequence after the parent's update. In short, the more complex the hierarchy, the more calculations are required, even for the smallest movement.

• If you have a complex hierarchy, for example, with several images that make up the decoration of a panel, each image must be rendered, creating a Draw Call and affecting performance.

Note that Unity has to draw one element at a time. Totaling 8 Draw Calls just for a simple panel.

Simplify panels and screens. Before exporting to Unity, combine elements that will be together to make up part of the UI.

Even though you lose some of the "freedom" of having each element separate, the gains of having fewer rendering calls and calculations can be well worth it.

Note that with only 3 Draw Calls we were able to render the entire promotional panel above. This is because we combined all the elements into a single sprite (1 Draw Call), then created the button (2 Draw Calls) and finally the text inside the button (3 Draw Calls).

Static Canvases X Dynamic Canvases:

Avoid having all UI components on a single Canvas. The correct way is to separate dynamic components from static ones.

In other words, keep images, texts or buttons that undergo color, position, rotation or scale changes on a separate Canvas from the elements that remain unchanged.

In Unity, when something is updated in the HUD, not only the specific object must be redrawn, but also all the elements that are on the same Canvas. This can affect performance and cause the interface to feel "stuck".

Raycast Target e Maskable:

These two options become active when a new component is added to the UI (whether text or image).

Raycast Target is used to tell Unity whether you want the object in question to enter the processes to detect the mouse (hover, exit, drag, click, etc.). Maskable tells Unity whether or not an object should be affected by masks (Rect Mask).

It is important to uncheck these options on elements that do not need them.

In general, you will not want any element with Maskable and leave Raycast Target only on buttons and panels. Also uncheck the Rich Text option for texts that do not use tags (<color>, <font> and others).

Of course, all of this varies from project to project.

Sprite Sheet / Sprite Atlas:

Sprite Sheets are very important for optimization in Unity. For mobile games, it is almost mandatory to use a Sprite Sheet. More importantly, the image must be in POT (Power of Two) format, such as 128x128, 256x256, 512x512, etc.

The reason for this is that, if the texture is not POT, some devices may automatically resize it to the next POT value, which consumes additional processing time. More processing time means more heat for the device and less battery life.

In addition, using a Sprite Sheet also reduces the number of Draw Calls, since if two sprites are part of the same Sprite Sheet, they will be drawn together, in the same call.

Finally, since there will be no resizing, the final size of the game will be much smaller. Combine this with Crounch Compression (compression option for POT textures) and your project will take up less space and even the loading times will be shorter.

If you know of any other ways to optimize, share them with us in the comments.