[Read the original blog post on Unity UI Optimization at The Gamedev Guru's Blog]
I normally do not share my past struggles, but this topic deserves it. What to do when you lose hope with Unity UI?
I still remember that weekend, about five years ago...
I spent the entire weekend worried about all the technical debt I was accumulating over the months in one of my projects. I had done things too quickly, without really understanding them. Clearly enough, that had to stop working at some point.
The thing is, I owed my clients results but I had no idea how to bring them. That morning though, I said to myself: Rubén, this is enough. Stop the excuses. You are becoming a professional today.
So, I decided to gather every single resource I could find about user interfaces in Unity, because that was the biggest hurdle I was dealing with for several weeks. I read forums, best practices, Unite videos, read all blogs I could find on that topic and did my own research.
Unity UI Development Triangle
Did you ever experience this feeling of slowly getting overwhelmed by technical debt? It accumulates over time and someday you either give up or decide to crush it. In my case, it was the later.
You probably heard that optimizing UI in Unity is challenging. Or, if lucky, you know it from first-hand experience. Yes, Unity UI is a powerful tool and I love it. However, its mightiness can quickly transform into a deadly weapon if it falls into inexperienced hands. And so were my hands back then.
If I had to confess anything to you today, it would be this: I wished I had had a solid foundation on Unity UI before I designed the UI of several games.
It is SO easy to do it wrong, SO easy to get frustrated. In my opinion, there's something even easier than that. That is, for your client to ask you to do over-hours to get your shit together.
In my experience in the professional sector, companies do not want developers who design poorly optimizable interfaces and leave the tuning task to experienced programmers. They rather want developers who create visually stunning interfaces, but also performant.
And even in the indie development scene, where would you choose to spend your time on? Bringing fun to your players, or spending hours clicking through the profiler to find bottlenecks?
In my opinion: no matter your role, you should understand basic Unity UI design principles. But this takes time and project experience. You might not have any of these.
Hopefully, I can help you there.
Today, I will give you one of my most powerful tools: The Guru's UI Development Diagram
As usual, I'd like to start with the Level 1 Developer construct
unity-ui-update-batches-layout-spikes
Level 1 Unity UI Developer: UpdateBatches & Layout Spikes in Unity UILevel 1 Unity UI Developer: free-style UI
This is where we all start: free-style design, free-style results.
I used to import sprites with whatever settings. Then, I would add them as images everywhere with no predefined criteria. And so I ended up with an unstructured hierarchy full of components that I didn't need. I used the wrong systems for the wrong reasons.
Overlapping UI elements, a motherload of batches, profiler spikes. Those are all common.
Do I have anything against this?
Partially. I think it is great to play around and to make mistakes. Breaking and repairing help learning.
But if you want to do this for a living, at some point you might want to level up your skills and embrace professionalism.
This becomes unacceptable in the games industry, especially in Virtual Reality. If you do this in VR you will turn players into patients.
Such a chaotic Canvas hierarchy structure could look like this:
unity-ui-unstructured-hierarchy
Level 1 Unity UI Developer: Unstructured Unity UI Hierarchy
You do a lot of nesting, you use auto-layout components everywhere and there is a lack of rules.
At some point, someone will ask you to optimize your UI. That could be your players, your boss or even your own pride.
But you might not be ready for this. You might be caught off-guard having other tasks on your plate. And UI development is daunting at the beginning.
The reason for its complexity lies in the amount of factors it involves. Leaving the visual appeal aside, you can say that the way you work with Unity UI will have a big impact in three critical hardware pieces: the CPU, the GPU and the developer theirself.
If you are lost, it's good, because...
I am about to show you something cool
Let's level up as a developer!
the-gamedev-guru-Unity-UI-development-diagram
Level 2 Unity UI Developer: The Guru's UI Development Diagram
Here we are with a Venn Diagram. I decided to call it The Guru's UI Development Diagram.
There we see three big chunks related to Unity UI Optimization: CPU, GPU, and Developer. Those are the main resources you will have to spare when developing UI.
I want to give you a short overview before we start digging in the topics.
You pay the CPU toll mainly when generating and submitting batches of UI. You can think of them as UI components, such as images. The more of those you have, the more strain you will put in your processor.
The turn for the GPU. You pay the GPU resources mostly in concept of overdraw. This means, stacking layers of graphics on top of each other.​
Lastly, the developer pain is paid in time. You spend time every time you design or maintain your UI. Unity offers you some tools to make it easier for you, e.g. auto-layout helpers.
The cost of the three components rely mostly on you, but they sometimes counteract each other. It's very challenging to perform in every aspect, unless you are very experienced and you have the right tools.
Eventually, you will get there.
I would like you to have a closer look at the attached Guru's UI Development Diagram.
You might be confused. That's alright, because we are going to cover each section separately. You will get to understand all of it.
For now, you only have to understand one thing: in the end, it will be up to you to find the balance between the three variables in your game.
Before we start with each component, have a look at these general rules:
The easier you want the UI design workflow to be, the less performant your UI will be.
If you want more GPU performance, you will have to focus on finely tweaking graphical elements and avoid element stacking.
For more CPU performance, you will need to reduce the amount of graphical elements present in the hierarchy.
Let's move on, I can't wait to show you the CPU side of Unity UI Optimization!
Level 2 Unity UI Developer: The CPU
Level 2 Unity UI Developer: The CPU
In my opinion, this is very simple.
The golden rule is:
Every time you add a UI component in your scene, you are adding CPU overhead
Each component increases the CPU cost for the following reasons:
RectTransform calculation: this is pretty much free in simple canvas hierarchies. However, your CPU will have a harder time if you are using auto-layout components to ease your UI design workflow, such as vertical layout groups and such. The issue with those is that most RectTransforms present in the hierarchy will now depend on each other, so the calculation becomes more complex.
Vertex generation: the GPU understands vertices, thus those must be provided by the CPU. Vertices must be generated based on the entire canvas hierarchy of the involved RectTransform elements. The vertices depend as well on the specific type of UI element you added (images, texts). Under this category, we also include the cost for the CPU to add other per-vertex attributes such as colors and UVs.
Dynamic batching: because draw calls are expensive, Unity does its best to dynamically batch as many of them as possible.
Think of this as combining a large number of small groups of vertices into a single, huge group of vertices. Because... would you rather go to the supermarket ten times to bring an apple each, or go just once and grab them all together?
Batching is, however, an expensive operation for the CPU which increases with the amount of UI elements you have.
