【Unity】【UI Toolkit】スクロール位置などビューに関わるデータを保存するView Dataの使い方

UnityのUI Toolkitで、スクロール位置などビューに関わるデータを保存するView Dataを使う方法についてまとめました。

View Dataとは？
View Dataの使い方
使ってみる
動作確認
参考

Unity 2022.2.19

View Dataとは？

UnityのEditor WindowやInspectorにおいて、Scroll Viewのスクロール位置やFoldoutの折りたたみ状態などはウィンドウやUnity自体が閉じても保持しておきたい場合があります。
UI ToolkitにはこれらをView Dataとして永続化する機能があります。

View DataはEditor専用の機能で、以下のUI要素で有効です。

ScrollView
ListView
Foldout
TreeView

また現時点では独自UIに対してView Dataを使うことはできません。

View Dataの使い方

View Dataの使い方は簡単で、ScrollViewのView Data Keyに文字列を入力するだけです。
文字列は任意ですが、永続化の際のキーになるので被らないように注意する必要があります。

また、View Data Keyはスクリプトから設定することもできます。

var scrollView = rootVisualElement.Q<ScrollView>();
scrollView.viewDataKey = "example-window-scroller";

使ってみる

それでは実際にView Dataを使ってみます。

まずUI BuilderでScroll Viewと、その中に適当な要素を複数配置しておきます。

UXMLは以下の通りです。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <ui:ScrollView>
        <ui:VisualElement style="flex-grow: 1; background-color: rgb(255, 0, 0); height: 100px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />
        <ui:VisualElement style="flex-grow: 1; background-color: rgb(255, 0, 0); height: 100px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />
        <ui:VisualElement style="flex-grow: 1; background-color: rgb(255, 0, 0); height: 100px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />
        <ui:VisualElement style="flex-grow: 1; background-color: rgb(255, 0, 0); height: 100px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />
        <ui:VisualElement style="flex-grow: 1; background-color: rgb(255, 0, 0); height: 100px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />
        <ui:VisualElement style="flex-grow: 1; background-color: rgb(255, 0, 0); height: 100px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-left: 6px; margin-right: 6px; margin-top: 6px; margin-bottom: 6px;" />
    </ui:ScrollView>
</ui:UXML>

次にこれを表示するEditor Windowを作成します。
今回はこのEditor WindowのスクリプトからView Data Keyを設定しています。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleWindow : EditorWindow
{
    [SerializeField] private VisualTreeAsset visualTreeAsset;

    public void CreateGUI()
    {
        visualTreeAsset.CloneTree(rootVisualElement);

        var scrollView = rootVisualElement.Q<ScrollView>();
        scrollView.viewDataKey = "example-window-scroller";
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<ExampleWindow>();
    }
}