🎮

Overview of Unity's UI Toolkit

May 3, 2025

Unity UI Toolkit Overview

Introduction

  • Demonstration of Unity's new UI creation and development tool: UI Toolkit
  • Aimed at UI artists and those unfamiliar with the toolkit
  • 3rd generation UI inspired by web technology
    • Similar languages:
      • UXML: Structure and layout (like HTML)
      • USS: Styling (like CSS)
      • C#: Logic (like JavaScript)

Creating a Simple UI

  1. Create New Project & Scene
    • Space-themed background using Particle System.
  2. Create UXML File
    • Contains UI structure and layout.
  3. Scene Settings
    • Create an empty GameObject and add a UI Document Component.
    • Connect UXML file to Source Asset field.
    • Create a Panel Settings Asset to define UI rendering.
    • Set Scale Mode to Constant Pixel Size for fixed resolution (1920 x 1080).

UI Builder Interface

  • Hierarchy Pane: Shows UI elements, unlike the editor's GameObjects.
  • Library Pane: Contains UI elements (e.g., Label, Button, Toggle).
  • Viewport Pane: Displays the UI in action.
    • Check Unity Default Runtime Theme for accurate runtime appearance.
    • Match screen size in Inspector and enable Match Game View for full-screen UI.

Building the UI

  • Use Visual Elements as fundamental building blocks (similar to HTML's div).
    • Set properties like size and color in Inline Styles.
    • Example: Add a red square by setting width and height to 300.
    • Change size to cover the entire screen using percentages (100%).
    • Use Flex layout properties to organize elements (vertical or horizontal stacking).

Layout Management

  1. Parent and Child Elements
    • Set Align Items and Justify Content properties.
    • Manage spacing with Padding and Margin:
      • Margin: Space outside the border.
      • Padding: Space inside the border.
  2. Creating Sections
    • Divide screen into top and bottom sections.
    • Add images (e.g., astronaut and robot) with Flex layout for arrangement.

Typography and Fonts

  • Use Font Asset Creator for regular and bold fonts.
  • Apply fonts using Font Asset field in the Inspector.
  • Utilize cascading styles: apply fonts at the top node to affect all child elements.

Enhancing UI Interactivity

  1. Button Interaction
    • Create hover and active states for buttons using pseudo-classes (e.g., :hover and :active).
  2. Transition Animations
    • Use Transition Animation settings to create smooth state changes.
    • Example settings: Duration (0.5s), Easing (EaseOutElastic).
    • Adjust for smoother transitions (0.1s duration, 5% scale increase).

Conclusion

  • Basic layout creation and styling with the UI Toolkit covered.
  • Next video: Creating a bottom sheet using Absolute Positioning and animating UI elements through scripting.

Key Takeaway: The UI Toolkit combines web development principles with Unity's capabilities for a modern UI creation experience.

Full transcript