Unity UI Toolkit Overview

Introduction to UI Toolkit

• New UI creation and development tool in Unity.
• Third generation UI system, inspired by web technologies.
• Uses UXML (structure/layout), USS (style), and C# (behavior like JavaScript).

Creating a Simple UI

1. Project Setup

   • Create a new project and prepare a space-themed scene.

2. Creating UXML File

   • Contains information about UI structure and layout.
   • Create an empty GameObject, add UI Document Component, and connect UXML file.
   • Create a Panel Settings Asset (similar to Canvas in UGUI).
     • Important properties: Scale Mode (select Constant Pixel Size for fixed resolution).

3. Using UI Builder

   • Open UXML file in UI Builder.
   • Hierarchy pane shows UI elements; Library pane shows available UI elements (Label, Button, Toggle).
   • Ensure Unity Default Runtime Theme is selected.

Designing the UI

• Creating Visual Elements

  • Visual Element is the basic building block (similar to HTML 'div').
  • Set properties in Inline Styles (size, color, layout).
  • Use percentages for responsive design.

• Layout Management

  • Elements stacked based on Flex properties (similar to CSS Flexbox).
  • Align Items and Justify Content control positioning.
  • Use ‘Column’ for vertical layout, ‘Row’ for horizontal.

• Adding Content

  • Add images (astronaut and robot) to Visual Elements, apply Flex properties to manage layout.
  • Add Labels and Buttons to the UI.
  • Use styles for text (font size, wrapping).

Spacing and Styling Elements

• Margin and Padding

  • Margin: space outside border; Padding: space inside border.
  • Use these properties to create proper spacing around elements.

• Button Styling

  • Create a rounded button by specifying Radius in USS.
  • Use Inline Styles initially, but recommend using a style sheet for consistency.

Working with Fonts

• Create Font Assets for regular and bold fonts using Font Asset Creator.
• Apply fonts in UI Builder or cascade styles from top Visual Element.

Making UI Interactive

• Button Interactions
  • Add responsiveness to buttons using hover and active pseudo classes.
  • Create transition animations for property changes in button states (scale changes, color changes).
  • Use the Inspector to manage styles and transitions effectively.

Conclusion

• UI Toolkit allows for systematic management of styles using style sheets, simplifying the process of maintaining consistency across UI elements.
• The next session will cover advanced UI features like Absolute Positioning and UI animations via scripting.