特定の作業を頻繁に行う場合、UI Toolkit を使ってその作業専用の UI を作成することができます。例えば、カスタムのエディターウィンドウを作成することができます。
このガイドでは、カスタムエディターウィンドウを例として、UI Toolkit の基本的なワークフローを説明します。UI Builder、UXML、C# スクリプトを使用して、カスタムエディターウィンドウを作成し、UI コントロールをカスタムエディ ターウィンドウに追加する方法を説明します。
この例で作成するすべてのファイルは、GitHub リポジトリ にあります。
このガイドは、Unity エディターと C# スクリプトを使い慣れていて、UI Toolkit を初めて使う開発者のためのものです。以下の概念について基本的な知識があることが推奨されます。
MyCustomEditor
と入力し、USS* を無効にします。これにより、2 つのラベルを持つカスタムのエディターウィンドウが作成されます。エディターウィンドウはメニューから開くことができます (Window > UI Toolkit > MyCustomEditor)。ソースファイルは Asset/Editor
フォルダーにあります。
以下の方法で UI コントロールをウィンドウに加えることができます。
これらの方法は、個別でも、組み合わでも使用することもできます。以下の例では、これらのメソッドを組み合わせて、3 組のラベル、ボタン、トグルを作成します。
UI コントロールをウィンドウに視覚的に加えるには、UI Builder を使用します。以下の例は、デフォルトのラベルに加えて、ボタンとトグルをカスタムエディターウィンドウに加える方法を示しています。
Editor
フォルダーで、MyCustomEditor.uxml
をダブルクリックして、UI Builder を開きます。
UI Builder で、Button と Toggle を Library > Controls から Hierarchy または **Viewport のウィンドウプレビューにドラッグしてください。
Hierarchy で、コントロールにいくつかの属性を加えます。
These controls were created in UI Builder
に変更します。This is button1
と入力します。Inspector の Name フィールドに button1
と入力します。Number?
と入力します。Inspector の Name フィールドに toggle1
と入力します。保存 して UI Builder ウィンドウを閉じます。
カスタムエディターウィンドウを開きます。ウィンドウ内に追加したボタンとトグルが表示されます。
テキストファイルで UI を定義したい場合は、UXML を編集して UI コントロールを追加できます。この例では、もう一揃いのラベル、ボタン、トグルをウィンドウに追加します。
Editor
フォルダーで、Assets > Create > UI Toolkit > UI Document をクリックして、MyCustomEditor_UXML.uxml
という UXML ファイルを作成します。
テキストエディターで MyCustomEditor_UXML.uxml
を開きます。
ヒント: Project ウィンドウの MyCustomEditor_UXML.uxml
の矢印をクリックし、inlineStyle
をダブルクリックすると、それを実行できます。
デフォルトでは、UXML 文書には engine:UXML
タグが付いた 1 つの要素が表示されます。これは、XML ツリーのルート要素です。この要素の中に、UI コントロールとその属性を加えます。
完成した MyCustomEditor_UXML.uxml
ファイルは、以下のようになります。
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:engine="UnityEngine.UIElements"
xmlns:editor="UnityEditor.UIElements"
xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
>
<engine:Label text="These controls were created with UXML." />
<engine:Button text="This is button2." name="button2"/>
<engine:Toggle label="Number?" name="toggle2"/>
</engine:UXML>
MyCustomEditor.cs
を開きます。
MyCustomEditor
クラスに m_UXMLTree
という名の private の VisualTreeAsset
フィールドを追加します。その上に [SerializeField]
という属性を付けます。
[SerializeField]
private VisualTreeAsset m_UXMLTree;
CreateGUI()
の末尾に以下のコードを追加します。
rootVisualElement.Add(m_UXMLTree.Instantiate());
Project ウィンドウで MyCustomEditor.cs
を選択します。
MyCustomEditor_UXML.uxml
を Project ウィンドウから Inspector の UXML Tree フィールドにドラッグします。これで、UXML がビジュアルツリーに割り当てられます。
カスタムエディターウィンドウを開きます。3 つのラベル、2 つのボタン、2 つのトグルがウィンドウに表示されているはずです。
コーディングを使いたい場合は、C# スクリプトでウィンドウに UI コントロールを加えられます。この例では、もう一揃いのラベル、ボタン、トグルをウィンドウに追加します。
MyCustomEditor.cs
を開きます。
Unity では、ラベル、ボタン、トグルなどの基本的な UI コントロールに UnityEngine.UIElements
を使用します。UI コントロールを使用するには、(まだ存在しない場合は) 以下の宣言を加える必要があります。
using UnityEngine.UIElements;
既存のラベルのテキストを "Hello World!From C#"
から "These controls were created using C# code."
に変えます。
EditorWindow クラスには rootVisualElement
と呼ばれるプロパティがあります。UI コントロールをウィンドウに追加するには、まず、いくつかの属性を持つ要素クラスをインスタンス化し、rootVisualElement
の Add
メソッドを使用します。
完成した CreateGUI()
メソッドは、以下のようになります。
public void CreateGUI()
{
// 各エディターウィンドウは、ルート VisualElement オブジェクトを含んでいます。
VisualElement root = rootVisualElement;
// VisualElement オブジェクトは、ツリー階層に従って他の VisualElement を持つことができます。
Label label = new Label("These controls were created using C# code.");
root.Add(label);
Button button = new Button();
button.name = "button3";
button.text = "This is button3.";
rootVisualElement.Add(button);
Toggle toggle = new Toggle();
toggle.name = "toggle3";
toggle.label = "Number?";
rootVisualElement.Add(toggle);
// UXML をインポートします
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
VisualElement labelFromUXML = visualTree.Instantiate();
root.Add(labelFromUXML);
rootVisualElement.Add(m_UXMLTree.Instantiate());
}
エディターに移動して、カスタムエディターウィンドウを開きます。3 つのラベル、3 つのボタン、3 つのトグルがウィンドウに表示されているはずです。
UI コントロールにイベントハンドラーを設定すると、ボタンをクリックしたときや、トグルを選択/クリアしたときに、UI コントロールが何らかのタスクを実行します。
下のコードでは、以下の処理を行うイベントハンドラーの例を示しています。
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class MyCustomEditor : EditorWindow
{
[MenuItem("Window/UI Toolkit/MyCustomEditor")]
public static void ShowExample()
{
MyCustomEditor wnd = GetWindow<MyCustomEditor>();
wnd.titleContent = new GUIContent("MyCustomEditor");
}
[SerializeField]
private VisualTreeAsset m_UXMLTree;
private int m_ClickCount = 0;
private const string m_ButtonPrefix = "button";
public void CreateGUI()
{
// 各エディターウィンドウは、ルート VisualElement オブジェクトを含みます。
VisualElement root = rootVisualElement;
// VisualElement オブジェクトは、ツリー階層に従って他の VisualElement を持つことができます。
Label label = new Label("These controls were created using C# code.");
root.Add(label);
Button button = new Button();
button.name = "button3";
button.text = "This is button3.";
rootVisualElement.Add(button);
Toggle toggle = new Toggle();
toggle.name = "toggle3";
toggle.label = "Number?";
rootVisualElement.Add(toggle);
// UXML をインポートします
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
VisualElement labelFromUXML = visualTree.Instantiate();
root.Add(labelFromUXML);
rootVisualElement.Add(m_UXMLTree.Instantiate());
//イベントハンドラーを呼び出します
SetupButtonHandler();
}
//ボタンクリックと回数を数えるイベントハンドラーの関数
private void SetupButtonHandler()
{
var buttons = rootVisualElement.Query<Button>();
buttons.ForEach(RegisterHandler);
private void RegisterHandler(Button button)
{
button.RegisterCallback<ClickEvent>(PrintClickMessage)</ClickEvent>を実行します。<ClickEvent>
}
private void PrintClickMessage(ClickEvent evt)
{
++m_ClickCount;
//ボタンやトグルに名前をつけたので、
//ボタンにつけた名前を使ってトグルの名前を見つけることができます。
Button button = evt.currentTarget as Button;
string buttonNumber = button.name.Substring(m_ButtonPrefix.Length);
string toggleName = "toggle" + buttonNumber;
Toggle toggle = rootVisualElement.Q<Toggle>(toggleName);
Debug.Log("Button was clicked!" +
(toggle.value ? " Count: " + m_ClickCount : ""));
}
}
UI Toolkit シンプルワークフローは Unity 2021.2 で追加NewIn20212
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.