5 Unity UI Silent Killers
Introduction
User interfaces are a crucial part of any game, especially in simulation titles like Tube Tycoon—a YouTube simulator I released on Steam in 2018. Having built the entire UI without a single sprite, I learned the hard way how vital it is to master Unity’s UI system for both performance and flexibility. In this blog post, I’ll share top techniques for building, animating, and optimizing Unity UI, all proven in Tube Tycoon’s production.
1. Splitting Your Canvas
The foundation of every Unity UI is the Canvas. Unity uses Canvases as batching units. If any element within a Canvas changes, the entire Canvas might trigger a costly rebuild—recalculating meshes and issuing fresh draw calls. If your UI's HUD sits in a single Canvas and only a tiny notification changes, the whole Canvas might still be rebuilt, causing unnecessary overhead.
Preview
Best Practice: Divide and Conquer
- Group related UI sections (like top bars, bottom bars, and screens) into separate Canvases.
- Add a Graphic Raycaster for interactivity where needed.
- Example: In Tube Tycoon, each major screen (dashboard, video manager, etc.) received its own Canvas. Static elements (like top and bottom bars) also got dedicated Canvases, ensuring only what’s changed gets rebuilt.
2. Smart UI Animations
There’s been much debate about Unity’s animations: should you use the Animator or a tweening system like DoTween or LeanTween? In the past, Unity’s Animator caused entire canvases to update, but improvements since 2019 have optimized this process.
Animation Recommendations
- Use code-based tweening for simple transitions (like pop-ups or fading dialogs).
- Prefer Animator for complex, timeline-driven animations (like full intro screens), where visual control is critical.
- Keep frequently animated objects in separate Canvases to avoid triggering unnecessary rebuilds.
Pro tip: Standardize common animations with reusable scripts. In Tube Tycoon, a universal ModalAnimation script handled dialogs efficiently across many UI elements.
3. Optimizing Scrolling Lists
Scrolling lists are a core part of many UIs—but they can become performance drains if not set up properly. Unity provides robust tools for this if you follow best practices:
Efficient ScrollView Structure
- Hierarchy: ScrollView → View (with RectMask2D) → Content
- RectMask2D: Always use this instead of Mask for better performance.
- Set the Viewport property in ScrollView—Unity won’t waste effort drawing or registering off-screen elements.
By confining visible elements with Viewport and RectMask2D, you massively reduce unnecessary draw calls and raycast checks, especially as lists grow.
Preview
4. Prepare Images Properly
Import your UI images at the right resolution and compression for crisp visuals without performance penalty. Avoid excessively large assets—stick to what’s needed for your target screen densities.
- Compress images using Unity’s Sprite (2D and UI) import settings.
- Prefer sliced images (9-slicing) for scalable buttons and panels.
Preview
5. Avoid Complex Layout Hierarchies
Deeply nested UI hierarchies with multiple layout components (like Vertical Layout Groups, Content Size Fitters) quickly become performance culprits, requiring expensive layout rebuilds.
Preview
- Minimize use of dynamic layout components
- Flatten your hierarchy where possible
- Pre-size elements in the editor if possible, rather than letting layouts calculate at runtime
Optimizing UI isn’t just about making things fast—it’s about giving your players a smooth, responsive experience. Apply these techniques, and your Unity games will run smoother, load faster, and keep players engaged. Want to dive deeper? My Master Unity UI course covers all these topics and more!
