NGUI Performances in Unity. Should I use more than a panel or not?

[Eugenio]

Hi guys. I'm actually creating a UI system with NGUI in Unity and that must work on mobile devices. There is always visible a top banner with a logo and some information about the current status of the app, and a bottom toolbar (also always visible). Between them (on the center of the screen) I must place some different views (e.g. login form, options, dialogs, alerts... etc).

Actually I have created a panel for each GUI view and all of them are under the Anchor gameobject. The banner and the toolbar are always active while I'm switching the other panels by deactivating the gameobject when needed.

Now I'm wondering if it is more performant (and correct) to have just one panel and different GUI views to activate when it is needed. In this case I would have one single panel and different gameobjects that will contains the widgets. To switch between the different UIs I would use the activation of those gameobjects.

What do you think is the most performant and correct way? I'm opened also at different way to do the same thing.

Thanks !!!

[ArenMook]

Depends on how much is changing. Moving frequently changing widgets into a panel of their own will help performance (ie: pulsating color, rotating / tweening sprite, sprite animation, etc).

[Eugenio]

I see.

To be honest I made this considerations: a panel is responsible to draw the widgets on the screen so basically if you have all your windgets in one sigle panel, every of them will be drawn in a single draw call. For this reason if you have multiple panels every one of them will be responsible of its own content multipling the draw calls for the number of the panels present in the app. So I think that having a single panel with multiple views to activate at the right time is the most performant operation to do.

My UI, as I said, has some fixed part like a top banner and a bottom toolbar. The toolbar changes its content as needed but there are just buttons.

[Nicki]

You have to understand how the underlying system works. The raw amount of draw calls aren't everything when it comes to performance.

For instance, make a single panel with 50 widgets in. Then set 1 of those widgets to rotate every Update().

Compare that with 2 panels - one with 49 non moving widgets, and one with 1 rotating widgets.


The first will get a huge amount of UIPanel.LateUpdate time spent rebuilding the underlying geometry used to draw with.

A good rule of thumb is, if you have static widgets that never move or all move together, put them in the same panel. If you have widgets that move all the time, keep those apart from the static stuff.

And if you can get away with it, then animate the panels themselves instead of the widgets so the geometry doesn't have to rebuild.

[Eugenio]

gotcha. thank you very much for the explanation :-)

[emperor1412]

The first will get a huge amount of UIPanel.LateUpdate time spent rebuilding the underlying geometry used to draw with.

This one is no longer true in NGUI 3.0.0, the underlying geometry is not rebuild if 1 widget is moving around, that helps a lot in term of performance.

[Nicki]

Oooh, now that is interesting. I'll have to do some performance testing of that.

[Eugenio]

Oh, so does this mean that having everything in a single panel with 3.0 is more performant?

[ArenMook]

3.0 creates additional panels as it deems necessary, so even if you have one, you may have more draw calls than that. As I always say, if you are concerned with performance and you have a complicated UI, but only a small part of it is changing every frame, put that small part on its own panel. If things don't change much, keep the number of panels to a minimum.

Example of an extra panel: panel used for the HUD (HUDText).

[Eugenio]

Oh OK. thank you very very much