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.

Learn layout step in the Unity UI toolkit by sketching a UI in xml and UI builder, then align the visual hierarchy with containers, images, labels, and a play button.

Discover styling in Unity UI with style sheets (USS) by creating classes like Viking card, Viking image, and Viking label to deliver consistent size, images, and font across multiple elements.

Explore how the UI builder inside the Unity editor encodes layout, properties, and styling into XML, then attach functionality with a Unity script via a UI document.

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 how UXML reflects the UI Builder’s visual tree, compare editing in code versus UI Builder, and follow the recommended workflow to generate XML and edit sparingly.

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.

Learn to use selectors to style UI elements by combining class, id, and type selectors; apply visual element styling, margins, and radius while understanding which selector wins when rules conflict.

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.

Explore how flex basis, shrink, and grow interact to distribute space on the main axis through practical patterns. Apply these concepts using the UI toolkit and their container relationships.

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.

Explore the slider as a complex UI element built from multiple subcomponents, learn how its internal hierarchy is created during rendering, and adjust range, values, and visibility in UI Builder.

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.

Learn to create reusable templates in Unity UI Toolkit using UI Builder, saving a card as a template to the resources and XML files, and reusing it across screens.

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.

Learn to find a single element in UI Toolkit using Q, compare it with the query builder, and select by name, class, or type for efficient single-element access.

Query a subtree of the UI hierarchy from a root or container element. Select by name, class, or index and iterate with for each to manipulate visuals.

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.

Explore how event propagation moves through a UI hierarchy—from trickle down to the target phase and bubble up—and how current target and event targets evolve during a click.

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.