You can create a runtime UI 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 scene. When you click the button, the Console window 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. You are recommended to have a basic understanding of 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, see Simple UI Toolkit workflow.
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" value="filler text" text="filler text" name="input-message" />
</ui:VisualElement>
</ui:UXML>
Create a UIDocument GameObject 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 window to the Source Asset field of the UI Document component in the Inspector window. This references the source asset to the UXML file you created.
To add logic, create a companion 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.