🎮

Unity UI Toolkit: Complete Guide

May 3, 2025

Unity UI Toolkit Overview

Introduction to UI Toolkit

  • Unity's 3rd generation UI system.
  • Inspired by web technologies (HTML, CSS, JavaScript).
  • New languages used:
    • UXML: Similar to HTML for structure/layout.
    • USS: Similar to CSS for styling.
    • C#: Functions like JavaScript.

Creating a Simple UI in Unity

Project Setup

  1. Create a new project and scene.
  2. Prepare a space-themed background using a Particle System.

UXML File Creation

  • Create a UXML file for UI structure/layout.
  • Add a UI Document Component to an empty GameObject.
    • Connect UXML file to the Source Asset field.
  • Create Panel Settings Asset to define UI rendering settings (similar to Canvas in UGUI).
    • Set Scale Mode to Constant Pixel Size for a fixed resolution of 1920x1080.

UI Builder Overview

  • Hierarchy Pane: Displays UI structure (different from editor's Hierarchy).
  • Library Pane: Shows available UI elements (Label, Button, Toggle, etc.).
  • Viewport Pane: Preview UI in action.
    • Ensure Unity Default Runtime Theme is selected for runtime appearance.

Creating Visual Elements

  • Drag a Visual Element from Library to Hierarchy:
    • Acts like UGUI’s GameObject and Image Component.
    • Set background color and size in Inline Styles.
  • Use percentages for size to make it responsive to resolution changes.
  • Change Flex properties to manage layout (Column or Row).

Organizing UI Layout

  • Create parent/child relationships for UI elements:
    • Manage alignment and spacing using Align Items and Justify Content.
  • Add visual elements like images and buttons to create a cohesive design.

Typography and Fonts

  • Font Asset Creation: Use Font Asset Creator for regular and bold fonts.
  • Apply fonts easily with cascade style system.
  • Change font styles for multiple UI elements at once by applying to parent visual elements.

Button Interaction and Styles

  • Add interactivity to buttons using styles and style sheets.
  • Inline Styles vs. Style Sheets:
    • Inline Styles are quick but less consistent.
    • Style Sheets are recommended for systematic management.
  • Create a style class for buttons to maintain a consistent look.

Pseudo Classes and Visual Feedback

  • Use pseudo classes for hover (mouse over) and active (clicked) states.
    • Define styles for different states using colon syntax (e.g., .button:hover).
  • Transition Animation: Animate property changes during state transitions.

Conclusion

  • Summary of creating a UI with UI Toolkit and the importance of layout, typography, and interactivity.
  • Next video will cover creating a bottom sheet using Absolute Positioning and scripting for animations.

Full transcript