
Discover Unity's UI toolkit, a brand-new UI system in 2022 releases, that isolates UI, separates layout, styling, and functionality, and adds Flexbox layout and a robust event system.
Discover how Unity UI toolkit compares to older UI systems and why it’s the recommended approach for new UI development in game projects.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
This course is a deep dive into Unity's UI Toolkit. You will learn most of the components that make up UI Toolkit and be able to create complex UI Systems for your games or apps.
This course uses a mix of theory and practice. We will create dozens of little UI-Components and examples. Furthermore, we will have a course project on which we will practice what we learned in the particular chapters. Finally, we will bring it all together and create a fully functional UI-based game.
While this course is not explicitly covering Editor Scripting most of the content in the course will also apply to it.
Here are some of the topics that we will cover:
Understanding UXML and USS Files
Understand the basic building blocks of UI Toolkit. We will talk about the concept of a visual tree and why it's a good idea to separate structure, styling and behavior.
Layouts with FLEXBOX
UI Toolkit uses the Flexbox system which is also used in web technologies.
Templates
We will learn how we can reuse pieces of our layout with templates.
Events and Event Propagation
No UI System can function without events. UI Toolkit has its own Event-System with modern features like event-propagation which we can use to our advantage.
UQuery
Unity is still a game engine, so more often than not most of your work will be done through scripts. U need an efficient way to connect your scripts and your UI and manipulate certain elements of your UI. In order to do that you first need to find those elements. UQuery provides a comfortable way how you can do that.
Data Binding
While for editor scripting there is already a system in place which helps you bind your data to your components, this is not the case for runtime. Therefore we will look at some tools and techniques how you can do this manually.
Custom Components
UI Toolkit has a library of several build-in controls, but obviously, those can not cover every use case that you might come across. In this section, we will see how to create our own controls and thereby create our own little library of reusable UI Elements.
Manipulators
One rule of good software development is the separation of concerns. In this section, we will learn how we can group the behavior of particular elements into manipulators.
and much more...