カスタムコントロールのカスタムスタイルを作成する

バージョン: 2021.2 以降

この例では、カスタムコントロールのカスタム USS 変数の使用法を説明します。

例の概要

この例では、USS から 2 つの色を読み取り、それを使ってテクスチャを生成するカスタムコントロールを作成します。

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

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

• UI Builder
• ビジュアルツリー
• UXML
• USS

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

カスタムコントロールを定義する C# スクリプトと、カスタムスタイルを定義する USS ファイルを作成します。

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

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

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

   using UnityEngine;
   using UnityEngine.UIElements;
   
   namespace UIToolkitExamples
   {
       public class ExampleElementCustomStyle : VisualElement
       {
           // Factory class, required to expose this custom control to UXML
           public new class UxmlFactory : UxmlFactory<ExampleElementCustomStyle, UxmlTraits> { }
   
           // Traits class
           public new class UxmlTraits : VisualElement.UxmlTraits { }
   
           // Use CustomStyleProperty<T> to fetch custom style properties from USS
           static readonly CustomStyleProperty<Color> S_GradientFrom = new CustomStyleProperty<Color>("--gradient-from");
           static readonly CustomStyleProperty<Color> S_GradientTo = new CustomStyleProperty<Color>("--gradient-to");
   
           // Image child element and its texture
           Texture2D m_Texture2D;
           Image m_Image;
   
           public ExampleElementCustomStyle()
           {
               // Create an Image and a texture for it. Attach Image to self.
               m_Texture2D = new Texture2D(100, 100);
               m_Image = new Image();
               m_Image.image = m_Texture2D;
               Add(m_Image);
   
               RegisterCallback<CustomStyleResolvedEvent>(OnStylesResolved);
           }
   
           // When custom styles are known for this control, make a gradient from the colors.
           void OnStylesResolved(CustomStyleResolvedEvent evt)
           {
               Color from, to;
   
               if (evt.customStyle.TryGetValue(S_GradientFrom, out from)
                   && evt.customStyle.TryGetValue(S_GradientTo, out to))
               {
                   GenerateGradient(from, to);
               }
           }
   
           public void GenerateGradient(Color from, Color to)
           {
               for (int i = 0; i < m_Texture2D.width; ++i)
               {
                   Color color = Color.Lerp(from, to, i / (float)m_Texture2D.width);
                   for (int j = 0; j < m_Texture2D.height; ++j)
                   {
                       m_Texture2D.SetPixel(i, j, color);
                   }
               }
   
               m_Texture2D.Apply();
               m_Image.MarkDirtyRepaint();
           }
       }
   }
   

4. ExampleElementCustomStyle.uss という名前の USS ファイルを作成し、そのコンテンツを以下のように置き換えます。

   ExampleElementCustomStyle {
       --gradient-from: red;
       --gradient-to: yellow;
   }
   

UI ドキュメントでカスタムコントロールを使用する

カスタムコントロールを使用するための UI ドキュメントを作成し、カスタムスタイルをカスタムコントロールに適用します。

1. ExampleElementCustomStyle フォルダーに、ExampleElementCustomStyle.uxml という名前の UI ドキュメントを作成します。
2. ExampleElementCustomStyle.uxml をダブルクリックして、UI Builder で開きます。
3. Library > Project > UIToolkitExamples を選択し、ExampleElementCustomStyle を Hierarchy ウィンドウにドラッグしてください。ビューポートウィンドウにグレーの正方形が表示されます。
4. ExampleElementCustomStyle.uss ファイルを既存の USS として加えます。これで、カスタム USS の変数が正方形に適用されます。

その他の参考資料

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