UI Toolkit について
UI Toolkit で最初の UI を作成しませんか?この基本的な UI Toolkit ワークフローの例を使用して、始めましょう。
ノート: このガイドでは、デモを目的として、エディター UI に UI コントロールを追加する方法について説明します。ただし、UI コントロールを UI Document に追加する手順は、ランタイム UI にも適用できます。詳細については、ランタイム UI の使用を開始するを参照してください。
特定の作業を頻繁に行う場合は、UI Toolkit を使用してその作業専用の UI を作成することができます。例えば、カスタムの Editor ウィンドウを作成することができます。この例は、UI Builder、UXML、C# スクリプトを使用して、カスタム Editor ウィンドウを作成し、UI コントロールをカスタム Editor ウィンドウに追加する方法を示しています。
この例で作成する完成したファイルは、こちらの GitHub リポジトリ にあります。
カスタムエディターウィンドウの作成
2 つのラベルが配置されたカスタムの Editor ウィンドウを作成します。
- Unity エディターで任意のテンプレートを使用してプロジェクトを作成します。
-
Project ウィンドウで
Assetsフォルダーを右クリックし、Create > UI Toolkit > Editor Window を選択します。 -
UI Toolkit Editor Window Creator で、C# ボックスに「
SimpleCustomEditor」と入力します。 - UXML チェックボックスをオンのままにし、USS チェックボックスをオフにします。
- Confirm を選択します。
- Editor ウィンドウを開くには、Window > UI Toolkit > SimpleCustomEditor を選択します。
ソースファイルは Assets/Editor フォルダーにあります。
UI コントロールをウィンドウに加える
以下の方法で UI コントロールをウィンドウに加えることができます。
- UI Builder を使用して UI コントロールを視覚的に追加する
- XML に類似したテキストファイル (UXML) を使用して UI コントロールを追加する
- C# スクリプトを使用して UI コントロールを追加する
これらの方法の中から任意のものを個別に、または組み合わせて使用することができます。以下の例では、これらのメソッドを組み合わせて、3 組のラベル、ボタン、トグルを作成します。
UI Builder を使用して UI コントロールを追加する
UI コントロールをウィンドウに視覚的に加えるには、UI Builder を使用します。以下の手順では、デフォルトのラベルに加えて、ボタンとトグルをカスタム Editor ウィンドウに追加します。
-
Editorフォルダーで、SimpleCustomEditor.uxmlをダブルクリックして UI Builder を開きます。 - UI Builder で、Button と Toggle を Library > Controls から Hierarchy または Viewport のウィンドウプレビューにドラッグします。
- Hierarchy ウィンドウで、Label を選択します。
-
Inspector ウィンドウで、Text フィールドのデフォルトテキストを
These controls were created in UI Builderに変更します。 - Hierarchy ウィンドウで、Button を選択します。
-
Inspector ウィンドウで、Text フィールドに「
This is button1」と入力します。 -
Name フィールドに「
button1」と入力します。 - Hierarchy ウィンドウで、Toggle を選択します。
-
Inspector ウィンドウで、Label フィールドに「
Number?」と入力します。 -
Name フィールドに「
toggle1」と入力します。 - Save をクリックして UI Builder ウィンドウを閉じます。
- カスタム Editor ウィンドウを閉じていない場合は閉じます。
-
Project ウィンドウで
SimpleCustomEditor.csを選択し、Inspector ウィンドウで Visual Tree Asset がSimpleCustomEditor (Visual Tree Asset)に設定されていることを確認します。 - Window > UI Toolkit > SimpleCustomEditor を選択してカスタム Editor ウィンドウを再度開き、ボタンと追加したトグルを確認します。
UXML を使用して UI コントロールを追加する
テキストファイルで UI を定義する場合は、UXML を編集して UI コントロールを追加できます。以下の手順では、もう一揃いのラベル、ボタン、トグルをウィンドウに追加します。
-
Editorフォルダーで、Assets > Create > UI Toolkit > UI Document を選択し、SimpleCustomEditor_UXML.uxmlという名前の UXML ファイルを作成します。 -
Project ウィンドウで
SimpleCustomEditor_UXML.uxmlの矢印を選択します。 -
inlineStyleをダブルクリックして、テキストエディターでSimpleCustomEditor_UXML.uxmlを開きます。 -
SimpleCustomEditor_uxml.uxmlのコンテンツを以下のように置き換えます。
<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:Label text="These controls were created with UXML." />
<ui:Button text="This is button2" name="button2"/>
<ui:Toggle label="Number?" name="toggle2"/>
</ui:UXML>
SimpleCustomEditor.csを開きます。-
CreateGUIメソッドに以下のコードを追加して手動で作成した UXML ファイルをインポートします。// Import UXML created manually. var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleCustomEditor_uxml.uxml"); VisualElement labelFromUXML_uxml = visualTree.Instantiate(); root.Add(labelFromUXML_uxml); 変更を保存します。
Window > UI Toolkit > SimpleCustomEditor を選択します。これにより、3 つのラベル、2 つのボタン、2 つのトグルが配置されたカスタム Editor ウィンドウが開きます。
C# スクリプトを使用して UI コントロールを追加する
コーディングを使用する場合は、C# スクリプトでウィンドウに UI コントロールを追加できます。以下の手順では、もう一揃いのラベル、ボタン、トグルをウィンドウに追加します。
SimpleCustomEditor.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); // Instantiate UXML created automatically which is set as the default VisualTreeAsset. root.Add(m_UXMLTree.Instantiate()); // Import UXML created manually. var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleCustomEditor_uxml.uxml"); VisualElement labelFromUXML_uxml = visualTree.Instantiate(); root.Add(labelFromUXML_uxml); } Window > UI Toolkit > SimpleCustomEditor を選択してカスタム Editor ウィンドウを開き、3 つのラベル、3 つのボタン、3 つのトグルを表示します。
UI コントロールの動作を定義する
UI コントロールにイベントハンドラーを設定すると、ボタンをクリックしたときや、トグルを選択/クリアしたときに、UI コントロールが何らかのタスクを実行します。
この例では、次のイベントハンドラーを設定します。
- ボタンをクリックすると、エディターコンソールにメッセージが表示されます。
- トグルを選択すると、ボタンが何回クリックされたかがコンソールに表示されます。
完成した SimpleCustomEditor.cs は以下のようになります。
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleCustomEditor : EditorWindow
{
[SerializeField]
private VisualTreeAsset m_VisualTreeAsset = default;
[MenuItem("Window/UI Toolkit/SimpleCustomEditor")]
public static void ShowExample()
{
SimpleCustomEditor wnd = GetWindow<SimpleCustomEditor>();
wnd.titleContent = new GUIContent("SimpleCustomEditor");
}
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);
// Instantiate UXML created automatically which is set as the default VisualTreeAsset.
root.Add(m_VisualTreeAsset.Instantiate());
// Import UXML created manually.
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/SimpleCustomEditor_uxml.uxml");
VisualElement labelFromUXML = visualTree.Instantiate();
root.Add(labelFromUXML);
//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 : ""));
}
}
例のテスト
- メニューから、Window > UI Toolkit > SimpleCustomEditor を選択します。