UI Toolkit

UI Toolkit

Design your interface with a visual reference Enabling the Canvas background can help you visualize your element styling over a color or background image. Select the UXML file in the Hierarchy pane and then choose a Canvas background that approximates the final UI interface to judge style changes in context. The Canvas background provides a few different options: —

Background Color: Represents a specific shade or hue of the game environment

Image: For choosing a sprite or texture as the background (useful for replicating mockup screens or reference art)

Camera: Displays the current gameplay in the background, enabling you to see the UI in context of the actual game

The Canvas of a UXML document: Use the Color and Image options to adjust its appearance.

Iterate faster with PSD Importer when working with Photoshop files Unity will automatically refresh the sprites included in a multi-layered PSD file every time you save the file with the PSD Importer used to import it into your project. This allows you to create a quick placeholder and iterate on it while viewing changes in the Game view. This can be a great time saver, and improve the quality of the work, by letting you see it in context without swapping files or needing support from a fellow developer in your team.

Use emojis in your game You can include sprites like emojis in your text via rich text tags. To use them, you’ll need to use a sprite asset similar to the Gradient asset. When importing multiple sprites, pack them into a single atlas to reduce draw calls. Make sure that the sprite atlas has a suitable resolution for your target platform.

Import the sprites, create the Sprite Asset inside Assets/Resources, and adjust the info of each glyph as needed.

Use the built-in emojis included with a device’s OS If you are targeting a specific runtime platform, such as iOS or Android, you can make use of the system’s built-in emoji font instead of including the source font in your project. This can save memory and eliminate the need to package a large collection of emojis with your application. These are the steps to use OS emojis in your project: 1.

Create a Font asset from the font that your target system uses. On iOS the font is called Apple Emoji (used in this example), and on Android it’s called Noto Color Emoji (currently only COLRv0 is supported). Make sure the Font Asset is of the type Color, and then set the atlas population mode to Dynamic OS which doesn’t require you to include the source font in your asset saving space.

Ensure Clean Dynamic Data On Build is checked on the Font Asset

Enable Parse Escape Sequences on UI Builder and enter the desired emojis using the emoji keyboard from MacOS or Windows or in UTF format, for example, you would introduce a smiley as \U0001F601. You can check the UTF of each emoji in the Character Table of the Font Asset.

The build running on MacOS displays the emojis according to the OS font.

We can observe that in our test, the build size is smaller than the standalone emoji font proving that it was not included in the project but still being used to render the appropriate emojis.

Show additional info relative to the Visual Element on UI Builder Click the vertical ellipsis (⁝) in the Hierarchy header to further visualize the UI elements. In the Hierarchy pane, additional information appears next to the element Type. The #optionsbar Name selector and .options-bar Style Class selector appear when checked.

Filter for different selectors in the Hierarchy.

You might notice that some selectors begin with the .unity- prefix. These are default styles that apply to all elements. Any defined selectors will override these values.

Reach more markets with integrating localization early on You can simplify the localization process by integrating the Localization package with UI Toolkit. This integration lets you provide region-specific content for your players, no matter where they might be. Use the Game View Locale drop-down to preview the UI in different languages, ensuring elements display correctly in each Locale.

Use the Game View Locale drop-down to preview the localization.

Add stylization throughout the interface with Gradients In UI Toolkit you can apply Gradients via the <gradient> tag. Make sure Rich Text is enabled and see the changes take effect inside UI Builder or in the Game view. 1. Create a gradient color asset via Create > Text Core > Gradient Color. Make sure to place this file inside Assets/Resources or any subfolder under Resources. 2. Create a Text Settings asset to refer to from the Panel Settings. In the asset look for Color Gradient Presets, and indicate the folder or subfolder inside Resources where the asset is. 3. Add the following rich text tags inside UI Builder: <color=white><gradient=”testC olorGradient”>Gradient Test</gradient></color>. The color tag restores the font color to white so the gradient looks as intended, while the referred gradient has to match the asset name created in step 1. Make sure Rich Text is enabled. 4. You can see the changes take effect inside UI Builder or in the Game view.

Using the <gradient> tag in UI Toolkit

Animate UI with USS transitions For visual elements, animations don’t require additional code because pseudo-classes (:active, :inactive, :hover, etc.) can have their own selectors. Whenever a pseudo-class triggers a style change, any defined transitions will automatically animate the change. For example: A button can grow or shrink when hovered over (:hover), clicked (:active), or elements can fade out or become invisible based on user interaction or other events. Those changes of states are triggered by user actions but you can arbitrarily change the pseudo-class :enabled and :disabled which will manually trigger the USS animations relative to those pseudoclasses. This gives you an option to trigger animations at your will from code.

An example of a USS transition animation

Visualize resolved styles bounding boxes in the Editor Use bounding boxes to identify layout issues, alignment problems, and interactively debug your UI structure within the Editor. To visualize resolved bounding boxes using UI Toolkit, go to Window > UI Toolkit -> Debugger to open the UI Toolkit Debugger. Then use the Pick Element tool to select your UI element and enable the Show Layout feature. This option displays bounding boxes and layout information directly on top of your UI in the Game view.

The UI Toolkit Debugger includes several handy features to help debug your UI.

Reuse UXML files as templates to speed up your workflow UXML files can be used similar to prefabs. For example, you could have a project with a UXML layout that contains an item icon and count number that you need to spawn many times inside an inventory. If you right-click on any UXML you get the option to create a Template, which can later be added to any other visual element in the Hierarchy pane or instantiated from code. Once created you can find it in your Library and Project view.

Templates are reusable UXML and are available in the Library pane in the Project tab

More resources Download the e-book Create scalable and performant UI with UI Toolkit in Unity 6 to get indepth instructions on how to create UI with UI Toolkit across a wide range of devices. A sample project accompanies the e-book. UI Toolkit Sample – Dragon Crashers is available in the Unity Asset Store. 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 6 UI Toolkit workflow at runtime. Additionally, make sure to check out the QuizU project on the Unity Asset Store and the supporting articles: —

The UI Toolkit sample project QuizU

QuizU: State patterns for game flow

QuizU: Managing menu screens in UI Toolkit

QuizU: The Model View Presenter pattern

QuizU: Event handling in UI Toolkit

QuizU: UI Toolkit performance tips