UI Tips to increase performance of your game(Unity)

Unity’s UI is a very powerful tool. If didn’t use correctly then we may see less FrameRates in our game, lag , high CPU usage etc. Lets see how to use it properly to improve the overall performance of the game.

User Interfaces :

We all hear the word UI in our day to day life so what is this UI?
It’s nothing but a layer that exist between the user and the device. Its functionality is to give information to user and to take information from user.We can display this information in the form of an HUD which can be drawn over your game or an object present in the 3D world.

In Unity we have a canvas onto which all the UI elements are drawn. It is the building block for a UI. All the UI elements should be child of this Canvas.

Problem with Canvas :

We have seen how powerful the Canvas is but it has some downside as well. To display an UI element it should be the child of our canvas. If we put everyhting into a single Canvas this will create performance issues.

When we update or change some UI elements present in Canvas then the whole Canvas needs to be rebuilt. It generates meshes that represent the UI elements placed on it. The more you update elements the more it will rebuild itself consuming lots of CPU power, GPU and memory which leads to problems like low FPS,lag, device heating etc.

Therefore, it is a good idea to have different canvases for different work. You can also nest canvases. Child canvases also isolate content, from both their parent and sibling canvases. They maintain their own geometry and perform their own batching. you can furhter seperate your canvases into 2 types.

• Static canvas
• Dynamic canvas

Static canvas :

Put all the UI elements in this canvas which are static means they do not change their properties. These are fixed, like Menu UI,Game over screen etc. This canvas will not get rebuilt unless you manually change it.

Dynamic canvas :

Put all the elements which needs to be changed very often in dynamic canvases. It will rebuild itself only.

Animators On UI :

Avoid using animators on UI components.Only put animators on dynamic elements that always change. Animators will dirty their elements every frame, even if the value in the animation does not change.

Use Sprite Atlas:

If your UI uses many images or icons, combine them into a sprite atlas. This reduces the number of draw calls, which can be a significant performance gain.

Use Static Batching:

If your UI is relatively static and doesn’t change frequently, enable “Static” on the Canvas component. This allows Unity to batch the UI, which can reduce draw calls.

Limit Raycast Targets:

If you use a lot of buttons or interactive elements, keep the number of Raycast Targets low. Each Raycast Target adds overhead, so reduce unnecessary ones, especially if they overlap or are obscured.

Disable Raycast Target When Not Needed:

For elements that don’t require user interaction, disable the Raycast Target property. This prevents unnecessary raycasting and improves performance.

UI Elements Culling:

If parts of your UI are off-screen and not visible, consider using the Clipping options or Object Pooling to deactivate or cull them. This reduces unnecessary rendering and updates for hidden UI elements.

UI Image Compression:

Optimize your UI images by using the appropriate compression settings. Use compressed textures like ETC, ASTC, or DXT formats to reduce memory consumption.

Tips for UI :

Use static fonts.

• Avoid using LayoutGroups.
• Avoid world-space canvases.
• Avoid using animators, use tweens instead.
• Uncheck “Pixel Perfect” in the Canvas settings.
• Avoid UI element rect overlaps to improve batching.
• Stop animations and tweens completely when finished.
• Turn off the Raycast Target for static or non-interactive elements.
• Limit the usage of ‘Best Fit’ and ‘Rich Text’ in Text components
• Change material’s color property instead of multiple sprites with color variations.
• Pack your sprites together to reduce drawcalls. Use Texture Packer or Unity’s atlas/packer systems.
• Avoid Camera.main calls as it does Object.FindObjectWithTag every time it’s accessed. Have a direct reference to the camera.
• Take out GraphicsRaycaster components from Canvases that don’t require input events.
• Avoid stacking UI images/text on top of each other. This causes more overdraw and will slow things down.
• Prefer enabling/disabling the canvas itself instead of the entire gameobject.
• Use Unity Profiler UI and UI detail panels to diagnose UI draw calls and costs.

Support My Work ☕️

If you’ve found value in this article and would like to support my writing efforts, consider buying me a coffee. Your contribution helps me continue creating content like this.

Buy me a Coffee ☕

Thank you for your support!