バージョン: 2021.2 以降
この例では、カスタムコントロールのカスタム USS 変数の使用法を説明します。
この例では、USS から 2 つの色を読み取り、それを使ってテクスチャを生成するカスタムコントロールを作成します。
この例で作成するすべてのファイルは、GitHub リポジトリ にあります。
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。
カスタムコントロールを定義する C# スクリプトと、カスタムスタイルを定義する USS ファイルを作成します。
任意のテンプレートで Unity プロジェクトを作成します。
ファイルを保存するために create-custom-style-custom-control
という名前のフォルダーを作成します。
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();
}
}
}
ExampleElementCustomStyle.uss
という名前の USS ファイルを作成し、そのコンテンツを以下のように置き換えます。
ExampleElementCustomStyle {
--gradient-from: red;
--gradient-to: yellow;
}
カスタムコントロールを使用するための UI ドキュメントを作成し、カスタムスタイルをカスタムコントロールに適用します。
ExampleElementCustomStyle
フォルダーに、ExampleElementCustomStyle.uxml
という名前の UI ドキュメントを作成します。ExampleElementCustomStyle.uxml
をダブルクリックして、UI Builder で開きます。ExampleElementCustomStyle.uss
ファイルを既存の USS として加えます。これで、カスタム USS の変数が正方形に適用されます。