UIElements Tutorial for Unity: Getting Started

Binding Values in UIElements

In the context of UIElements, binding is when you directly link VisualElement fields to variables within scripts. When a VisualElement Field changes, the variables will change and vice versa. In this case, you want to link to the preset’s settings.

To bind the properties of the selectedPreset to the fields, insert the following into BindControls():

// 1 - Finding the properties in the selected preset manager
SerializedProperty objectName = presetManagerSerialized.FindProperty("currentlyEditing.objectName");

SerializedProperty objectColor = presetManagerSerialized.FindProperty("currentlyEditing.color");

SerializedProperty objectSize = presetManagerSerialized.FindProperty("currentlyEditing.size");

SerializedProperty objectRotation = presetManagerSerialized.FindProperty("currentlyEditing.rotation");

SerializedProperty objectAnimationSpeed = presetManagerSerialized.FindProperty("currentlyEditing.animationSpeed");

SerializedProperty objectIsAnimating = presetManagerSerialized.FindProperty("currentlyEditing.isAnimating");

// 2 - Binding those properties to the corresponding element
rootVisualElement.Q<TextField>("ObjectName").BindProperty(objectName);

rootVisualElement.Q<ColorField>("ColorField").BindProperty(objectColor);

rootVisualElement.Q<Vector3Field>("SizeField").BindProperty(objectSize);

rootVisualElement.Q<Vector3Field>("RotationField").BindProperty(objectRotation);

rootVisualElement.Q<FloatField>("AnimationSpeedField").BindProperty(objectAnimationSpeed);

rootVisualElement.Q<Toggle>("IsAnimatingField").BindProperty(objectIsAnimating);

currentlyEditing is a Preset found within PresetObject.cs, which stores the selected preset.

Here’s what this code does:

1. Finds each property, such as color, size etc., within the presetManagerSerialized and stores it in a reference variable.
2. Uses queries to find the corresponding fields. It then binds the fields to the property using BindProperty(SerializedProperty).

Save the PresetWindow.cs file and return to the Unity editor.

Testing and Debugging the Editor Window

Test the editor window by making new presets and checking if the values change in real-time in the inspector.

Drag the Preset Object GameObject from the Hierarchy, into the Preset Field at the top-right corner of your PresetWindow editor. Make sure the Preset Object GameObject is selected in the Hierarchy to show it’s properties in the Inspector. Then, click the L button next to the newly created preset in your custom editor before making changes.

Select a preset by using the Applied Preset field in the inspector, press Play and watch the GameObject take the form of your preset.

Unity also provides a debugger for UIElements, which you can access by opening Window ► Analysis ► UIElements Debugger.

Pick Select a panel ► PresetWindow and then Pick Element.

You can inspect elements, check their styling and scaling, and even see the associated Visual Tree! Best of all, you can change things on the fly to see how they look.

Great job! You can now create versatile and advanced editor windows to take your projects to a whole new level.

Where to Go From Here?

You can download the complete project using the Download Materials button at the top or bottom of this tutorial.

In this Unity UIElements tutorial, you learned how to:

• Create Editor Windows using UXML and USS.
• Add functionality to UIElements.
• Create new elements and binding properties.

This project is only the beginning; there’s so much more you can add. I’m interested to see what you come up with!

Did you enjoy this tutorial? Want to learn more? Check out our book Unity Games by Tutorials, which has more info on making games with Unity.

If you want to learn more about Unity’s UIElements, check out this UIElements tutorial by Unity.

You’ll also find some useful information in the official UIElements Developer Guide.

If you have any suggestions, questions or you want to show off what you did to improve this project, join the discussion below.