Big UI Performance Problems

Hey everybody,

I have been working on a mobile game for the last months, but after some on-device testing I noticed how bad the performance of the app is, so I am searching for some tips.

The Setup
The whole game is currently 2D and only uses the new UI system. There are a lot of different screens, that have their own canvas elements that I toggle on and off depending on their screen position. I do this, because just setting the game object active/disabled creates a huge spike in the frame execution time (Profiler). A lot of things are static, but things like the progressbar for the time are obviously not. I use about 3 different fonts (ttf) in multiple sizes, configured as dynamic.

Editor screenshot with all the different screens:


The Problem
The execution time of the render functions is way too high on the mobile devices. Bear in mind that only up to two screens (+the time progress bar) are visible (canvas toggled on) at any given time, however, especially the Canvas.RenderOverlays takes a huge amount of time (up to 10ms). Furthermore the Canvas.SendWillRenderCanvases also takes quite a bit of time, even when there are only a few elements shown. Additionally I have big problems with the texts (which there are quite a few of) - the fonts will cache again and again (when changing texts), creating spikes of up to 1600ms on my iPad Air. Additionally, instancing rows in the tables takes a long time (about 1ms per row Instantiate + GameObject.Activate) which is not really feasible for friendslists/highscore lists.
Something else that is rather annoying is that OnRectTransformDimensionsChange is called even when I don't modifiy it's (or it's parents) size but only the position. I assume that in that case some graphic elements are buying rebuilt internally which creates a slight lag when I am animating the UI positions. Happens by both modifying the anchoredPosition or the anchors (which shouldn't change the size if both min/max are modified by the same amount?).

Note that just this scene (blue circle is rotating) is not running @ 60fps on my iPad Air, and only barely on my iPhone 6. All other "screens" are active, but their canvases and raycasters are disabled.


Profiler:


Note that the biggest time consumer from my own scripts is the one that is attempting to fix the canvas visibility, since Unity seems to not cull offscreen canvases. (So it checks if the canvas is within the screen boundaries and turns it's canvas and graphic raycaster element on)

Another really weird thing is the really uneven graph when I am animating screen transitions (in the profiler screenshot right at the beginning) which makes it seem even more laggy than it already is.

Ideas/Solutions
The biggest problem so far was the font thing because lags of >1 second are simply laughable, so I did a lot of tests. Using multiple configured fonts with a static size (Unicode) sadly produces blurry looking fonts, so I used multiple instances of the same font set to dynamic, and only using that instance within one font size. Sadly even that requires me to manually "refresh" the texts at certain points (changing color for a frame) so that the text gets rebuild. If I don't do that, it looks all blurry (not all texts are always affected). See the following picture, you may need to zoom in - the problem is very visible on the devices:

I know that the RenderOverlays thing comes mostly from the timebar at the top, but I don't know how to fix this. I should note that I created my own "smooth" scaling for this: There are two parts to the timebar, one fully solid part, and a 1pixel tall line whose alpha depends on the height that tries to be achieved. This is so that the scaling looks more smooth then 1 pixel row at a time going white.

For the other things I am completely clueless as well, although I don't consider the text issue fixed the way it is right now.

The issues are really annoying, seeing that there is barely anything displayed and the ads are not even in yet. (Displaying the animated iAds on top drains even more performance.)


It's really sad for me that this is holding me back so much, I am almost on the verge of recreating the whole project with a different engine/rendering system, however I don't want to rewrite all the networking stuff, so I really hope to find some help here.

Thanks a lot for reading!
- Marian

 

Nice post, if you check the UI section of the forum, you will see multiple complaints about UI performance on mobile.
Currently Unity 5 is not great for mobile development - waiting till FPS issues are fixes. Therefore best bet would be to try and use 4.6.6, you have not mentioned the version of Unity you are using?
Maybe you have also found a new bug/issue, worth logging with Unity or maybe one the iOS developers can also provide a suggestion.

 

Yeah, I am using 5.0.2f1 right now.
I don't know how much downgrading is gonna do for me, I am still waiting for the IL2CPP UnityEngine.Network stuff (afaik that is still marked as not done in the manual), which I will need for the 64 bit builds.

 

Download 5.1, just came out. Has network stuff and many IL2CPP fixes.

 

Wow, they completely changed/reintroduced networking it seems. Seeing that RakNet will be deprecated I hope it won't require too many changes to adapt.
Downloading now, maybe it helps with the UI things.

 

Sadly you are right, performance wise nothing changed. (On the other hand mono dSYM-generation in XCode seems to be broken)

Also tried I2LCPP, nothing of a difference. Interestingly there was a difference on what took most of the time on my iPad Air and iPhone6 (although that could've been the case with mono/unity 5.0, I just never noticed)

iPad:

(Note: Canvas.RenderOverlays)

iPhone:

(Note: Camera.Render)
The spikes are terribly annoying by the way, and they appear when animating from on screen to another (horizontal position change).


Additionally I am still having problems with the fonts being re-cached again and again

(blue spikes)


There was a release planned for mid July, I suppose Unity 5.2 won't be out by then?

At least the Network changes are interesting, even though they make my whole node.js coordination manager backend kind of redundant.

 

Any ideas how to improve the general speed right now?

It seems that any kind of alpha (change) is the biggest problem, as RenderOverlays takes the highest amount of time.

 

News!
Apparently drawing the thing on the top myself using OnGUI (with the exact same features etc) the RenderOverlays goes down to about 2ms, with the new OnGUI taking about another 2ms on my iPad Air. Kind of makes me consider re-writing everything to only use the OnGUI function.

However, the animation-spike problem now becomes the focus, as it's really annoying/apparent and terrible for the user - why does Overhead spike every second frame?

Compare those two frames (4145 and 4156):



This is only happening while animating the RectTransform in Update of a Behavior. The same thing also happens when rotating the RectTransform of an Image (that's the longer spiking-part in the Profiler).

 

I'm noticing a spike in the Overhead value when I display a popup message box (panel, with a fullscreen alpha image that greys out the background a bit). I'm still trying to figure out exactly what is causing it but Overhead jumps from about 2ms to 20ms. Have you had any luck pinpointing what is causing your Overhead spike? I'm not moving/animating anything, just displaying a panel with a few text objects on it.

I'm on 5.1.0

https://www.dropbox.com/s/m3qn9wcpdete7cx/Performance.png

 

Sadly, I made no progress so far. I barely use any alpha images (that are visible) while animating, so I don't know if it is related to that. It also seems that your overhead stays high for a while, while mine alternates every frame (while animating).

Anyway, it's a really weird behavior that can hopefully be fixed...

 

Yeah, hopefully 5.2 will improve UI performance. It's crazy that my game runs at 60 fps, but my UI crawls at 15.

 

But 5.2 is long time away, we need some fixes asap...5.1 just came out and already has issues..!

 

Bump, I really need a fix for this overhead spike problem.

 

Did you try latest 5.1.1 with patch and 5.0.3 with patch

 

We are also encountering the same UI slow downs. We are going to need serious improvements !

 

Maybe you should consider splitting this up in serveral scenes.

 

The game object activate thing is too bad. I kinda have to do it with all the components I have on pages, so I'm just dealing with the spike from it. I'm experimenting with TextMesh pro to see if I can get ride of the 'fontcache' issue. I also tried switching from dynamic to static in Unity but it was way too blurry (my feeling is the textures generated don't take into account the target device's resolution? why else it would be so blurry, as dynamic I assume still generates a texture, it just does so at run time). I read somewhere before that using the anchoredPosition shouldn't cause it to have to rebuild all the rects, so its too bad your still seeing that as I had planned on switching to that from normal position changes.

 

Thanks for reminding me about the updates @MrEsquire - somehow the editor stopped alerting me about them!
The problem regarding overhead spikes seems to be mostly gone in 5.1.1! At least while animating I don't see them, however there are still some seemingly really random situations.

Purple being the overhead, randomly spiking. I don't get the spike before that either, it names a function that just calls a coroutine that itself is very simple too.

While that's a nice update, it's still annoying that RenderOverlays takes half the frame time without me knowing the reason at all

This is something that really needs to be addressed in some way. Unless you limit yourself to like one font size, mobile has really big problems with fonts.

The first frame of my app takes 6000(!) milliseconds on my iPad Air because it is precaching fonts. (If I don't show everything in the start I get terrible lags when showing them for the first time, so I prefer this right now)

@Maulwurfmann
Best I could do would be two scenes, as the minigames need to be together in one, and the menu itself has good enough (steady 60fps) performance. As I am not showing any of the menu (all their subcanvases turned off) while ingame, it shouldn't really affect the performance anyway, should it?

 

Wish I could use 5.1.1 unfortunately I'm unable to build a project on that version because of the mysterious key missing from dictionary error

 

Try the 5.1.1p1 patch. http://unity3d.com/unity/qa/patch-releases

 

I experienced unbearable (up to 30x) increases in generating dynamic font labels on runtime when I updated to 5.1.1. I'm using an older version of NGUI for several reasons so it might have some connections to that. Anyways, with 5.0.3p3 it seems to work as it used to so I'm going with that for now. 5.0.3p3 is the first version actually that seems to be stable enough that we can finally do our 64bit build

EDIT: The problem occurred on 5.1.1p1 also

 

RenderOverlays also a huge performance hit here. Is there something that can be done about it?

 

The text transform and deactivate hurt me the most. I even changed my app to use anchored position =\

 

Changing interface in my game from English to Japaneeze takes like 5 seconds. Probably cause of rebuilding dynamic font texture. I think it was ok in 5.0.

 

I also have an huge performance problem with japanese, chinese, korean and thai characters on 5.1.2
The performance is fine on 5.0.3p3 but Thai is broken there, so I can't really use it.
Is there any way to mitigate the issue? Or is waiting for 5.1.2p1 the only thing to do? It should be out soon, right?

 

It's working as expected for me with 5.1.2p1.

 

Did anything regarding canvases in the editor change in Unity 5.1.2?

The editor is completely broken for me, only showing the bounding quads of the canvases, compare it to the first screenshot in the thread.


If I enable "override sorting" on the canvases in the lower hierarchy everything is visible... what changed?

 

I'm also working on UI based game and performance is so bad especially with multiple UI elements in scroll-view. I hope there will be significant performance improvements in 5.2. We will see September 8 (https://unity3d.com/unity/roadmap)