Unity UI - User Interface Systems

Overview

Unity UI systems covering both UI Toolkit (modern) and UGUI (Canvas-based legacy).

Foundation Required: unity-csharp-fundamentals (TryGetComponent, FindAnyObjectByType, null-safe coding)

Core Topics:

• UI Toolkit (UIElements) for editor and runtime
• UGUI (Canvas) for game UI
• Responsive layouts and anchors
• Event systems
• UI performance optimization
• Data binding patterns

Quick Start

UGUI Button

using UnityEngine.UI;

public class UIController : MonoBehaviour
{
    [SerializeField] private Button mActionButton;
    [SerializeField] private Text mStatusText;

    void Start()
    {
        mActionButton.onClick.AddListener(OnButtonClick);
    }

    void OnButtonClick()
    {
        mStatusText.text = "Button clicked!";
    }
}

UI Toolkit (Runtime)

using UnityEngine.UIElements;

public class UIController : MonoBehaviour
{
    void OnEnable()
    {
        UIDocument uiDocument;
        if (TryGetComponent(out uiDocument))
        {
            VisualElement root = uiDocument.rootVisualElement;
            Button button = root.Q<Button>("action-button");
            button.clicked += OnButtonClick;
        }
    }

    void OnButtonClick()
    {
        Debug.Log("Button clicked!");
    }
}

UI Systems Comparison

Canvas Optimization (UGUI)

// Separate static and dynamic UI into different canvases
// Static canvas: rarely changes
// Dynamic canvas: updates frequently

// Disable raycasting on non-interactive elements
[SerializeField] private Image mBackground;

void Start()
{
    mBackground.raycastTarget = false; // Not clickable
}

// Use CanvasGroup for fade effects (TryGetComponent for null-safe access)
CanvasGroup canvasGroup;
if (panel.TryGetComponent(out canvasGroup))
{
    canvasGroup.alpha = 0.5f; // Fade without rebuilding Canvas
}

Responsive Layout

// Use anchors for responsive design
// Anchor presets: Stretch, Top-Left, Center, etc.

// Canvas Scaler settings (TryGetComponent pattern)
CanvasScaler scaler;
if (TryGetComponent(out scaler))
{
    scaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
    scaler.referenceResolution = new Vector2(1920, 1080);
    scaler.matchWidthOrHeight = 0.5f; // Balance between width/height
}

Reference Documentation

[UI Systems Reference](references/ui-systems.md)

Comprehensive UI guide:

• UI Toolkit vs UGUI decision guide
• Layout and styling patterns
• Performance optimization techniques

Best Practices

1. Separate canvases: Static vs dynamic content
2. Disable raycasts: On non-interactive elements
3. Use CanvasGroup: For fade effects without rebuild
4. Atlas textures: Pack UI sprites for batching
5. Hide instead of destroy: Pool UI elements
6. Test multiple resolutions: Ensure responsive design
7. Profile UI: Check Canvas rebuild overhead