Unity UI Toolkit Overview

Introduction to UI Toolkit

• New UI creation and development tool in Unity.
• 3rd generation UI inspired by web technologies (HTML, CSS, JavaScript).
• UXML for structure/layout (like HTML), USS for style (like CSS), C# for interaction (like JavaScript).

Setting Up a New Project

• Create a new project and set up a space-themed background using Particle System.
• Create a UXML file for UI structure.
• Add a UI Document Component to an empty GameObject.
• Connect UXML file to the UI Document.

Panel Settings Asset

• Required for UI rendering; similar to Canvas in UGUI.
• Default settings include:
  • Scale Mode: Set to Constant Pixel Size for fixed resolution (1920x1080).

UI Builder Overview

• Hierarchy Pane: Shows UI elements, not GameObjects.
• Library Pane: Contains UI elements like Label, Button, Toggle.
• Viewport Pane: Displays the UI layout.
• Ensure Unity Default Runtime Theme is selected for runtime consistency.

Creating UI Elements

• Visual Element: Basic building block of UI Toolkit (like GameObject + Image Component in UGUI).
  • Size must be set for visibility; for example, Width and Height set to 300.
• Use percentages for responsive design (e.g., 100% for Width and Height).
• Parent elements manage child alignment and layout through Flex properties.

Layout Management with Flex

• Flex's Direction property sets stacking (Column for vertical, Row for horizontal).
• Align Items and Justify Content adjust spacing and alignment of children.
• Example setup:
  • Top half of the screen: Transparent.
  • Bottom half: White.

Adding and Styling Elements

• Add images and assign names for recognition (e.g., astronaut, robot).
• Use Flex properties to position images at the bottom using Align Items.
• Create Labels and Button at the bottom for text and interaction.
  • Adjust text size, color, and wrapping settings.

Spacing and Margins

• Understand Margin vs Padding:
  • Margin: Space outside the border.
  • Padding: Space inside the border.
• Adjust margins and paddings for better readability and layout.

Fonts in UI Toolkit

• Create Font Assets for regular and bold fonts using Font Asset Creator.
• Apply fonts using the cascade style system from top visual elements to children.

Button Interaction and Styles

• Implement interaction styles for button responses:
  • Inline Styles: Quick but can lead to inconsistency.
  • Style Sheet: Recommended for systematic management and reusability.
  • Use pseudo classes for hover and active states (e.g., increase scale on hover).

Transition Animations

• Apply transition animations for smooth visual feedback on state changes.
• Adjust properties such as Duration, Easing, and Delay for effects.

Conclusion

• Reviewed basic layout management and interaction setup in UI Toolkit.
• Next video will cover advanced UI features like Absolute Positioning and animation through scripting.