2 つの属性を持つカスタムコントロールの作成

バージョン: 2023.2 以降

この例では、2 つの属性を持つ単純なカスタムコントロールの作成方法を説明します。

例の概要

この例では、2 つの属性を持つ MyElement というカスタムコントロールを作成し、UXML と UI Builder に公開します。この例では、UI Builder でカスタムコントロールを UI に追加する方法も説明します。

この例で作成する完成したファイルは、こちらの GitHub リポジトリにあります。

必要な要件

このガイドは、Unity、UI Toolkit、および C# スクリプトに精通している開発者向けです。始める前に、以下の点を理解しておいてください。

• UXML
• UI Builder

例の作成

C# で新しいカスタムコントロールクラスを作成するには、VisualElement クラスから継承します。これにより、C# でこの要素を作成して使用することができますが、UXML と UI Builder では自動的に公開されません。公開するには、UxmlElement 属性を追加します。属性を公開するには、UXML と UI Builder で表示する各プロパティに UxmlAttribute 属性を追加します。

1. 任意のテンプレートで Unity プロジェクトを作成します。
2. Assets フォルダーに、以下の内容の C# スクリプトを作成し MyElement.cs と命名します。

using UnityEngine;
using UnityEngine.UIElements;

[UxmlElement]
partial class MyElement : VisualElement
{
    string _myString = "default_value";
    int _myInt = 2;

    [UxmlAttribute]
    public string myString
    {
        get => _myString;
        set
        {
            _myString = value;
            Debug.Log($"myString set to: {_myString}");
            // React here, e.g. update UI
        }
    }

    [UxmlAttribute]
    public int myInt
    {
        get => _myInt;
        set
        {
            _myInt = value;
            Debug.Log($"myInt set to: {_myInt}");
            // React here, e.g. update UI
        }
    }
}

属性を表示する UXML の作成

1. 任意の名前で UXML ファイルを作成します。
2. UXML ファイルをダブルクリックして、UI Builder で開きます。
3. UI Builder の Library セクションで、Project > Custom Controls (C#) > MyElement を選択します。
4. MyElement を Hierarchy ウィンドウにドラッグします。
5. MyElement のカスタム属性を表示するには、MyElement の Inspector タブに移動します。

追加リソース

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