バインド可能なカスタムコントロールの作成

Version: 2023.2+

この例では、カスタムエディターウィンドウでバインド可能なカスタムコントロールを作成する方法を説明します。

例の概要

この例では、double データ型のプロパティにバインドされるカスタムコントロールを作成します。この例は、文字列や整数などの他のデータ型のプロパティにバインドするように変更することができます。

You can find the completed files that this example creates in this GitHub repository.

要件

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

• UI Builder
• ビジュアルツリー
• UXML
• SerializedObject のデータバインディング

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

カスタムコントロールを定義する C# クラスを作成します。

1. 任意のテンプレートで Unity プロジェクトを作成します。
2. ファイルを保存するために ExampleField という名前のフォルダーを作成します。
3. ExampleField フォルダーに、ExampleField.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

[!code-cs]

UXML ファイルでカスタムコントロールを使用する

1. ExampleField フォルダーに、ExampleField.uxml という名前の UI ドキュメントを作成します。
2. ExampleField.uxml をテキストエディターで開き、そのコンテンツを以下のように置き換えます。

[!code-xml]

Create the class for the binding target

1. Unity で、 ExampleField.uxml をダブルクリックして、UI Builder で開きます。ExampleField が Hierarchy ウィンドウに表示され、Viewport に可視化されます。Hierarchy ウィンドウで ExampleField を選択すると、Inspector ウィンドウに Binding Path と Label ボックスに割り当てられた値が表示されます。
2. ExampleField フォルダーに、ExampleFieldComponent.cs という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。

[!code-cs]

Create the custom Editor for the binding target

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

[!code-cs]

例のテスト

1. Unity の Project ウィンドウで ExampleFieldCustomEditor.cs を選択します。
2. `ExampleField.uxml を Inspector ウィンドウの Uxml ボックスにドラッグします。
3. Add an empty GameObject to a scene.
4. ゲームオブジェクトに ExampleFieldComponent コンポーネントを加えます。カスタムコントロールは、Binding Target (バインディングターゲット) のデフォルト値 0 で Inspector に表示されます。基礎となる double プロパティの値を変更すると、UI にその変更が反映されます。

その他の参考資料

• カスタムコントロール