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

バージョン: 2021.3 以降

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

例の概要

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

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

要件

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

• UXML
• UI Builder

例の作成

C# で新しいカスタムコントロールクラスを作成するには、VisualElement クラスを継承します。これにより、C# でこの要素を作成して使用することができますが、UXML や UI Builder では自動的に公開されません。公開するには、UxmlTraits から派生した trait クラスを定義し、Init() をオーバーライドします。

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

2. Assets フォルダーに、以下の内容の C# スクリプトを作成し MyElement.cs と命名します。

   using UnityEngine;
   using UnityEngine.UIElements;
   
   class MyElement : VisualElement
   {
       public new class UxmlFactory : UxmlFactory<MyElement, UxmlTraits> { }
   
       // Add the two custom UXML attributes.
       public new class UxmlTraits : VisualElement.UxmlTraits
       {
           UxmlStringAttributeDescription m_String =
               new UxmlStringAttributeDescription { name = "my-string", defaultValue = "default_value" };
           UxmlIntAttributeDescription m_Int =
               new UxmlIntAttributeDescription { name = "my-int", defaultValue = 2 };
           
           public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
           {
               base.Init(ve, bag, cc);
               var ate = ve as MyElement;
   
               ate.myString = m_String.GetValueFromBag(bag, cc);
               ate.myInt = m_Int.GetValueFromBag(bag, cc);
           }
       }
       
       // Must expose your element class to a { get; set; } property that has the same name 
       // as the name you set in your UXML attribute description with the camel case format
       public string myString { get; set; }
       public int myInt { get; set; }
   }
   

3. 任意の名前で UXML ファイルを作成します。

4. UXML ファイルをダブルクリックして、UI Builder で開きます。

5. UI Builder の Library セクションで、Project > Custom Controls (C#) > MyElement を選択します。

6. MyElement を Hierarchy ウィンドウにドラッグします。

7. MyElement カスタム属性を見るには、MyElement の Inspector ウィンドウに移動します。

その他の参考資料

• カスタムコントロールの作成
• カスタムコントロールを UXML と UI Builder に公開する