The document discusses the new UI Elements framework in Unity for designing and developing user interfaces for both the Unity editor and runtime applications. It highlights the value proposition of UI Elements, including collaboration, iteration speed, and extensibility, while providing examples of usage, styling, and the timeline of its development. The overall aim is to quickly and effectively create engaging UIs that perform well across different contexts.

2. Building UI for games
using the new UI Builder
Damian Campeanu
Editor Developer - Editor & UI Group

3. UIElements
A unified framework to design and develop UI for the Unity
Editor and runtime applications.

4. 4
— IMGUI: Primarily used to extend the Unity Editor
— uGUI: Released in Unity 4.6 for runtime UI
— Performance scales poorly
— Styling and logic combined
— Difficult for creators unfamiliar with C# and Unity
Existing state of UI in Unity

5. Quickly develop and validate UI for different
contexts.
Value Proposition for UIElements
5
Collaboration
Iteration Speed
Familiarity
Reusability
Extensibility
Different team members can work on
different parts of the same UI.
UI authoring tools and workflows are familiar
and easy to learn.
Share styles and templates within or across
projects.
Customize and extend existing styles and
templates or build custom ones.
Rich Content
Build engaging UI that performs well as it
scales.

6. /* styles.uss */
.container { font-size: 40px; }
#my-label { color: blue; }
<!-- hierarchy.uxml -->
<UXML xmlns="UnityEngine.UIElements">
<VisualElement class="container">
<Style src="styles.uss" />
<Label
name="my-label"
text="UIElements!" />
</VisualElement>
</UXML>
// MyWindow.cs
void OnEnable() {
var a = AssetDatabase.LoadAssetAtPath(
"Assets/hierarchy.uxml");
VisualElement row = a.CloneTree();
var label = row.Q<Label>("my-label");
label.RegisterCallback<MouseUpEvent>(
evt => evt.StopPropagation());
rootVisualElement.Add(row);
}
UIElements API
6
1
2
3

7. /* styles.uss */
.container { font-size: 40px; }
#my-label { color: blue; }
<!-- hierarchy.uxml -->
<UXML xmlns="UnityEngine.UIElements">
<VisualElement class="container">
<Style src="styles.uss" />
<Label
name="my-label"
text="UIElements!" />
</VisualElement>
</UXML>
// MyWindow.cs
void OnEnable() {
var a = AssetDatabase.LoadAssetAtPath(
"Assets/hierarchy.uxml");
VisualElement row = a.CloneTree();
var label = row.Q<Label>("my-label");
label.RegisterCallback<MouseUpEvent>(
evt => evt.StopPropagation());
rootVisualElement.Add(row);
}
UIElements API
7
1
2
3

8. /* styles.uss */
.container { font-size: 40px; }
#my-label { color: blue; }
<!-- hierarchy.uxml -->
<UXML xmlns="UnityEngine.UIElements">
<VisualElement class="container">
<Style src="styles.uss" />
<Label
name="my-label"
text="UIElements!" />
</VisualElement>
</UXML>
// MyWindow.cs
void OnEnable() {
var a = AssetDatabase.LoadAssetAtPath(
"Assets/hierarchy.uxml");
VisualElement row = a.CloneTree();
var label = row.Q<Label>("my-label");
label.RegisterCallback<MouseUpEvent>(
evt => evt.StopPropagation());
rootVisualElement.Add(row);
}
UIElements API
8
1
2
3

9. /* styles.uss */
.container { font-size: 40px; }
#my-label { color: blue; }
<!-- hierarchy.uxml -->
<UXML xmlns="UnityEngine.UIElements">
<VisualElement class="container">
<Style src="styles.uss" />
<Label
name="my-label"
text="UIElements!" />
</VisualElement>
</UXML>
// MyWindow.cs
void OnEnable() {
var a = AssetDatabase.LoadAssetAtPath(
"Assets/hierarchy.uxml");
VisualElement row = a.CloneTree();
var label = row.Q<Label>("my-label");
label.RegisterCallback<MouseUpEvent>(
evt => evt.StopPropagation());
rootVisualElement.Add(row);
}
UIElements API
9
1
2
3

10. 10
Demo
Image assets by:
Michael Desharnais
behance.net/mdesharnais

11. Quickly develop and validate UI for different
contexts.
Value Proposition for UIElements
11
Collaboration
Iteration Speed
Familiarity
Reusability
Extensibility
Different team members can work on
different parts of the same UI.
UI authoring tools and workflows are familiar
and easy to learn.
Share styles and templates within or across
projects.
Customize and extend existing styles and
templates or build custom ones.
Rich Content
Build engaging UI that performs well as it
scales.

12. 20XX
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.
20XX
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.
20XX
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.
20XX
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor.
Donec facilisis lacus eget mauris.
2019.3
Preview of Visual Authoring and
Runtime support
Release of runtime and UI Builder
preview packages
during 2020
UIElements Release
A supported, publicly released
version of UIElements for making
rich-content UI.
2019.1
Editor Extensions
Public release of UIElements for
Editor windows and custom
Inspectors.
2019.2
Improvements to Performance and Styles
Rendering optimizations for complex UI.
Closer parity with CSS.
12
UIElements Timeline

13. Thank you!
UI Builder Preview Package (requires 2019.2+):
- Package Manager: "UI Builder" (enable Preview packages)
More UIElements API info, see Unite LA 2018 talk:
- YouTube: "UIElements, a new UI system for the editor"
- or: youtu.be/MNNURw0LeoQ
Forum:
- UI Systems > UIElements
- or: forum.unity.com/forums/uielements.178