UI Toolkit

UI Toolkit is a collection of features, resources, and tools for developing user interface (UI). You can use UI Toolkit to develop custom UI and extensions for the Unity Editor, runtime debugging tools, and runtime UI for games and applications.

UI Toolkit is inspired by standard web technologies. If you have experience developing web pages or applications, your knowledge is transferable and the core concepts are familiar.

Note: Unity recommends you to use UI Toolkit for your new UI development projects. However, Unity UI (uGUI) and IMGUI are appropriate for certain use cases, and are required to support deprecated projects. For more information, see the Comparison of UI systems in Unity.

UI system

UI Toolkit のコアは、認知されたウェブ技術に基づいた保持モードの UI システムです。スタイルシートや、動的でコンテキスト依存なイベント処理をサポートしいます。

UI システムには以下のような機能があります。

• Visual tree: An object graph, made of lightweight nodes, that holds all the elements in a window or panel. It defines every UI you build with the UI Toolkit.
• Controls: A library of standard UI controls such as buttons, popups, list views, and color pickers. You can use them as is, customize them, or create your own controls.
• Data binding system: A system links properties to the controls that modify their values.
• レイアウトエンジン: CSS Flexbox モデルに基づいたレイアウトシステムです。レイアウトやスタイリングのプロパティに基づいて要素を配置します。
• Event System: A system communicates user interactions to elements, such as input, touch and pointer interactions, drag-and-drop operations, and other event types. The system includes a dispatcher, a handler, a synthesizer, and a library of event types.
• UI Renderer: A rendering system built directly on top of Unity’s graphics device layer.
• Editor UI support: A set of components to create Editor UI.
• Runtime UI Support: A set of components to create runtime UI.

UI assets

Use the following asset types to build UI similar to how you develop web applications:

• UXML documents: HTML and XML inspired markup language defines the structure of UI and reusable UI templates. Although you can build interfaces directly in C# files, Unity recommends using UXML documents if possible.
• Unity Style Sheets (USS): Style sheets apply visual styles and behaviors to UI. They’re similar to Cascading Style Sheets (CSS) used on the web, and support a subset of standard CSS properties. Although you can apply styles directly in C# files, Unity recommends using USS files if possible.

UI tools and resources

Use the following tools to create and debug your interfaces, and learn how to use the UI Toolkit:

• UI Debugger: A diagnostic tool that resembles a web browser’s debugging view. Use it to explore a hierarchy of elements and get information about its underlying UXML structure and USS styles. You can find it in the Editor under Window > UI Toolkit > Debugger.
• UI Builder: A UI tool lets you visually create and edit UI Toolkit assets such as UXML and USS files.
• UI Samples: A library of code samples for UI controls that you can view in the Editor under Window > UI Toolkit > Samples.