UI Toolkit: New and updated demos for programmers and artists

We’re happy to announce the availability of two new and updated educational samples to support the different perspectives of programmers and artists/designers in creating professional in-game UI with UI Toolkit.

UI Toolkit provides a set of tools for developing performant and scalable runtime UI for games and applications, custom extensions for the Unity Editor, and runtime debugging tools. Its core concepts and workflows will be familiar to you if you have experience developing web pages or applications.

Our aim with these educational samples is to help you build rich, responsive, and scalable UIs with UI Toolkit. The new demo QuizU, for programmers, and the updated UI Toolkit Sample – Dragon Crashers for artists and designers, are two very different projects, each with extensive supporting instructional content.

QuizU is a programmer-centric sample of an interactive quiz application that shows how UI Toolkit components can work together, leveraging various design patterns, in a small but functional game with multiple screens and game flow management.

The demo consists of two parts: 10 small, digestible samples that demonstrate different aspects of UI Toolkit, and a mini quiz game that consolidates many of the techniques from the 10 scenes into a complete project.

The minimalist visual style of the mini-game lets you focus on the mechanics of the UI implementation, without getting lost in the design details.

The quiz game illustrates how to use the state pattern for game flow, manage multiple menu screens, use the model-view-presenter pattern, implement event handling in UI Toolkit, and more. The gameplay is a very simple quiz game mechanic but the intent is to show and teach implementation techniques that you can use in your own projects.

By integrating some of these design patterns consistently into your project, you can improve code readability and make your codebase cleaner. Design patterns not only reduce refactoring and the time spent testing, they can speed up development processes for your entire team.

Additionally, event-driven architecture, whereby game components communicate with each other through events, promotes loose coupling for scalability and testability.

The second part of the demo consists of 10 small demo scenes. Each demo scene represents a specific technique or feature. Consider them as a set of recipes to inspire and guide you as you evaluate UI Toolkit for your next project. Here's a brief sampling of the UI Toolkit features and techniques the demo scenes illustrate:

• UXML and Visual Trees: UXML files form a hierarchical structure of UI elements. These visual trees serve as a blueprint for your user interface.
• Flexbox: The Flexible Box Layout Model (Flexbox) provides an efficient layout model for arranging UI elements dynamically within a container.
• Unity Style Sheets (USS): USS allows developers to customize UI elements with predefined styles. Reskinning your UI is just a matter of swapping style sheets.
• UQuery: UQuery simplifies the process of searching through a complex hierarchy of UI elements, enabling seamless navigation to specific UI components within the visual tree.
• Pseudo-classes: Pseudo-classes can be used to create interactive and animated UI elements with minimal extra code, adding extra “juice” to your visual interface (e.g., enlarging a button when hovering over it or changing a text field color after selection).
• UI Toolkit Event System: UI Toolkit has its own event system, designed to handle your UI's clicks, changes, and pointer input, even across complex hierarchies.
• Manipulators: Encapsulating related event callbacks into a single class, a manipulator promotes reusability and makes it easier to define user interactions (e.g., a click-and-drag manipulator for an inventory system, a gesture manipulator for a pinch-to-zoom effect, etc.).
• Custom Controls: The demo shows how to define and instantiate custom VisualElement through UxmlFactory and UxmlTraits classes. These custom controls can then be reused through scripts or the UI Builder.

We recommend that you download QuizU using Unity 2022 LTS. You can also follow along in our series of articles, published on Unity Discussions, that accompany the demo. The articles are here:

• Welcome to the new UI Toolkit sample project QuizU
• QuizU: State pattern for game flow
• Managing menu screens in UI Toolkit
• The Model View presenter Pattern
• Event handling in UI Toolkit
• UI Toolkit performance tips

In September 2022, we launched UI Toolkit Sample – Dragon Crashers (you can read the launch blog post). This demo of a full-featured interface over a slice of the 2D mini RPG project Dragon Crashers, shows you techniques for leveraging UI Toolkit in your own applications. It’s the companion piece to the e-book User interface design and implementation in Unity, also released in late 2022.

You can now download a new version of UI Toolkit Sample – Dragon Crashers for Unity 2022 LTS. The improvements and updates in this latest version include:

• Support for runtime landscape and portrait screen modes through themes and the GeometryChangedEvent in UI Toolkit
• Implementation of the SafeArea API to contain UI functionality within the usable screen area of a device
• Increased fps limit for mobile devices to 60 fps
• Refactored, simplified selectors and USS stylesheets
• Higher resolution icons
• Improved fixed VFX spawning position for different screen ratios and some cursor inconsistencies
• Refactored design patterns for cleaner UI architecture
• New learning content provided via the Tutorial Inspector window

We also added a user guide for the updated project. This is in response to feedback we received from users who asked for better instructional content to help them understand the techniques and features used in the demo.

Finally, a video walkthrough of the project is now available to help you navigate through the demo. Check it out:

We hope you’ll pick up many useful tips with QuizU and the updated UI Toolkit Sample – Dragon Crashers. You’ll find all of Unity’s advanced e-books for programmers, artists, technical artists, and designers in the Unity best practices hub.