Unity UI vs NGUI - the learning path

So, I just want to share a few things that I'm discovering in the process, and a few tips and tricks, from a guy who work for the past 3 years only with NGUI

 

The draw calls (Overdraw)

The first thing that I've noticed, is that the draw calls, doing exaclty the same way I do things in NGUI result in a lot more draw calls using the new UI, check this example bellow:

Even object off the screen view, are being draw, and 64 draw calls for something simple like that, is wrong, really wrong

Even object off the screen view, are being draw, and 64 draw calls for something simple like that, is wrong, really wrong

So, the main difference here, from the NGUI, on NGUI when a Widget have alpha 0, this are not draw anymore.  But the same in Unity UI do not work, so you need to actually deactivate every object that you aren't using anymore.  So the solution for this are pretty simple, I already work in a structure that help this a lot, that will be something like this:


Object Controller  (GameObject, Controller Class)  - Content (Game Object, Canvas Group)  -- Objects inside 

Object Controller  (GameObject, Controller Class)
 - Content (Game Object, Canvas Group)
 -- Objects inside 

So, after making this changes, this is the result of the draw calls:

I know that 31 draw calls still not perfect as I want, but there is a lot of dynamic images being loaded from the server, and a lot of dynamic fonts here! I'll do more optimization later, and post here the results! 

 

More few things about Draw Calls (Updated 03/29)

I've decided run a few tests about the Draw Calls to make sure of how this is working exactly, so I've created a new scene, with only one background, here is the result:

 

So 2 draw calls
 - Canvas
 - Background Image

Adding one more image above everything, and this being inside an atlas, the same atlas that we had on for the background image:

Now 3 draw calls
 - Canvas
 - Background Image
 - New Error Sign

WHAT?! They are in the same atlas right?! But images overdrawing something else, will generate more one draw call! :( So if I add one more image side by side with the last error sign

Now with 2 images, that is not overlapping we had 3 draw calls
- Canvas
- Background Image
- Error Sign

 - Additional Error Sign draw call is saved by the batching. 

Now adding one more image, from the same atlas

His next image, the like sign, do not add any more draw calls! (YEY) because is in the same atlas

But what happens when this like sign is in the middle of the 2 errors signs?

3 Draw calls?! 

Ok, that was new for me, I tough that this will generate 2 extra draw calls, but I guess I'm wrong,  but what about we adding a font inside this same example

4 Draw Calls
 - Canvas
 - Background
 - The 3 Images 
- Text

Ok, adding a text generate one more draw call, I'm expecting that, so lest put this text in the middle of the 3 images, and see what happens:

5 Draw Calls,   - Canvas  - Background  - Image  - Text  - Extra 2 Images

5 Draw Calls, 
 - Canvas
 - Background
 - Image
 - Text
 - Extra 2 Images

And what about reuse this same text? This will generate more draw calls of not?

Sadly yes, reusing the same font again, generate one more draw call, so, keep in mind that every TextObject will result in more one draw call =/

So a few things to keep in mind:

  • You can overlap objects without getting additional draw calls (if they are not text with dynamic fonts)
  • Every new text asset will generate new draw calls



This post will be updated regularly