Preformance Issue with the UI elements on iOS

Unity Engine
1

Hello dear Unity Community,

I have been working on a rhythm game for a period of time. I ran into performance issues when building the main menu using the new UI system.

The problem is that: Frame time gets incredibly high for unknown reasons. I disabled the panels that are not on the screen, otherwise the frame time would go even higher.

Like for this main menu, the frame time Xcode measured was around 12ms (I am targeting 60fps so this is pretty high for me)

2254046--150639--IMG_1941.PNG
2254046--150639--IMG_1941.PNG2048×1536 474 KB

For this tune select menu, frame time is about 11ms…

2254046--150638--IMG_1940.PNG
2254046--150638--IMG_1940.PNG2048×1536 585 KB

For this confirmation menu, frame time goes up to 19.2ms, dropping the frame rate to 52fps.

2254046--150637--IMG_1939.PNG.jpg
2254046--150637--IMG_1939.PNG.jpg2048×1536 441 KB

The project is running using Retina iPad resolution.
All the images here are imported as sprites even for the black gradient, using true color option.
Also I used masks on the bottom banner and the confirmation panel.
Upper banner and the bottom banner does not move. I only swap the panels in the middle.
I don’t think scroll rect has an impact but I have one in each menu panels.
Some elements overlap, but this is unavoidable for designing reason.
Each menu has about 160 draw calls (measured using built-in profiler).

I tried to disable elements on the screen. Disabling one element gives about 0.5~1ms boots but even when disable all the menu panels leaving all the upper banner and the bottom banner enabled still gives a about 11ms frame time.

What’s weird is that: when I disable only the bottom banner on the main menu screen, the frame time goes up to 13ms comparing to the 11ms when the bottom banner is enabled, which does not make sense. Only when I disabled the canvas, leaving the background moving grids on the screen, the frame time goes down to 4ms.

Also for comparison, this is the in game (in development) scene. All the elements are on canvas except for the square floating in the 3D space and the grids. Even here the frame time is only about 6ms (if no squares or the four-piece square fragments (sprites) on screen, the frame time is 4ms.

2254046--150641--IMG_1942.PNG
2254046--150641--IMG_1942.PNG2048×1536 246 KB

The project is built with Unity 5.1.2 using IL2CPP (Universal). I am testing on a iPad 4 (iOS 8.1). My CPU usage stays around 60% at any time. So I guess this is only a GPU related problem. I have been searching for related issues around but ended up in vain. So my question is that: is this a bug? If it is not, is there any way that I can optimize without losing the sprite quality (or the general graphics quality)?

Thank you for reading this post! :slight_smile:

2

Okay so I am back with a little experiment:

2254360--150668--IMG_1944.PNG
2254360--150668--IMG_1944.PNG2048×1536 218 KB

Here, I only turn on the upper banner and the scroll panel. The profiler said:

iPhone Unity internal profiler stats:

cpu-player> min: 13.2 max: 16.5 avg: 15.4

cpu-ogles-drv> min: 0.0 max: 0.0 avg: 0.0

cpu-present> min: 0.7 max: 3.4 avg: 0.9

frametime> min: 14.1 max: 18.8 avg: 16.7

batches> min: 23 max: 23 avg: 23

draw calls> min: 23 max: 23 avg: 23

tris> min: 428 max: 428 avg: 428

verts> min: 868 max: 868 avg: 868

dynamic batching> batched draw calls: 0 batches: 0 tris: 0 verts: 0

static batching> batched draw calls: 0 batches: 0 tris: 0 verts: 0

player-detail> physx: 0.4 animation: 0.0 culling 0.0 skinning: 0.0 batching: 0.0 render: 14.0 fixed-update-count: 0 … 1

scripting-scripts> update: 0.1 fixedUpdate: 0.0 coroutines: 0.0

scripting-memory> used heap: 0 allocated heap: 0 max number of collections: 0 collection total duration: 0.0

----------------------------------------

Even now the frame time is around 9ms. Seems like using UI elements is too costly?

3

…and I turned the resolution down to 768P and the frame time dropped to below 6ms, but the whole graphics looks horrible (obviously).

4

Okay I did a test scene for the Retina iPad resolution. The only sprite in the canvas (and the only visible object in the scene) threw the frame time to 13.5ms. I guess the my issue is caused by the capability of the GPU. I don’t know how other people did their 2D games in Unity, but in my case an enlarged sprite is too costly for high frame rate. Any hints on this?

2254745--150696--QQ20150817-5@2x.jpg
2254745--150696--QQ20150817-5@2x.jpg2880×1594 422 KB

5

I see a lot of white alpha. How about switching to additive with B/W images?
Less memory, less calculations, same result.

6

One of the little tricks I discovered for improving performance was to split the UI into different canvases - one for static elements, another for infrequent dynamic elements, and one more for frequent dynamics (such as the countdown clock) as the whole UI is “recalculated” when something is changed. This applies to everything from text changes to tint changes. Not sure if that’ll help but sometimes you’ve got to grab at every little bit of performance.

7

Thanks guys for your tips. However my problem is that I am using lots of UI components. The image itself is not an issue because when I unset the sprite of Image elements, the performance improvement is negligible. The UI elements themselves use a lot of draw calls. I have seen someone else suffer with a sigle button having 2 or even 4 draw calls. I will see whether Unity 5.2 will reduce my problem since they implemented UI batching.