This video tutorial from Unity provides a high-level walkthrough of how to create World Space user interfaces using UI Toolkit in Unity 6.2. Some of the key steps you’ll learn about include:
- The essentials for setting up the project and opening the UI Builder
- Saving your first UXML document
- How to build a flexible and maintainable UI by creating and applying stylesheets (USS files) and reusable style classes
The UI Toolkit Unity 6.2 tutorial also covers a practical example of enhancing user interaction by implementing custom hover effects on buttons using pseudo-classes.
Finally, it shows the complete workflow for integrating the UI into a 3D scene by configuring a UI Document and its associated Panel Settings for World Space rendering, resulting in a menu that exists physically within the game environment.
To begin creating a user interface, open the UI Builder window and save your work as a UXML asset. This file will store the structure and hierarchy of your UI elements.
Follow these steps to get started:
1. In the Unity Editor's main menu, navigate to the UI Builder: Window > UI Toolkit > UI Builder
2. Once the UI Builder window is open, save your new UI document. Go to File > Save As... in the UI Builder's menu.
3. Choose a location in your project and save the file. This creates the .uxml asset that you will use as the source for your UI in the scene.
You can see this example in action by going directly to these sections in the video:
(1:10) - Opening the UI Builder window
(1:23) - Saving the UXML file
If you want to learn more about the UI Builder, make sure to check out the Unity Documentation page.
The most efficient way to maintain a consistent look across your UI is by using stylesheets, which function much like CSS in web development. This approach separates style from structure, making your UI easier to manage.
The system involves three key parts:
- Stylesheet (.uss file): Create a new stylesheet in the UI Builder and attach it to your main UI container. This file will hold all your styling rules.
- Style Classes: To create a reusable style, select a visual element in the UI Builder. In the Inspector under the Style Class List, type a new class name (e.g., "menu-button") and add it to the list.
- Reusability: You can now assign this same style class to any other UI element. All elements sharing a class will automatically inherit its defined properties, ensuring a uniform appearance. Any change made to the style class will update all assigned elements simultaneously.
You can see this example in action by going directly to these sections in the video:
(2:18) - Creating a new stylesheet
(2:57) - Creating a new style class
(3:07) - Creating a new USS selector from the class
(3:43) - Explaining how changes to a style class affect all assigned elements
If you want to learn more about styling your UI with Unity Style Sheet (USS), make sure to check out the Unity Documentation page.
You can create custom hover effects and other interactive styles using USS pseudo-classes. The :hover pseudo-class allows you to define a specific set of styles that are applied only when a user's cursor is over an element.
To implement a custom hover effect for a standard Unity button, follow these steps:
1. In the UI Builder, select a button to see its default style classes in the Inspector. The standard button class is unity-button.
2. Double-click the unity-button class to add its selector to your stylesheet. This allows you to modify the button's default appearance, such as making it partially transparent.
3. Create a new selector in your stylesheet by appending the :hover pseudo-class to the original class: .unity-button:hover
4. With the new :hover selector active, define the styles you want for the hover state, such as changing the background color to be fully opaque. The UI will now automatically switch between these styles during mouse-over events.
You can see this example in action by going directly to these sections in the video:
(6:29) - Introduction to pseudo-classes
(6:54) - Finding the default .unity-button style class
(7:24) - Creating the :hover pseudo-class selector
(7:39) - Demonstrating the final hover effect
If you want to learn more about pseudo-classes, make sure to check out the Unity Documentation page.
Unity 6.2 enhances UI Toolkit with the ability to render UI elements directly in World Space. This process involves using a UI Document and a GameObject to host your UXML asset in the scene.
Follow this sequence to create a World Space UI:
1. In the Hierarchy window, right-click and select UI Toolkit > UI Document. This creates a new GameObject in your scene.
2. Select the new UI Document GameObject. In the Inspector, locate the Source Asset field and assign your saved .uxml file to it.
3. Click on the Panel Settings asset associated with the UI Document. This will highlight the asset in your Project window.
4. Select the Panel Settings asset to view its properties in the Inspector. Change the Render Mode from the default Screen Space to World Space.
5. After switching to World Space, you can adjust the UI Document GameObject's RectTransform component to position, rotate, and scale the UI plane within your 3D scene.
You can see this example in action by going directly to these sections in the video:
(7:49) - Creating a UI Document in the scene
(7:59) - Assigning the UXML source asset
(8:08) - Accessing Panel Settings
(8:23) - Switching to World Space Render Mode
(8:58) - Demonstrating the final World Space UI
If you want to learn more about World Space UI, make sure to check out the Unity Documentation page.
