How are UI draw calls (batches, not set pass calls) generated? Any tips to optimize?

Hello,
I’m making a mobile game, which used UI heavily. So I need to understand this to optimize it.
I see that the way UI draw calls generated is strange to me.
As you can see below example, there are 4 baches:

2717985--192911--upload_2016-7-21_7-20-11.png

After have a look at the frame debugger, I see that 3 draw calls are for UI elements. But it should be 2 (1 for the button background, and 1 for texts). The real order in Unity is: 2 Texts (“New Text”) in 1st draw call, then button background in 2nd, and the Text (“Button”) in 3rd.
I know that the rendering orders depend on the hierarchy of UI elements. But still, in this situation, it should be 2 draw calls as expected.
So, this is a bug or any logic related on this? Can someone give me a deep explanation or related link, material to get it?

I used to optimize a complicated UI from ~40 draw calls to ~12 draw calls by randomly changing the order of elements in the hierarchy :frowning:
I also suggest a way to set the rendering order manually. Depends everything on elements order in hierarchy is not enough and tricky, when working with a complicated UI.

One more thing, why the batches stats shown in Editor mode is different to what I see in Playing mode? I have to enter playing mode to change the prefab to see the changes. This takes me a lot of time then.

Thanks a lot!

I wondered about that too.

Just to make sure, do you have any extra Unity Cameras? or a Camera with a Skybox?
ex:

I was also wondering this a while ago, since for kissUI, I was puzzled why i was getting an extra draw call, at 1st. :wink:

@IzzySoft I used a camera with a solid color. In your case, you get 1 more extra “set pass call” (its reasonable).
In my case, I get only 1 set pass call.
What i’m caring is the number of batches generated (draw calls) :slight_smile: