Unity UI Development - Easy Learn C#

Introduction to Unity UI

User interfaces are a critical component of any game, providing players with important information, controls, and feedback. Unity offers a powerful and flexible UI system that allows developers to create responsive and visually appealing interfaces for their games.

In this guide, you'll learn:

The basics of Unity's UI system
Creating and organizing UI elements
Working with Canvas, Panels, and Layouts
Implementing responsive UI designs
Animating UI elements
Making UI interactive with C# scripts
Best practices for UI development

Unity UI Fundamentals

Unity's UI system is based on several core components that work together:

Core UI Components:

Canvas: The root container for all UI elements
Canvas Scaler: Controls how UI elements scale with different screen sizes
Graphic Raycaster: Allows UI elements to receive input events
UI Elements: Text, Images, Buttons, Sliders, etc.
Layout Components: Grid Layout, Horizontal/Vertical Layout Group, etc.
Rect Transform: Special transform for UI elements with anchoring and pivots

Setting up a basic UI:

Create a Canvas (GameObject → UI → Canvas)
Choose a Canvas Render Mode (Screen Space - Overlay, Screen Space - Camera, or World Space)
Configure the Canvas Scaler for your target platforms
Add UI elements as children of the Canvas
Organize UI elements with Panels and Layout components
Add functionality with C# scripts

Canvas Render Modes

The Canvas Render Mode determines how UI is displayed relative to your game scene:

Screen Space - Overlay: UI is rendered on top of everything else (common for menus, HUDs)
Screen Space - Camera: UI is rendered from a specific camera's perspective (allows for effects like perspective)
World Space: UI exists in the 3D world (good for in-game interfaces like control panels, speech bubbles)

Creating UI Elements

Unity provides a wide range of UI elements for different needs:

Common UI Elements:

Text: For displaying text content
Image: For displaying sprites and textures
Raw Image: For displaying non-sprite textures
Button: Clickable element with built-in visual states
Toggle: On/off control (checkbox)
Slider: For selecting a value from a range
Scrollbar: For scrolling content
Dropdown: For selecting from a list of options
Input Field: For text input
Scroll View: For scrollable content areas
Panel: Container for organizing UI elements
TextMeshPro: Higher quality text (in TextMeshPro package)

Creating UI elements:

Right-click in the Hierarchy under a Canvas
Select UI and choose the desired element type
Configure the element properties in the Inspector
Position and size the element using the Rect Transform

Working with Rect Transform

The Rect Transform is a special kind of Transform that is designed for UI elements, offering powerful positioning and sizing tools.

Key Rect Transform Concepts:

Anchors: Define how an element's position and size relate to its parent
Pivot: The point around which the element rotates and scales
Anchored Position: Position relative to the anchors
Size Delta: Size adjustment relative to the anchor rectangle
Stretch: Set anchors to opposite edges to make elements stretch with parent

Common anchor presets:

Center: Element stays centered in parent
Top/Bottom/Left/Right: Element sticks to a specific edge
Corners: Element sticks to a specific corner
Stretch Horizontal/Vertical: Element stretches along one axis
Stretch All: Element stretches to fill the parent

Responsive UI Design Tips

Use anchors to create UI that adapts to different screen sizes
Set the Canvas Scaler to "Scale With Screen Size" for consistent UI across devices
Use layout groups to automatically arrange and resize UI elements
Test your UI with different aspect ratios during development
Use the "Safe Area" component for notches and curved screens on mobile devices

Layout Components

Layout components automate the arrangement of UI elements, making it easier to create responsive interfaces.

Common Layout Components:

Horizontal Layout Group: Arranges elements in a row
Vertical Layout Group: Arranges elements in a column
Grid Layout Group: Arranges elements in a grid
Layout Element: Controls how an element behaves within a layout group
Content Size Fitter: Adjusts element size based on its content
Aspect Ratio Fitter: Maintains a specific aspect ratio

Layout group properties:

Padding: Space around the edges of the layout
Spacing: Space between elements
Child Alignment: How children are aligned within the layout
Control Child Size: Whether the layout controls the width/height of children
Child Force Expand: Whether children should expand to fill available space

Interacting with UI through Code

C# scripts can be used to control UI elements and respond to user interactions.

Basic UI Interaction:

using UnityEngine;
using UnityEngine.UI; // Required for UI components
using TMPro; // Required for TextMeshPro components

public class UIController : MonoBehaviour
{
    // References to UI elements
    public Button playButton;
    public Button settingsButton;
    public Button quitButton;
    public Slider volumeSlider;
    public Toggle fullscreenToggle;
    public TextMeshProUGUI scoreText;
    public Image healthBar;
    
    // Game state variables
    private int score = 0;
    private float health = 1.0f;
    
    void Start()
    {
        // Set up button click listeners
        playButton.onClick.AddListener(OnPlayButtonClick);
        settingsButton.onClick.AddListener(OnSettingsButtonClick);
        quitButton.onClick.AddListener(OnQuitButtonClick);
        
        // Set up slider value change listener
        volumeSlider.onValueChanged.AddListener(OnVolumeChanged);
        
        // Set up toggle value change listener
        fullscreenToggle.onValueChanged.AddListener(OnFullscreenToggled);
        
        // Initialize UI elements
        UpdateScoreText();
        UpdateHealthBar();
    }
    
    // Button click event handlers
    void OnPlayButtonClick()
    {
        Debug.Log("Play button clicked!");
        // Load game scene or start game
        // SceneManager.LoadScene("GameScene");
    }
    
    void OnSettingsButtonClick()
    {
        Debug.Log("Settings button clicked!");
        // Show settings panel
        // settingsPanel.SetActive(true);
    }
    
    void OnQuitButtonClick()
    {
        Debug.Log("Quit button clicked!");
        // Quit the game
        #if UNITY_EDITOR
            UnityEditor.EditorApplication.isPlaying = false;
        #else
            Application.Quit();
        #endif
    }
    
    // Slider event handler
    void OnVolumeChanged(float value)
    {
        Debug.Log("Volume changed to: " + value);
        // Update audio volume
        AudioListener.volume = value;
    }
    
    // Toggle event handler
    void OnFullscreenToggled(bool isOn)
    {
        Debug.Log("Fullscreen toggled: " + isOn);
        // Set fullscreen mode
        Screen.fullScreen = isOn;
    }
    
    // Methods to update UI based on game state
    public void AddScore(int points)
    {
        score += points;
        UpdateScoreText();
    }
    
    public void TakeDamage(float damage)
    {
        health = Mathf.Clamp01(health - damage);
        UpdateHealthBar();
        
        if (health <= 0)
        {
            GameOver();
        }
    }
    
    void UpdateScoreText()
    {
        scoreText.text = "Score: " + score;
    }
    
    void UpdateHealthBar()
    {
        // Update the fill amount of the health bar image
        healthBar.fillAmount = health;
        
        // Optional: Change color based on health
        if (health > 0.5f)
        {
            healthBar.color = Color.green;
        }
        else if (health > 0.25f)
        {
            healthBar.color = Color.yellow;
        }
        else
        {
            healthBar.color = Color.red;
        }
    }
    
    void GameOver()
    {
        Debug.Log("Game Over!");
        // Show game over screen
        // gameOverPanel.SetActive(true);
    }
}

Key UI interaction concepts:

Event Listeners: Respond to UI events like clicks and value changes
UI References: Connect script variables to UI elements via the Inspector
State Updates: Update UI elements to reflect game state
Visual Feedback: Change appearance (color, size, etc.) for feedback

Advanced UI Techniques:

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections;

public class AdvancedUIController : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler
{
    public CanvasGroup canvasGroup;
    public RectTransform panel;
    
    // Animation parameters
    public float fadeDuration = 0.5f;
    public float moveDuration = 0.3f;
    public AnimationCurve animationCurve = AnimationCurve.EaseInOut(0, 0, 1, 1);
    
    // Hover effect parameters
    public float hoverScaleAmount = 1.1f;
    public float hoverScaleSpeed = 0.1f;
    
    // Original values
    private Vector2 originalScale;
    private Vector3 originalPosition;
    
    void Start()
    {
        if (panel != null)
        {
            originalScale = panel.localScale;
            originalPosition = panel.localPosition;
        }
    }
    
    // Fade in the UI panel
    public void FadeIn()
    {
        StopAllCoroutines();
        StartCoroutine(FadeCanvasGroup(canvasGroup, 0f, 1f, fadeDuration));
    }
    
    // Fade out the UI panel
    public void FadeOut()
    {
        StopAllCoroutines();
        StartCoroutine(FadeCanvasGroup(canvasGroup, 1f, 0f, fadeDuration));
    }
    
    // Slide the panel in from the right
    public void SlideIn()
    {
        StopAllCoroutines();
        canvasGroup.alpha = 1f;
        StartCoroutine(MovePanel(new Vector3(1000f, 0f, 0f), originalPosition, moveDuration));
    }
    
    // Slide the panel out to the right
    public void SlideOut()
    {
        StopAllCoroutines();
        StartCoroutine(MovePanel(originalPosition, new Vector3(1000f, 0f, 0f), moveDuration));
    }
    
    // Fade coroutine with easing
    IEnumerator FadeCanvasGroup(CanvasGroup cg, float start, float end, float duration)
    {
        float elapsed = 0f;
        
        while (elapsed < duration)
        {
            float normalizedTime = elapsed / duration;
            float easedTime = animationCurve.Evaluate(normalizedTime);
            cg.alpha = Mathf.Lerp(start, end, easedTime);
            
            elapsed += Time.deltaTime;
            yield return null;
        }
        
        cg.alpha = end;
        
        // Disable blocking when fully transparent
        if (end == 0f)
        {
            cg.blocksRaycasts = false;
            cg.interactable = false;
        }
        else
        {
            cg.blocksRaycasts = true;
            cg.interactable = true;
        }
    }
    
    // Move panel coroutine with easing
    IEnumerator MovePanel(Vector3 start, Vector3 end, float duration)
    {
        float elapsed = 0f;
        
        while (elapsed < duration)
        {
            float normalizedTime = elapsed / duration;
            float easedTime = animationCurve.Evaluate(normalizedTime);
            panel.localPosition = Vector3.Lerp(start, end, easedTime);
            
            elapsed += Time.deltaTime;
            yield return null;
        }
        
        panel.localPosition = end;
        
        // Disable interactions if moved off-screen
        if (end.x > 900f)
        {
            canvasGroup.blocksRaycasts = false;
            canvasGroup.interactable = false;
        }
        else
        {
            canvasGroup.blocksRaycasts = true;
            canvasGroup.interactable = true;
        }
    }
    
    // Interface implementations for hover effects
    
    public void OnPointerEnter(PointerEventData eventData)
    {
        StopAllCoroutines();
        StartCoroutine(ScaleElement(originalScale, originalScale * hoverScaleAmount, hoverScaleSpeed));
    }
    
    public void OnPointerExit(PointerEventData eventData)
    {
        StopAllCoroutines();
        StartCoroutine(ScaleElement(panel.localScale, originalScale, hoverScaleSpeed));
    }
    
    public void OnPointerDown(PointerEventData eventData)
    {
        // Pressed effect - scale down slightly
        StopAllCoroutines();
        StartCoroutine(ScaleElement(panel.localScale, originalScale * 0.95f, hoverScaleSpeed * 0.5f));
    }
    
    public void OnPointerUp(PointerEventData eventData)
    {
        // Return to hover scale
        StopAllCoroutines();
        StartCoroutine(ScaleElement(panel.localScale, originalScale * hoverScaleAmount, hoverScaleSpeed));
    }
    
    // Scale element coroutine with easing
    IEnumerator ScaleElement(Vector2 start, Vector2 end, float duration)
    {
        float elapsed = 0f;
        
        while (elapsed < duration)
        {
            float normalizedTime = elapsed / duration;
            float easedTime = animationCurve.Evaluate(normalizedTime);
            panel.localScale = Vector2.Lerp(start, end, easedTime);
            
            elapsed += Time.deltaTime;
            yield return null;
        }
        
        panel.localScale = end;
    }
}

Advanced UI features:

Canvas Group: Controls visibility, interactivity of a group of elements
Animation with Coroutines: Smooth transitions and effects
Interface Callbacks: Respond to different pointer events (hover, click, etc.)
Animation Curves: Custom easing for more natural animations

Creating a Dynamic Inventory System

This example shows how to create a grid-based inventory system that dynamically populates with items.

Inventory UI System:

using UnityEngine;
using UnityEngine.UI;
using TMPro;
using System.Collections.Generic;

public class InventorySystem : MonoBehaviour
{
    // References to UI elements
    public Transform itemsContainer;
    public GameObject itemSlotPrefab;
    public TextMeshProUGUI inventoryTitleText;
    public TextMeshProUGUI descriptionText;
    public Image selectedItemImage;
    
    // Inventory data
    private List<InventoryItem> inventoryItems = new List<InventoryItem>();
    private InventoryItem selectedItem;
    
    // Max inventory size
    public int maxItems = 20;
    
    void Start()
    {
        // Initialize the inventory UI
        InitializeInventory();
        
        // Add some test items
        AddItem(new InventoryItem("Health Potion", "Restores 50 HP", Resources.Load<Sprite>("Items/HealthPotion"), 5));
        AddItem(new InventoryItem("Mana Potion", "Restores 50 MP", Resources.Load<Sprite>("Items/ManaPotion"), 3));
        AddItem(new InventoryItem("Sword", "Deals 10-15 damage", Resources.Load<Sprite>("Items/Sword"), 1));
        
        // Update the UI
        UpdateInventoryUI();
    }
    
    void InitializeInventory()
    {
        // Clear any existing slots
        foreach (Transform child in itemsContainer)
        {
            Destroy(child.gameObject);
        }
        
        // Create empty slots
        for (int i = 0; i < maxItems; i++)
        {
            GameObject slot = Instantiate(itemSlotPrefab, itemsContainer);
            slot.name = "Slot_" + i;
            
            // Store the slot index
            int index = i;
            
            // Add click listener
            Button button = slot.GetComponent<Button>();
            if (button != null)
            {
                button.onClick.AddListener(() => OnSlotClicked(index));
            }
        }
        
        // Clear description
        descriptionText.text = "Select an item to see its description.";
        selectedItemImage.gameObject.SetActive(false);
    }
    
    void UpdateInventoryUI()
    {
        // Update inventory title
        inventoryTitleText.text = "Inventory (" + inventoryItems.Count + "/" + maxItems + ")";
        
        // Update all slots
        for (int i = 0; i < maxItems; i++)
        {
            Transform slot = itemsContainer.GetChild(i);
            Image icon = slot.Find("Icon").GetComponent<Image>();
            TextMeshProUGUI countText = slot.Find("Count").GetComponent<TextMeshProUGUI>();
            
            if (i < inventoryItems.Count)
            {
                // Slot has an item
                InventoryItem item = inventoryItems[i];
                
                // Update icon
                icon.sprite = item.icon;
                icon.enabled = true;
                
                // Update count
                if (item.count > 1)
                {
                    countText.text = item.count.ToString();
                    countText.gameObject.SetActive(true);
                }
                else
                {
                    countText.gameObject.SetActive(false);
                }
            }
            else
            {
                // Empty slot
                icon.enabled = false;
                countText.gameObject.SetActive(false);
            }
        }
    }
    
    void OnSlotClicked(int index)
    {
        if (index < inventoryItems.Count)
        {
            // Select the item
            selectedItem = inventoryItems[index];
            
            // Update description
            descriptionText.text = selectedItem.name + "\n" + selectedItem.description;
            
            // Update selected item image
            selectedItemImage.sprite = selectedItem.icon;
            selectedItemImage.gameObject.SetActive(true);
            
            Debug.Log("Selected: " + selectedItem.name);
        }
        else
        {
            // Deselect
            selectedItem = null;
            descriptionText.text = "Select an item to see its description.";
            selectedItemImage.gameObject.SetActive(false);
        }
    }
    
    public void AddItem(InventoryItem item)
    {
        // Check if we already have this item type (for stackable items)
        for (int i = 0; i < inventoryItems.Count; i++)
        {
            if (inventoryItems[i].name == item.name)
            {
                // Increase count
                inventoryItems[i].count += item.count;
                UpdateInventoryUI();
                return;
            }
        }
        
        // Add new item if we have space
        if (inventoryItems.Count < maxItems)
        {
            inventoryItems.Add(item);
            UpdateInventoryUI();
        }
        else
        {
            Debug.LogWarning("Inventory is full!");
        }
    }
    
    public void RemoveItem(string itemName, int count = 1)
    {
        for (int i = 0; i < inventoryItems.Count; i++)
        {
            if (inventoryItems[i].name == itemName)
            {
                // Decrease count
                inventoryItems[i].count -= count;
                
                // Remove item if count reaches 0
                if (inventoryItems[i].count <= 0)
                {
                    inventoryItems.RemoveAt(i);
                    
                    // Clear selection if it was the selected item
                    if (selectedItem != null && selectedItem.name == itemName)
                    {
                        selectedItem = null;
                        descriptionText.text = "Select an item to see its description.";
                        selectedItemImage.gameObject.SetActive(false);
                    }
                }
                
                UpdateInventoryUI();
                return;
            }
        }
    }
    
    public void UseSelectedItem()
    {
        if (selectedItem != null)
        {
            Debug.Log("Using: " + selectedItem.name);
            
            // Implement item usage logic here
            // For example:
            if (selectedItem.name == "Health Potion")
            {
                // Heal the player
                Debug.Log("Healed 50 HP");
            }
            
            // Decrease item count
            RemoveItem(selectedItem.name, 1);
        }
    }
    
    // Item drop for drag-and-drop functionality
    public void DropSelectedItem()
    {
        if (selectedItem != null)
        {
            Debug.Log("Dropped: " + selectedItem.name);
            
            // Implement drop logic here
            // For example, instantiate a 3D model of the item in the game world
            
            // Remove from inventory
            RemoveItem(selectedItem.name, 1);
        }
    }
}

// Class to represent an inventory item
[System.Serializable]
public class InventoryItem
{
    public string name;
    public string description;
    public Sprite icon;
    public int count;
    
    public InventoryItem(string name, string description, Sprite icon, int count = 1)
    {
        this.name = name;
        this.description = description;
        this.icon = icon;
        this.count = count;
    }
}

Key features of this inventory system:

Dynamic item slots created at runtime
Item stacking for identical items
Selection and detailed item view
Add/remove item functionality
Use/drop item actions

UI Animation

Unity provides several ways to animate UI elements:

Animation System: Use Unity's Animation system with keyframes
Animator Controller: Create state machines for complex UI behavior
Coroutines: Write custom animation code using coroutines
DOTween: A popular third-party tweening library for smooth animations
UI Animation Components: Simple animations with built-in components

Creating a Simple UI Animation Controller:

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class UIAnimator : MonoBehaviour
{
    public float pulseMagnitude = 0.1f;
    public float pulseSpeed = 2f;
    
    public float rotationSpeed = 45f;
    
    public float bounceMagnitude = 20f;
    public float bounceSpeed = 2f;
    
    private RectTransform rectTransform;
    private Vector3 originalScale;
    private Vector3 originalPosition;
    
    void Start()
    {
        rectTransform = GetComponent<RectTransform>();
        originalScale = rectTransform.localScale;
        originalPosition = rectTransform.anchoredPosition;
    }
    
    public void StartPulse()
    {
        StopAllCoroutines();
        StartCoroutine(PulseAnimation());
    }
    
    public void StartRotation()
    {
        StopAllCoroutines();
        StartCoroutine(RotationAnimation());
    }
    
    public void StartBounce()
    {
        StopAllCoroutines();
        StartCoroutine(BounceAnimation());
    }
    
    public void StopAnimation()
    {
        StopAllCoroutines();
        rectTransform.localScale = originalScale;
        rectTransform.anchoredPosition = originalPosition;
        rectTransform.localRotation = Quaternion.identity;
    }
    
    IEnumerator PulseAnimation()
    {
        while (true)
        {
            float scale = 1f + pulseMagnitude * Mathf.Sin(Time.time * pulseSpeed);
            rectTransform.localScale = originalScale * scale;
            yield return null;
        }
    }
    
    IEnumerator RotationAnimation()
    {
        while (true)
        {
            rectTransform.Rotate(0, 0, rotationSpeed * Time.deltaTime);
            yield return null;
        }
    }
    
    IEnumerator BounceAnimation()
    {
        while (true)
        {
            float yOffset = bounceMagnitude * Mathf.Sin(Time.time * bounceSpeed);
            rectTransform.anchoredPosition = originalPosition + new Vector3(0, yOffset, 0);
            yield return null;
        }
    }
}

Best Practices for UI Development

Organize your UI hierarchy with meaningful names and structure
Use prefabs for reusable UI elements and components
Design for multiple screen sizes using proper anchoring and layout
Create a consistent visual style with shared colors, fonts, and spacing
Ensure UI is accessible with readable text sizes and good contrast
Provide clear visual feedback for interactive elements
Optimize UI performance by minimizing overdraw and canvas rebuilds
Use TextMeshPro for high-quality text rendering
Test UI on target devices to ensure proper display and interaction
Create a UI manager to handle UI state and transitions

UI Performance Tips

Use multiple canvases to separate static and dynamic UI elements
Set "Pixel Perfect" on the Canvas Scaler to avoid blurry UI
Use sprite atlases to reduce draw calls
Minimize nested layout groups and content size fitters
Avoid excessive nesting of UI elements
Use object pooling for dynamically created UI elements
Disable Canvas components when not in use to save processing power