ランタイムバインディングのスタートガイド

バージョン: 6000.0+

ランタイムデータバインディングの作成方法を理解するには、手始めに以下の例を利用してください。この例では、データソースアセットを作成し、UI Builder でデータソースを UI にバインドします。

UI Builder でランタイムバインディングを設定する手順:

UI コントロールの Inspector パネルでデータソースとデータソースパスを定義します。
UI コントロールのプロパティをデータソースアセットのプロパティにバインドします。
データソースと UI の間で変更を複製する方法を設定するバインディングモードを定義します。
データソースと UI の間で変更を複製するタイミングを設定する更新トリガーを定義します。

例の概要

この例では、文字列プロパティを含むデータソースアセットを作成して、UI Builder で Label コントロールの Text プロパティにバインドします。データソースアセットの文字列プロパティを変更すると、ラベルのテキストも変わります。

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

必要な要件

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

データソースアセットを作成する

バインドするプロパティを含むデータソースアセットを作成します。この例では、string プロパティを含む ExampleObject という ScriptableObject アセットを作成します。

Unity で任意のテンプレートを使用してプロジェクトを作成します。
Assets フォルダーに以下の内容で ExampleObject.cs という C# スクリプトを作成します。

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

#if UNITY_EDITOR
using UnityEditor;
#endif

[CreateAssetMenu]
public class ExampleObject : ScriptableObject
{
    [Header("Simple binding")]
    public string simpleLabel = "Hello World!";
}

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

メニューから Assets > Create > Example Object を選択します。これにより、プロジェクトの Assets フォルダーにアセットが作成されます。
アセットの名前を ExampleObject.asset に変更します。

UI の作成

前のステップで作成したデータソースアセットにバインドする UI を作成します。この例では、ラベルを含む UXML ファイルを作成します。

プロジェクトの Assets フォルダーに、ExampleObject.uxml という UXML ファイルを作成します。
UI Builder で ExampleObject.uxml ファイルをダブルクリックして開きます。
Hierarchy パネルで Label コントロールを加えます。

ラベルをデータソースにバインドする

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

Label の Inspector パネルで、Bindings > Data Source > Object リストから ExampleObject を選択します。
Data Source Path リストで、simpleLabel を選択します。
Text プロパティを右クリックし、Add binding を選択します。
Binding Mode リストから、To Target を選択します。これにより、データソースが変更されると UI が更新されるようになります。
Advanced Settings > Update Trigger リストから、On Source Changed を選択します。これはデフォルト設定です。これにより、データソースが変更されると UI が更新されるようになります。
Add binding を選択して変更を適用します。
UI Builder を保存して終了します。ExampleObject.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:Label text="Label" data-source="ExampleObject.asset" data-source-path="simpleLabel">
        <Bindings>
            <engine:DataBinding property="text" binding-mode="ToTarget" />
        </Bindings>
    </engine:Label>
</engine:UXML>

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

データソースアセットの LabelText のラベルテキストを更新し、UI に複製された変更を確認します。

プロジェクトの Assets フォルダーで ExampleObject.asset を選択します。
Inspector ウィンドウの Simple Label フィールドに、ランダムなテキストを入力します。UI Builder ビューポートの Label テキストが、入力したテキストに変わります。

追加リソース

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

C# スクリプトでのランタイムバインディングの作成