バージョン: 2021.3 以降
この例では、カスタム Inspector、カスタムエディター、およびシリアル化されたオブジェクトの間のバインディングを作成する方法を紹介します。
この例では、以下を作成します。
InspectorElement
内に同じバインディングを作成するカスタムエディターウィンドウこの例で作成するすべてのファイルは、GitHub リポジトリ にあります。
このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。
カスタム Inspector UI クラス TankScript
を定義し、USS でスタイルを設定し、UXML でビジュアル要素とバインディングパスを設定します。
Project ウィンドウに、create-a-binding-inspector
という名前のフォルダーを作成し、ファイルを保存します。
TankScript.cs
という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。
using UnityEngine;
[ExecuteInEditMode]
public class TankScript : MonoBehaviour
{
public string tankName = "Tank";
public float tankSize = 1;
private void Update()
{
gameObject.name = tankName;
gameObject.transform.localScale = new Vector3(tankSize, tankSize, tankSize);
}
}
create-a-binding-inspector フォルダーに、Editor
という名前のフォルダーを作成します。
Editor フォルダー内に tank_inspector_styles.uss
という名前の USS ファイルを作成し、そのコンテンツを以下のように置き換えます。
.container {
background-color: rgb(80, 80, 80);
flex-direction: column;
}
Label {
background-color: rgb(80, 80, 80);
}
TextField:hover {
background-color: rgb(255, 255, 0);
}
FloatField {
background-color: rgb(0, 0, 255);
}
tank_inspector_uxml.uxml
という名前の UXML ファイルを作成し、そのコンテンツを以下のように置き換えます。
<UXML xmlns="UnityEngine.UIElements" xmlns:ue="UnityEditor.UIElements">
<Style src="tank_inspector_styles.uss" />
<VisualElement name="row" class="container">
<Label text="Tank Script - Custom Inspector" />
<ue:PropertyField binding-path="tankName" name="tank-name-field" />
<ue:PropertyField binding-path="tankSize" name="tank-size-field" />
</VisualElement>
</UXML>
TankScript
用のカスタム Inspector を登録する C# スクリプトを作成します。Inspector ウィンドウでのバインディングは暗示的であるため、Bind()
メソッドを呼び出す必要はありません。
TankEditor.cs
という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
[CustomEditor(typeof(TankScript))]
public class TankEditor : Editor
{
[SerializeField]
VisualTreeAsset visualTree;
public override VisualElement CreateInspectorGUI()
{
var uxmlVE = visualTree.CloneTree();
return uxmlVE;
}
}
Project ウィンドウで TankEditor.cs
を選択します。
Inspector で tank_inspector_uxml.uxml
を ビジュアルツリー にドラッグします。
Inspector で tank_inspector_styles.uss
を スタイルシート にドラッグします。
TankScript.cs
を Inspector の Add Component にドラッグします。これで、Inspector に Tank Script コンポーネントが生成されます。InspectorElement
を使ってバインドするTankScript
オブジェクトに関連する 2 つのフィールドを持つカスタムエディターウィンドウを作成します。InspectorElement
コンストラクター を呼び出す C# スクリプトを作成します。InspectorElement
は UI を作成し、UI をオブジェクトに自動的にバインドします。
SimpleBindingExampleInspectorElement.cs
という名の C# スクリプトを作成し、そのコンテンツを以下に置き換えます。
using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;
namespace UIToolkitExamples
{
public class SimpleBindingExampleInspectorElement : EditorWindow
{
[MenuItem("Window/UIToolkitExamples/Simple Binding Example Inspector Element")]
public static void ShowDefaultWindow()
{
var wnd = GetWindow<SimpleBindingExampleInspectorElement>();
wnd.titleContent = new GUIContent("Simple Binding with Inspector Element");
}
TankScript m_Tank;
public void OnEnable()
{
m_Tank = FindObjectOfType<TankScript>();
if (m_Tank == null)
return;
var inspector = new InspectorElement(m_Tank);
rootVisualElement.Add(inspector);
}
}
}