title: Unity3D UGUI (aka "new UI") Draw Call Optimization
body: <p>We recently created an asset that displays data in a table layout in the 'new' (> 4.6) Unity UI.  Some of our users are asking about draw call performance and we are wondering what (if any) options we have to improve draw calls in the UI.</p>
  
  <p><a href="https://i.stack.imgur.com/S9Nny.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/S9Nny.gif" alt="Table Usage GIF"></a></p>
  
  <p>So the above table sticks pretty consistently at <strong>19 draw calls</strong>... </p>
  
  <p><a href="https://i.stack.imgur.com/f5amk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/f5amk.png" alt="enter image description here"></a></p>
  
  <p>It runs fine on anything ipad2-level and above, but Unity dev's (understandably) hate draw calls so we want to minimize that number as much as possible.</p>
  
  <p>You can see the hierarchy we are creating for our table in the above screenshot.  We are using masks for the Header/Footer/Body and the ColumnOverlay.  Per Unity, it appears that each Mask takes a minimum of 2 draws:</p>
  
  <p><a href="http://forum.unity3d.com/threads/unity-4-6-ui-mask-component-takes-2-draw-calls.279840/" rel="noreferrer">http://forum.unity3d.com/threads/unity-4-6-ui-mask-component-takes-2-draw-calls.279840/</a></p>
  
  <p>Also, we are obviously using a bunch of the Unity UI Text and Sprite elements to draw everything.  The basic nature of a table layout pretty much means that there are multiple layers of Sprite and Text objects on top of each other (cell data on top of cell background, etc).   Unity dev's seem to say that there's simply no way to NOT have multiple draw calls when this happens as the engine requires a draw per "layer"... period.</p>
  
  <p><a href="http://forum.unity3d.com/threads/solved-new-ugui-and-too-many-draw-calls.266631/" rel="noreferrer">http://forum.unity3d.com/threads/solved-new-ugui-and-too-many-draw-calls.266631/</a></p>
  
  <p>So... it seems that as soon as you have a non-trivial UI layout in the Unity UI you are pretty much guaranteed to have a non-trivial (10-20) amount of draw calls.  Is that true?  If it isn't, does anyone have any ideas on anything we could do to minimize draws in our table?</p>
  
  <h2>Update 1:</h2>
  
  <p>I was able to reduce my draw-calls by one by inactivating a custom 'measure' element I have on each data row.  It's basically a hacked "Text" object but I'm just using it to measure cells for grid sizing and it was taking an extra draw call.  The measure features actually work fine with the GameObject deactivated.</p>
  
  <h3> Current Draw Calls == 18 </h3>
  
  <h2>Update 2:</h2>
  
  <p>Found a big improvement.  I mentioned above that my Header/Footer/Body and ColumnOverlay all use masks elements.  Turns out, I was able to restructure my system to include a single Mask on a new root-level element and remove the Masks on the Header, Footer, and ColumnOverlay.  Now I just have a Mask on that root element and the Body.</p>
  
  <p><a href="https://i.stack.imgur.com/D4Xhi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D4Xhi.png" alt="Masks Improvements"></a></p>
  
  <h3> Current Draw Calls == 13 </h3>
  
  <h2>Update 3 [the failures]:</h2>
  
  <p>So each row contains that bottom border line image to offset it from it's siblings.  I thought maybe it's printing 'on top' of the Text elements and forcing an extra draw.  Turns out no... it's not.</p>
  
  <p>Also... all my background Image elements have no sprite property defined.  They are just using "null" with a color applied.  I thought maybe if I created a single generic 'white' sprite and applied it to all my null Image objects it might improve batching and reduce my draw calls.  Turns out no... it doesn't.</p>
  
  <h3> Current Draw Calls == 13 </h3>