Bind to a UXML template

バージョン: 2021.3 以降

This example demonstrates how to set binding paths with UXML templates.

例の概要

This example creates an asset menu item. The menu creates a GameSwitch asset with three template instances that bind to properties of the GameSwitch object.

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

要件

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

• UI Builder
• ビジュアルツリー
• UXML
• USS

Create the GameSwitch asset

Create scripts to define the GameSwitch struct and a custom asset to hold properties of the GameSwitch struct.

1. Unity で任意のテンプレートでプロジェクトを作成します。

2. In your Project window, create a folder named bind-uxml-template to store all your files.

3. GameSwitch.cs という名前の C# スクリプトを作成し、そのコンテンツを以下のように置き換えます。

   using System;
   
   [Serializable]
   public struct GameSwitch
   {
       public string name;
       public bool enabled;
   }
   

4. Create a C# script named GameSwitchesAsset.cs and replace its contents with the following:

   using UnityEngine;
   
   [CreateAssetMenu(menuName = "UIToolkitExamples/GameSwitches")]
   public class GameSwitchesAsset : ScriptableObject
   {
       public GameSwitch useLocalServer;
       public GameSwitch showDebugMenu;
       public GameSwitch showFPSCounter;
   
       // Use the Reset function to provide default values
       public void Reset()
       {
           useLocalServer = new GameSwitch() { name = "Use Local Server", enabled = false };
           showDebugMenu = new GameSwitch() { name = "Show Debug Menu", enabled = false };
           showFPSCounter = new GameSwitch() { name = "Show FPS Counter", enabled = true };
       }
   }
   

Create the UXML template and files

Create a UXML template that you can use for each GameSwitch struct instance, and a UXML file that uses the template.

1. game_switch.uxml という名前のUI ドキュメントを作成し、そのコンテンツを以下のように置き換えます。

   <UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
       <Box style="flex-direction: row;">
           <Toggle binding-path="enabled" />
           <TextField binding-path="name" readonly="true" style="flex-grow: 1;"/>
       </Box>
   </UXML>
   

2. In the bind-uxml-template folder, create a folder named Editor.

3. In the Editor folder, create a UI Document named game_switches_editor.uxml and replace its contents with the following:

   <UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
       <Template name="switch" src="../game_switch.uxml"/>
       <Instance template="switch" binding-path="useLocalServer" />
       <Instance template="switch" binding-path="showDebugMenu" />
       <Instance template="switch" binding-path="showFPSCounter" />
   </UXML>
   

   Note: This is the main UXML file for the custom Editor. Each property binds to an instance of game_switch.uxml through the binding-path attribute of Instance .

Create the asset menu and the asset

Create a script to register a custom Editor for GameSwitchesAsset.

1. Create a C# script named GameSwitchesEditor.cs and replace its content with the following:

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   
   namespace UIToolkitExamples
   {
       [CustomEditor(typeof(GameSwitchesAsset))]
       public class GameSwitchesEditor : Editor
       {
           [SerializeField]
           VisualTreeAsset visualTreeAsset;
   
           public override VisualElement CreateInspectorGUI()
           {
               return visualTreeAsset.CloneTree();
           }
       }
   }
   

バインディングのテスト

1. In Unity, select Assets > Create > UIToolkitExamples > GameSwitches to create a new asset in your project’s Assets folder.
2. Select the newly created asset. The Inspector shows toggles and text fields that bind to the GameSwitchesAsset.useLocalServer, GameSwitchesAsset.showDebugMenu, and GameSwitchesAsset.showFPSCounter properties.

その他の参考資料

• SerializedObject のデータバインディング
• バインド可能な要素
• バインディングデータ型変換
• 実装の詳細
• バインディングの例