Search Unity

Try the new UI Toolkit sample – now available on the Asset Store

September 9, 2022 in Games | 14 min. read
UI Toolkit sample – Dragon Crashers, now available in the Asset Store. (Representative image, hero.)
UI Toolkit sample – Dragon Crashers, now available in the Asset Store. (Representative image, hero.)

In Unity 2021 LTS, UI Toolkit offers a collection of features, resources, and tools to help you build and debug adaptive runtime UIs on a wide range of game applications and Editor extensions. Its intuitive workflow enables Unity creators in different roles – artists, programmers, and designers alike – to get started with UI development as quickly as possible.

See our earlier blog post for an explanation of UI Toolkit’s main benefits, such as enhanced scalability and performance, already being leveraged by studios like Mechanistry for their game, Timberborn.

While Unity UI remains the go-to solution for positioning and lighting UI in a 3D world, UI Toolkit for runtime UI is recommended as of Unity 2021 LTS. It’s particularly effective for Screen Space – Overlay UI, and scales well on a variety of screen resolutions.

That’s why we’re excited to announce two new learning resources to better support UI development with UI Toolkit:

  • UI Toolkit sample – Dragon Crashers: The demo is now available to download for free from the Asset Store.
  • User interface design and implementation in Unity: This free e-book will be available in the coming weeks. Preregister here to receive a copy once it launches.

Read on to learn about some key features part of the UI Toolkit sample project.

This content is hosted by a third party provider that does not allow video views without acceptance of Targeting Cookies. Please set your cookie preferences for Targeting Cookies to yes if you wish to view videos from these providers.

UI Toolkit Sample – Dragon Crashers

A slice of gameplay with full-featured UI design

The UI Toolkit sample demonstrates how you can leverage UI Toolkit for your own applications. This demo involves a full-featured interface over a slice of the 2D project Dragon Crashers, a mini RPG, using the Unity 2021 LTS UI Toolkit workflow at runtime.

Wireframe view of UI Toolkit demo project, Dragon Crashers

Some of the actions illustrated in the sample project show you how to:

  • Style with selectors in Unity style sheet (USS) files and use UXML templates
  • Create custom controls, such as a circular meter or tabbed views
  • Customize the appearance of elements like sliders and toggle buttons
  • Use Render Texture for UI overlay effects, USS animations, seasonal themes, and more

To try out the project after adding it to your assets, enter Play mode. Please note that UI Toolkit interfaces do not appear in the Scene view. Instead, you can view them in the Game view or UI Builder.

The menu on the left helps you navigate the modal main menu screens. This vertical column of buttons provides access to the five modal screens that comprise the main menu (they stay active while switching between screens).

While some interactivity is possible, such as healing the characters by dragging available potions in the scene, gameplay has been kept to a minimum to ensure continued focus on the UI examples.

UI for inventories, characters, in-game purchases, and more

Let’s take a closer look at the UIs in the menu bar:

  • The home screen serves as a landing pad when launching the application. You can use this screen to play the game or receive simulated chat messages.
UI Toolkit demo project, Dragon Crashers, home screen
The home screen
  • The character screen involves a mix of GameObjects and UI elements. This is where you can explore each of the four Dragon Crashers characters. Use the stats, skills, and bio tabs to read the specific character details, and click on the inventory slots to add or remove items. The preview area shows a 2D lit and rigged character over a tiled background.
UI Toolkit demo project, Dragon Crashers, character screen
The character screen
  • The resources screen links to documentation, the forum, and other resources for making the most of UI Toolkit.
UI Toolkit demo project, Dragon Crashers, resources screen
The resources screen
  • The shop screen simulates an in-game store where you can purchase hard and soft currency, such as gold or gems, as well as virtual goods like healing potions. Each item in the shop screen is a separate VisualTreeAsset. UI Toolkit instantiates these assets at runtime; one for each ScriptableObject in the Resources/GameData.
UI Toolkit demo project, Dragon Crashers, shop screen
The shop screen
  • The mail screen is a front-end reader of fictitious messages that uses a tabbed menu to separate the inbox and deleted messages.
UI Toolkit demo project, Dragon Crashers, messages screen
The mail screen
  • The game screen is a mini version of the Dragon Crashers project that starts playing automatically. In this project, you’ll notice a few revised elements with UI Toolkit, such as a pause button, health bars, and the capacity to drag a healing potion element to your characters when they take damage.
UI Toolkit demo project, Dragon Crashers, game screen
The game screen

Amping up the UI with UI Toolkit

UI Toolkit enables you to build stable and consistent UIs for your entire project. At the same time, it provides flexible tools for adding your own design flourishes and details to further flesh out the game’s theme and style.

Let’s go over some of the features used to refine the UI designs in the sample:

  • Render Textures: UI Toolkit interfaces are rendered last in the render queue, meaning you can’t overlay other game graphics on top of a UI Toolkit UI. Render Textures provide a workaround to this limitation, making it possible to integrate in-game effects into UI Toolkit UIs. While these effects based on Render Textures should be used sparingly, you’ll still be able to afford sharp effects within the context of a fullscreen UI, without running gameplay. The following images show a number of Render Textures from the demo.
Effects created with Render Textures: The top images show how the animated frame, made of particle effects, is captured into a Render Texture in UI Builder, whereas the bottom-left image shows an effect that is triggered when a character is upgraded, and the bottom-right frame depicts an animated avatar.
Effects created with Render Textures: The top images show how the animated frame, made of particle effects, is captured into a Render Texture in UI Builder, whereas the bottom-left image shows an effect that is triggered when a character is upgraded, and the bottom-right frame depicts an animated avatar.
  • Themes with Theme style sheets (TSS): TSS files are Asset files that are similar to regular USS files. They serve as a starting point for defining your own custom theme via USS selectors as well as property and variable settings. In the demo, we duplicated the default theme files and modified the copies to offer seasonal variations.
From the Settings menu, available via the cog icon at the top-right corner, you can swap the Theme style sheet of the runtime project for a Christmas or Halloween theme.
From the Settings menu, available via the cog icon at the top-right corner, you can swap the Theme style sheet of the runtime project for a Christmas or Halloween theme.
  • Custom UI elements: Since designers are trained to think outside the box, UI Toolkit gives you plenty of room to customize or extend the standard library. The demo project highlights a few custom-built elements in the tabbed menus, slide toggles, and drop-down lists, plus a radial counter to demonstrate what UI artists are capable of alongside developers.
The upcoming e-book explains how many of these controls were customized. You can also find details on how to create a custom tabbed view via Unity Documentation.
The upcoming e-book explains how many of these controls were customized. You can also find details on how to create a custom tabbed view via Unity Documentation.
  • USS transitions for animated UI state changes: Adding transitions to the menu screens can polish and smooth out your visuals. UI Toolkit makes this more straightforward with the Transition Animations property, part of the UI Builder’s Inspector. Adjust the Property, Duration, Easing, and Delay properties to set up the animation. Then simply change styles for UI Toolkit to apply the animated transition at runtime.
The menu bar buttons and icons animate to Pointer Click Events.
The menu bar buttons and icons animate to Pointer Click Events.
  • Post-processing volume for a background blur: A popular effect in games is to blur a crowded gameplay scene to draw the player’s attention to a particular pop-up message or dialog window. You can achieve this effect by enabling Depth of Field in the Volume framework (available in the Universal Render Pipeline).
The Volume framework facilitates the creation of this blurred image effect behind the pop-up: Post-processing can be resource intensive, but if you enable such effects during a pause in the game, for example, they shouldn’t impact gameplay performance.
The Volume framework facilitates the creation of this blurred image effect behind the pop-up: Post-processing can be resource intensive, but if you enable such effects during a pause in the game, for example, they shouldn’t impact gameplay performance.

An organized project helps drive creativity

We made sure that efficient workflows were used to fortify the UI. Here are a few recommendations for keeping the project well-organized:

  • Consistent naming conventions: It’s important to adopt naming conventions that align with your visual elements and style sheets. Clear naming conventions not only maintain the hierarchy’s organization in UI Builder, they make it more accessible to your teammates, and keep the code clean and readable. More specifically, we suggest the Block Element Modifier (BEM) naming convention for visual elements and style sheets. Just at a glance, an element’s BEM naming can tell you what it does, how it appears, and how it relates to the other elements around it. See the following BEM naming examples:
UI Toolkit demo project, Dragon Crashers, suggested naming convention
  • Responsive UI layout: Similar to web technologies, UI Toolkit offers the possibility of creating layouts where “child” visual elements adapt to the current available size inside their “parent” visual elements, and others where each element has an absolute position anchored to a reference point, akin to the Unity UI system. The sample uses both options as needed through the visual elements of the UI.
Capture of upcoming layouts to be made available in the UI Toolkit e-book.
The e-book introduces the essentials for more responsive layouts, among other features available in UI Builder.
  • PSD Importer: One of the most effective tools for creating the demo, PSD Importer allows artists to work in a master document without having to manually export every sprite separately. When changes are needed, they can be done in the original PSD file and updated automatically in Unity.
  • ScriptableObjects: In order to focus on UI design and implementation, the sample project simulates backend data, such as in-app purchases and mail messages, using ScriptableObjects. You can conveniently customize this stand-in data from the Resources/GameData folder and use the example to create similar data assets, like inventory items and character or dialog data in UI Toolkit.
A PSD file containing the icons shown in Project view unfolds all the sprites from within the file that can be used as 2D sprites in any other Unity system.
A PSD file containing the icons shown in Project view unfolds all the sprites from within the file that can be used as 2D sprites in any other Unity system.

Remember that with UI Toolkit, UI layouts and styles are decoupled from code. This means that rewriting the backend data can occur independently from the UI design. If your development team replaces those systems, the interface should continue to work.

Additional tools used in the demo include particle systems created with the Built-in Particle System for special effects, and the 2D toolset, among others. Feel free to review the project via the Inspector to see how these different elements come into play.

You can find reference art made by the UI artists under UI/Reference, as replicated in UI Builder. The whole process, from mockups to wireframes, is also documented in the e-book. Finally, all of the content in the sample can be added to your own Unity project.

Early wireframes of the UI Toolkit sample
Early wireframes of the UI Toolkit sample

Download the sample project and get ready for the upcoming e-book

You can download the UI Toolkit sample – Dragon Crashers from the Asset Store. Once you’ve explored its different UI designs, please provide your feedback on the forum.

Then be sure to check out our e-book, User interface design and implementation in Unity, available this fall. Preregister here to have the guide emailed to you once it’s live.

September 9, 2022 in Games | 14 min. read
Join a discussion on our Forums
Related Posts