How to Reduce UGUI DrawCall with Atlas Packing and Batching
High DrawCall is one of the most common UGUI performance problems. If your UI has dozens or even hundreds of DrawCalls when it shouldn't, atlas packing and batching optimization are usually the first steps to take. Using a real MMO weapon UI panel as an example, this section shows how to identify where DrawCall comes from, pack atlases properly, and fix batching failures caused by invisible element overlap.
Locating the DrawCall Problem Before optimizing, you need to know where the DrawCall cost is coming from. How to Check DrawCall Count After running your project, check the Stats panel in the upper right corner of the Game view. Under Graphics, look for the Batches number—this is the DrawCall count after UI batching. In our example project, the initial Batches count was 86 . For mid range and high end devices, this number may still be acceptable. For low end devices, however, it is relatively high—especially when the UI needs to be rendered on top of a 3D scene. On low end devices, the cost of 200 total Draw Calls is already noticeable, so having the UI alone occupy 86 Draw Calls is unreasonable. Using Frame Debugger to Identify Sources For detailed DrawCall analysis, use Unity's Frame Debugger Window → Analysis → Frame Debugger . It lets you step through every DrawCall in the scene and shows exactly what is drawn each time. In our example, the DrawCall cost breaks down as follows: Background elements drawn one by one Background frames used for masking The left panel with weapon icons each icon's background, icon image, and outer frame drawn separately The weapon icon section alone accounts for more than 60 Draw Calls, with the remaining parts accounting for roughly another 10 to 20. Most DrawCall comes from a large number of independent small icons. Atlas Packing: The First Optimization Step The first step in UGUI performance optimization is usually atlas packing —combining multiple small images that appear together into a single large texture an atlas . When elements share the same atlas and material, Unity can batch them into a single DrawCall. How to Set Up Atlas Packing in UGUI In Unity, there are two common ways to pack atlases: 1. Go to Edit → Project Settings → Editor → Sprite Packer and select Always Enable Legacy Sprite Packer . The newer "Always Enable" mode requires more configuration and is less commonly used. 2. Assign a shared Packing Tag to UI sprites so that elements with the same tag are packed into the same atlas. 3. View the packed atlas through Window → 2D → Sprite Packer . In our example, we set the Packing Tag of background images to and the tag of weapon sprites to . Results of Atlas Packing After atlas packing, the DrawCall count Batches dropped from 86 to 60 . The circular background elements that previously required separate Draw Calls were batched into a single Draw Call. Each weapon icon previously needed three draws—background, icon, and outer frame. After packing, the outer frame and background could be batched together, so only two draws per icon were needed. However, each icon still required 2 Draw Calls, and all icons together still accounted for 48 Draw Calls. There was clearly more room for optimization. Why Batching Fails: Element Overlap If atlas packing alone doesn't get you the expected batching, the next thing to check is whether UI elements overlap. The Overlap Effect on Batching Consider two buttons: When the button on the right does not cover the text of the button on the left: only 2 Draw Calls When overlap occurs: 4 Draw Calls The reason: Unity determines occlusion relationships during rendering. Drawing both backgrounds first and then both text layers works fine when there's no overlap. But if elements overlap, reordering would change the visual result—the text on the left would incorrectly appear above the border on the right. So 4 separate Draw Calls are required. How to Identify Hidden Overlap In our weapon UI example, the weapon borders were placed very close to each other. Visually, it was hard to tell whether Unity treated them as overlapping or not. To check: 1. Switch to the Scene view 2. Change Shading Mode to Shaded Wireframe 3. Examine whether the meshes of adjacent elements actually touch or overlap Fixing Overlap Issues We first tried adjusting the Layout spacing: changing the X axis and Y axis Spacing from 0 to 1. This didn't change the DrawCall count. Then we noticed something: the background and border elements used different Z values . After changing all Z values to 0 and rebuilding, all icons were batched into a single Draw Call. This revealed that the excessive DrawCall was indeed caused by overlap—specifically, Z value differences that Unity interpreted as depth ordering issues. Key takeaway: Overlap issues are easy to miss during development, especially when elements don't appear to overlap visually but are still judged as overlapping by Unity during rendering. Different Z values can also break batching even when elements are visually on the same plane. Final Result After combining atlas packing with overlap/Z value fixes, the DrawCall count dropped from 86 to under 20 .