ランタイムバインディングによる複数のプロパティへのバインド

バージョン: 6000.0+

この例では、UI Builder でデータソースアセットの複数のプロパティを UI コントロールにバインドする方法を示します。

例の概要

この例では、Vector3 プロパティと float プロパティを含むデータソースアセットを作成します。float プロパティは、Vector3 プロパティの x、y、z の値の合計を返す読み取り専用プロパティです。例では、Vector3 プロパティを Vector3Field にバインドし、float プロパティを FloatField にバインドします。UI で Vector3 プロパティを変更すると、FloatField には Vector3 プロパティの x、y、z の値の合計が表示されます。

この例では、To Source バインディングモードを使用して、UI が変更されたときにデータソースを更新する方法も示しています。

この例で作成する完成したファイルは、こちらの GitHub リポジトリにあります。

必要な要件

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

データソースアセットの作成

バインドするプロパティを含むデータソースアセットを作成します。

Unity で、任意のテンプレートでプロジェクトを作成します。
プロジェクトの Assets フォルダーに、以下の内容の C# スクリプトを作成し ExampleMultiPropertiesObject.cs と命名します。

using Unity.Properties;
using UnityEngine;
using UnityEngine.UIElements;

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleMultiPropertiesObject : ScriptableObject
{
    [Header("Bind to multiple properties")]

    [CreateProperty]
    public Vector3 vector3Value;
    
    [CreateProperty]
    public float sumOfVector3Properties => vector3Value.x + vector3Value.y + vector3Value.z;
}

オブジェクトアセットの例の作成

Assets > Create > Example MultiProperties Object を選択します。これにより、プロジェクトの Assets フォルダーにデータソースアセットが作成されます。
アセットの名前を ExampleMultiPropertiesObject.asset に変更します。

UI の作成

前のステップで作成したデータソースアセットにバインドする UI を作成します。この例では、UXML ファイルを作成し、Vector3Field と FloatField を子要素とする VisualElement を追加します。

プロジェクトの Assets フォルダーに、ExampleMultiPropertiesObject.uxml という名前の UXML ファイルを作成します。
ExampleObject.uxml ファイルをダブルクリックして、UI Builder で開きます。
Hierarchy パネルで、VisualElement を追加します。
VisualElement の子要素として Vector3Field と FloatField を追加します。

Vector3Field をデータソースにバインドする

UI を前のステップで作成したデータソースアセットにバインドします。

VisualElement の Inspector パネルで、Bindings > Data Source > Object リストから ExampleMultiPropertiesObject を選択します。
Vector3Field の Inspector パネルで、Value プロパティを右クリックし、Add binding を選択します。
Add Binding ウィンドウで、Data Source Path のリストから vector3Value を選択します。
Binding Mode リストから、To Source を選択します。これにより、UI が変更されるとデータソースが更新されます。
Add binding を選択して変更を適用します。

FloatField をデータソースにバインドする

FloatField の value プロパティをデータソースアセットの sumOfVector3Properties プロパティにバインドします。

Float の Inspector パネルで、Value プロパティを右クリックし、Add binding を選択します。
Add Binding ウィンドウの Data Source Path リストから、sumOfVector3Properties を選択します。
Binding Mode リストから、To Target を選択します。これにより、データソースが変更されると UI が更新されます。
Add binding を選択して変更を適用します。
UI Builder を保存して終了します。ExampleMultiPropertiesObject.uxml ファイルは以下のようになります。

<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" 
xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <engine:VisualElement data-source="MulPropertyObject.asset" name="VisualElement" style="flex-grow: 1;">
        <engine:Vector3Field label="Vec3 Field">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="vector3Value" binding-mode="ToSource" />
            </Bindings>
        </engine:Vector3Field>
        <engine:FloatField label="Float Field" name="FloatField">
            <Bindings>
                <engine:DataBinding property="value" data-source-path="sumOfVector3Properties" binding-mode="ToTarget" />
            </Bindings>
        </engine:FloatField>
    </engine:VisualElement>
</engine:UXML>

UI Builder プレビューモードでバインディングをテストする

UI Builder でバインディングをテストするには、Vector3 プロパティの値を更新します。バインディングが正しく設定されている場合、値がデータソースアセットに複製されます。

UI Builder のビューポートで、Preview を選択します。
Vector3Field の X、Y、Z フィールドにランダムな数字を入力します。FloatField には、入力した数値の合計が表示されます。
プロジェクトの Assets フォルダーで、ExampleMultiPropertiesObject.asset ファイルを選択します。ExampleObject.asset の Inspector ウィンドウの Vector3 Value が、入力した数値に変更されます。

追加リソース

ランタイムデータバインディングの例

型コンバーターによるランタイムバインディングの作成