Modern Unity UI with UI Toolkit

Explore the Unity UI Toolkit workflow, its three parts, produced files, and how to connect them to Unity games, with a web style HTML, CSS, and JavaScript analogy.

Layout the UI by adding elements, arranging them in a hierarchy, and setting properties; save your work as an XML file that captures the UI toolkit layout and hierarchy.

Connect UI Toolkit layouts to a Unity scene by attaching a UI document, selecting the layout as source asset, and adding a script to enable button functionality in play mode.

Explore how posters summarize each section and guide you to skip non-crucial lessons, while recognizing three learner types and crucial lessons introducing new UI Toolkit concepts.

Explore why Unity uses XML files to store UI layout and how a visual tree maps to XML, enabling a compact, hierarchical representation of nested elements for scalable UI design.

Learn how visual trees model UI as parent–child hierarchies to enable efficient traversal, reuse of subtrees, and clear rendering of overlapping elements in Unity's UI toolkit.

Learn to style Unity UI toolkit elements with UI Builder: edit, save, and reuse styles, extract inline styles to new classes, and apply via drag-and-drop and selectors.

Explore selector precedence and specificity in UI Toolkit styling. See how type, class, and ID selectors compete, and how the wildcard star selector fits in and influences sizes.

Unleash stylesheet superpowers in unity ui toolkit with type selectors, id selectors, and child selectors. Color labels and demonstrate direct child and any depth selectors, highlighting specificity and inline styles.

Master pseudo selectors, especially hover, and test them in preview mode in Unity UI Toolkit. Learn direct child and descendant selectors and how style sheets shape the UI workflow.

Bring together a simple c sharp script with the Unity UI Toolkit to give a button a basic function and preview the first real runtime UI in the game view.

Learn how flexbox relies on the main axis, cross axis, and flex direction to apply axis-specific rules in a 2d layout, with naming that can redefine orientation.

Learn how Unity's flex direction switches the main axis between column and row, guiding element alignment along the main axis and shaping the cross axis through container rules.

Explore how flex direction switches the main axis between row and column in the UI Builder. Observe how row, column, and reverse settings affect item order and alignment.

Master flex basis, shrink, and grow as a unified trio in flexbox, understanding how basis acts like width on the main axis, auto behavior, and values like 200px or 300px.

Explains how flex basis in flexbox shapes item sizes under constraints, comparing pixel, percentage, and auto values, and shows how content and neighboring items determine sizes through flex space weight.

Examine how the three properties shrink, grow, and flex basis interact to adjust element sizes as the container changes, shrinking or growing proportionally until reaching the flex basis threshold.

Understand how flex grow values govern relative resizing, using unitless ratios where grow two expands twice as much as grow one, and grow three expands three times as much.

Override flexbox layouts by using absolute and relative positioning to place overlays, pop-up windows, and draggable elements, stacking them above other content without affecting the underlying layout.

Set up a multi-panel Unity UI with UI Toolkit, arranging four panels in a row with specific flex basis values, margins, and padding, and style them via a style sheet.

Learn to add basic functionality to a button in Unity UI Toolkit by wiring a C# script to the UI document and make the box resize randomly on click.

Explore text labels in Unity UI Toolkit, change fonts via font assets or ttf imports, enable rich text, and update label text with scripts.

Practice simple controls in Unity UI Toolkit by setting up text and images, configuring fonts from Google Fonts, and adjusting a two-panel layout with margins and radii.

Learn to use the Unity UI Toolkit documentation to quickly identify properties and methods by tracing inheritance from visual element to button.

Learn to inspect and manipulate visual elements in Unity UI Toolkit scripts, including root element, container, layout properties, and runtime debugging to see elements after rendering.

Load and instantiate templates at runtime with Unity UI Toolkit by scripting, placing template assets in a resources folder and adding instances to a card container.

Load assets in scripts by importing images as sprites from the resources folder, apply them to avatar visuals, and dynamically load style sheets and borders using UI toolkit templates.

Create and reuse templates to represent repeating UI elements, such as a middle batch badge, with locked and unlocked variants, adjust alignment and padding, and apply templates across the project.

Explore how to use the ui toolkit query builder with visual elements to select by type, class, and hierarchy. See live results in the game view during runtime.

Explore how the UI toolkit's query builder selects single elements or lists with name and off type filters, and how chaining accumulates results, prompting dedicated builders and Q convenience classes.

Master the where query in UI toolkit to filter elements with a lambda predicate, enabling labels by text, colors, sizes, and custom properties, with chained selectors.

Explore how Unity UI Toolkit emits events from sliders and pointer interactions, including on change handlers and lambda usage, and extract previous and new values, pointer position, and geometry.

Master event propagation in Unity UI by following trickle down, target, and bubble up phases. See yellow, orange, and blue demonstrate the flow from outer container to target.