UI Toolkit で初めての UI を作る場合は、この基本 UI Toolkit ワークフロー例を参考にしてください。
ノート: デモンストレーションの目的で、このページではエディター UI の UI コントロールを追加する方法を説明します。ただし、UI ドキュメントに UI コントロールを追加する手順は、ランタイム UI にも適用されます。詳しくは、ランタイム UI について を参照してください。
特定の作業を頻繁に行う場合、UI Toolkit を使ってその作業専用の UI を作成することができます。例えば、カスタムのエディターウィンドウを作成できます。 この例では、カスタムエディターウィンドウを作成し、UI ビルダー、UXML、C# スクリプトを使用してカスタムエディターウィンドウに UI コントロールを追加する方法を示します。
この例で作成するすべてのファイルは、GitHub リポジトリ にあります。
Create a custom Editor window with two labels.
Assets
フォルダー内で右クリックし、Create > UI Toolkit > Editor Window を選択します。MyCustomEditor
と入力します。You can find the source files for it in the Assets/Editor
folder.
以下の方法で UI コントロールをウィンドウに加えることができます。
これらの方法は、個別でも、組み合わでも使用することもできます。以下の例では、これらのメソッドを組み合わせて、3 組のラベル、ボタン、トグルを作成します。
UI コントロールをウィンドウに視覚的に加えるには、UI Builder を使用します。以下のステップは、デフォルトのラベルに加えて、ボタンとトグルをカスタムエディターウィンドウに加えます。
Editor
フォルダーで、MyCustomEditor.uxml
をダブルクリックして、UI Builder を開きます。These controls were created in UI Builder
に変更します。This is button1
と入力します。button1
と入力します。Number?
を入力します。toggle1
と入力します。テキストファイルで UI を定義したい場合は、UXML を編集して UI コントロールを追加できます。以下のステップでは、もう一揃いのラベル、ボタン、トグルをウィンドウに追加します。
Editor
フォルダーで、Assets > Create > UI Toolkit > UI Document をクリックして、MyCustomEditor_UXML.uxml
という UXML ファイルを作成します。
Project ウィンドウの MyCustomEditor_UXML.uxml
の矢印をクリックします。
inlineStyle
をダブルクリックして、テキストエディターで MyCustomEditor_UXML.uxml
を開きます。
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()
の末尾に以下のコードを追加します。
root.Add(m_UXMLTree.Instantiate());
Project ウィンドウで MyCustomEditor.cs
を選択します。
MyCustomEditor_UXML.uxml
を Project ウィンドウから Inspector の UXML Tree フィールドにドラッグします。これで、UXML がビジュアルツリーに割り当てられます。
Window > UI Toolkit > MyCustomEditor を選択します。これにより、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()
{
// Each editor window contains a root VisualElement object
VisualElement root = rootVisualElement;
// VisualElements objects can contain other VisualElements following a tree hierarchy.
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.";
root.Add(button);
Toggle toggle = new Toggle();
toggle.name = "toggle3";
toggle.label = "Number?";
root.Add(toggle);
// Import UXML
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
VisualElement labelFromUXML = visualTree.Instantiate();
root.Add(labelFromUXML);
}
カスタムエディターウィンドウを閉じていない場合は閉じてください。
Window > UI Toolkit > MyCustomEditor を選択し、カスタムエディターウィンドウを再度開いて、追加した 3 つのラベル、3 つのボタン、3 つのトグルを確認します。
UI コントロールにイベントハンドラーを設定すると、ボタンをクリックしたときや、トグルを選択/クリアしたときに、UI コントロールが何らかのタスクを実行します。
この例では、以下のようなイベントハンドラーを設定します。
完成した MyCustomEditor.cs
ファイルは、以下のようになります。
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()
{
// Each editor window contains a root VisualElement object
VisualElement root = rootVisualElement;
// VisualElements objects can contain other VisualElement following a tree hierarchy.
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.";
root.Add(button);
Toggle toggle = new Toggle();
toggle.name = "toggle3";
toggle.label = "Number?";
root.Add(toggle);
// Import UXML
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/MyCustomEditor.uxml");
VisualElement labelFromUXML = visualTree.Instantiate();
root.Add(labelFromUXML);
root.Add(m_UXMLTree.Instantiate());
//Call the event handler
SetupButtonHandler();
}
//Functions as the event handlers for your button click and number counts
private void SetupButtonHandler()
{
VisualElement root = rootVisualElement;
var buttons = root.Query<Button>();
buttons.ForEach(RegisterHandler);
}
private void RegisterHandler(Button button)
{
button.RegisterCallback<ClickEvent>(PrintClickMessage);
}
private void PrintClickMessage(ClickEvent evt)
{
VisualElement root = rootVisualElement;
++m_ClickCount;
//Because of the names we gave the buttons and toggles, we can use the
//button name to find the toggle name.
Button button = evt.currentTarget as Button;
string buttonNumber = button.name.Substring(m_ButtonPrefix.Length);
string toggleName = "toggle" + buttonNumber;
Toggle toggle = root.Q<Toggle>(toggleName);
Debug.Log("Button was clicked!" +
(toggle.value ? " Count: " + m_ClickCount : ""));
}
}