You can create a runtime UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary and display it in a game view by the following steps:
.uxml
) with controls.MonoBehaviours
to define the behavior of your UI controls.Try the following simple runtime UI example to get started. The example adds a label, a button, a toggle, and a text field in a sceneA Scene contains the environments and menus of your game. Think of each unique Scene file as a unique level. In each Scene, you place your environments, obstacles, and decorations, essentially designing and building your game in pieces. More info
See in Glossary. When you click the button, the Console windowA Unity Editor window that shows errors, warnings and other messages generated by Unity, or your own scripts. More info
See in Glossary shows a message. When you select the toggle and click the button, the Console window shows how many times the buttons have been clicked. When you enter a text message in the text field, the Console window shows the message.
This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:
You can find the completed files that this example creates in this GitHub repository.
Create a UI Document with a label, a button, and a Toggle. For information on how to add UI controls with UI Builder or UXML, refer to Get started with UI Toolkit.
Create a project in Unity Editor with any template.
Create a UI Document named SimpleRuntimeUI.uxml
with the following contents:
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"
xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"
noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement style="flex-grow: 1;">
<ui:Label text="This is a Label" display-tooltip-when-elided="true"/>
<ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button"/>
<ui:Toggle label="Display the counter?" name="toggle"/>
<ui:TextField picking-mode="Ignore" label="Text Field" text="filler text" name="input-message" />
</ui:VisualElement>
</ui:UXML>
Create a UIDocument GameObjectThe fundamental object in Unity scenes, which can represent characters, props, scenery, cameras, waypoints, and more. A GameObject’s functionality is defined by the Components attached to it. More info
See in Glossary in the SampleScene and add the UI Document as the source asset.
In the SampleScene, select GameObject > UI Toolkit > UI Document. This creates the following:
Select the UIDocument GameObject in the hierarchy and drag SimpleRuntimeUI.uxml from your Project windowA window that shows the contents of your Assets
folder (Project tab) More info
See in Glossary to the Source Asset field of the UI Document component in the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary window. This references the source asset to the UXML file you created.
To add logic, create a C# script that derives from MonoBehaviour
to access the controls that the UI Document component references.
Unity loads a UI Document component’s source UXML when OnEnable
is called on the component. To ensure the visual tree is loaded correctly, add logic to interact with the controls inside the OnEnable
method.
Create a C# script named SimpleRuntimeUI.cs
with the following contents:
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleRuntimeUI : MonoBehaviour
{
private Button _button;
private Toggle _toggle;
private int _clickCount;
//Add logic that interacts with the UI controls in the `OnEnable` methods
private void OnEnable()
{
// The UXML is already instantiated by the UIDocument component
var uiDocument = GetComponent<UIDocument>();
_button = uiDocument.rootVisualElement.Q("button") as Button;
_toggle = uiDocument.rootVisualElement.Q("toggle") as Toggle;
_button.RegisterCallback<ClickEvent>(PrintClickMessage);
var _inputFields = uiDocument.rootVisualElement.Q("input-message");
_inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage);
}
private void OnDisable()
{
_button.UnregisterCallback<ClickEvent>(PrintClickMessage);
}
private void PrintClickMessage(ClickEvent evt)
{
++_clickCount;
Debug.Log($"{"button"} was clicked!" +
(_toggle.value ? " Count: " + _clickCount : ""));
}
public static void InputMessage(ChangeEvent<string> evt)
{
Debug.Log($"{evt.newValue} -> {evt.target}");
}
}
Add SimpleRuntimeUI.cs as a component of the UIDocument GameObject.
Depending on the active input handling selected in your project settingsA broad collection of settings which allow you to configure how Physics, Audio, Networking, Graphics, Input and many other areas of your project behave. More info
See in Glossary,
and whether or not you want to mix UI Toolkit panels with uGUI canvases,
there is a number of available options to modify how UI Toolkit processes input
to generete its runtime events.
Refer to Runtime event system for more information.
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.