Version: 2021.3
言語: 日本語
Create a radial progress indicator
カスタムコントロールのカスタムスタイルを作成する

バインド可能なカスタムコントロールの作成

バージョン: 2021.2 以降

この例では、カスタムエディターウィンドウでバインド可能なカスタムコントロールを作成する方法を説明します。

例の概要

この例では、double データ型のプロパティにバインドされるカスタムコントロールを作成します。この例は、文字列や整数などの他のデータ型のプロパティにバインドするように変更することができます。

この例で作成するすべてのファイルは、GitHub リポジトリ にあります。

要件

This is an advanced example for developers familiar with Unity Editor, UI Toolkit, and C# scripting. You are recommended to have a basic understanding of the following concepts:

カスタムコントロールクラスの作成

カスタムコントロールを定義する C# クラスを作成します。

  1. 任意のテンプレートで Unity プロジェクトを作成します。

  2. ファイルを保存するために ExampleField という名前のフォルダーを作成します。

  3. ExampleField フォルダーに、ExampleField.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

    using UnityEngine.UIElements;
    
    namespace UIToolkitExamples
    {
        // ExampleField inherits from BaseField with the double type. Therefoe, the ExampleField's underlying value is a double.
        public class ExampleField : BaseField<double>
        {
            // We can provide the existing BaseFieldTraits class as a type parameter for UxmlFactory, and this means we
            // don't need to define our own traits class or override its Init() method. We do, however, need to provide it
            // However, you must provide the value type (double) and its attribute description type:
            // (UxmlDoubleAttributeDescription).
            public new class UxmlFactory :
                UxmlFactory<ExampleField, BaseFieldTraits<double, UxmlDoubleAttributeDescription>> { }
    
            Label m_Input;
    
            // Default constructor is required for compatibility with UXML factory
            public ExampleField() : this(null)
            {
    
            }
    
            // Main constructor accepts label parameter to mimic BaseField constructor.
            // Second argument to base constructor is the input element, the one that displays the value this field is
            // bound to.
            public ExampleField(string label) : base(label, new Label() { })
            {
                // This is the input element instantiated for the base constructor.
                m_Input = this.Q<Label>(className: inputUssClassName);
            }
    
            // SetValueWithoutNotify needs to be overridden by calling the base version and then making a change to the
            // underlying value be reflected in the input element.
            public override void SetValueWithoutNotify(double newValue)
            {
                base.SetValueWithoutNotify(newValue);
    
                m_Input.text = value.ToString("N");
            }
        }
    }
    

UXML ファイルでカスタムコントロールを使用する

  1. ExampleField フォルダーに、ExampleField.uxml という名前の UI ドキュメントを作成します。

  2. ExampleField.uxml をテキストエディターで開き、そのコンテンツを以下のように置き換えます。

    <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:example="UIToolkitExamples">
        <example:ExampleField label="Binding Target" binding-path="m_Value" />
    </ui:UXML>
    
  3. Unity で、 ExampleField.uxml をダブルクリックして、UI Builder で開きます。ExampleField が Hierarchy ウィンドウに表示され、Viewport に可視化されます。Hierarchy ウィンドウで ExampleField を選択すると、Inspector ウィンドウに Binding PathLabel ボックスに割り当てられた値が表示されます。

バインディングターゲット用のクラスとカスタムエディターを作成する

  1. ExampleField フォルダーに、ExampleFieldComponent.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

    using UnityEngine;
    
    namespace UIToolkitExamples
    {
        public class ExampleFieldComponent : MonoBehaviour
        {
            [SerializeField]
            double m_Value;
        }
    }
    
  2. ExampleField フォルダーに、Editor という名前のフォルダーを作成します。

  3. Editor フォルダーに、ExampleFieldCustomEditor.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

    using UnityEditor;
    using UnityEngine.UIElements;
    using UnityEngine;
    
    namespace UIToolkitExamples
    {
        [CustomEditor(typeof(ExampleFieldComponent))]
        public class ExampleFieldCustomEditor : Editor
        {
            [SerializeField]
            VisualTreeAsset m_Uxml;
    
            public override VisualElement CreateInspectorGUI()
            {
                var parent = new VisualElement();
    
                m_Uxml?.CloneTree(parent);
    
                return parent;
            }
        }
    }
    
  4. Unity の Project ウィンドウで ExampleFieldCustomEditor.cs を選択します。

  5. `ExampleField.uxml を Inspector ウィンドウの Uxml ボックスにドラッグします。

例のテスト

  1. Unity で、空のゲームオブジェクトをシーンに加えます。
  2. ゲームオブジェクトに ExampleFieldComponent コンポーネントを加えます。カスタムコントロールは、Binding Target (バインディングターゲット) のデフォルト値 0 で Inspector に表示されます。基礎となる double プロパティの値を変更すると、UI にその変更が反映されます。

その他の参考資料

Create a radial progress indicator
カスタムコントロールのカスタムスタイルを作成する