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

バージョン: 2023.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
{
    [UxmlElement]
    public partial class ExampleElementCustomStyle : VisualElement
    {
        // 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();
        }
    }
}

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

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

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

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

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

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

追加リソース

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