【Unity】UIToolkitを使ったので覚書

UI ToolKitを導入して効率よくUIを構築する – Unity for Pro

触った雑感

上記サイトを参照してUIToolkitを使ってみました。
引用先にも書いていますがwebの仕様に非常に似ています

UXML/USSファイルでデザインを作成します。
webのhtml/cssと同じ感じです。
そしてC#でイベントを取得したりUSSのstyleを変更したりできます。
C#がwebでいうJavaScriptという感じでしょうか。

なのでweb開発の経験があればすぐに使いこなせるじゃないかと思います。

uGUIの場合はPrefabやシーンにUIの情報が入っているのでGitでコンフリクトを起こした時に修正が大変でした。
一方でUIToolkitはUXML/USSのコードにUIの情報が入っているのでその点修正はだいぶ楽になると思いました。

UIToolkitでデザインされたUIをC#で動かす

ヒエラルキーへの導入等は上部引用先の【UI ToolKitでの制作工程紹介】をご覧ください。

C#でUI内の要素VisualElementを取得する

UI Toolkitで配置された要素はすべて【VisualElement】を継承しています
すべてのVisualElementを取得するには

[SerializeField] private UIDocument _uiDocument;
 void Start()
    {
       var elements = _uiDocument.rootVisualElement.Query();
    }

ですべてのVisualElementが取得できます。
またUI内のすべてのButtonを所得した時には

 var buttons　= _uiDocument.rootVisualElement.Query<Button>();

名前で取得する場合は

var element = _uiDocument.rootVisualElement.Q("element00");
var button = _uiDocument.rootVisualElement.Q<Button>("button00");

また、上記で取得したelementもVisualElementですので当然

var childrenElements　 = element.Query();

と書くことでそのVisualElementの子要素のリストを取得できます。

C#で動的にVisualElementを追加する。

C#で動的にVisualElementを追加するにはVisualElementにaddすることで簡単にできます。

var element = _uiDocument.rootVisualElement.Q("element00");
var newVisualElement = new Button();
newVisualElement.name = "AddButton";
newVisualElement.AddToClassList("sample-button");
element.Add(newVisualElement);

まずUI内にあるVisualElementを名前で取得
新しいButtonを作成
ここでのButtonはUnityEngine.UIElements.Buttonなので注意。
そして作成したButtonに名前をつけ、USSのclassを追加しています。
ここでのclassはC#のclassではないので注意してください。
buttonにclassをAddすることで見た目をC#で簡単に決めれるので便利ですね。

C#で動的にUXMLファイルからテンプレートを取得しVisualElementに追加する

テンプレートの作り方については上部引用先の【UXMLをテンプレート化する】を参照して頂けるとです

var element = _uiDocument.rootVisualElement.Q("element00");
VisualTreeAsset uiAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/ButtonTemplate.uxml");
uiAsset.CloneTree(element);

C#で動的にVisualElementのUSSのclassを変更する。

button.ClearClassList();
button.AddToClassList("sample-button2");

まずclassをClearしclassをAddする感じです。

        if (button.ClassListContains("sample-button"))
        {
            button.ClearClassList();
            button.AddToClassList("sample-button2");

        }

button.ClassListContains("hoge")でclassに入っているのかboolが取得できます。
特定のclassのみ外したい場合は

button.RemoveFromClassList("sample-button");

C#でVisualElementのイベントを取得する

ボタンのクリックイベントを取得するには

button.clickable.clicked += () =>　Debug.log("click!!");

その他イベントの取得は

element.RegisterCallback<MouseEnterEvent>(e => Debug.Log("MouseEnter"));

イベントの一覧はUnityのマニュアルで確認してください。

イベントの参照 - Unity マニュアル

あと以下のサイトの
コールバック先でイベントターゲットのVisualElementを取得する
はとても便利そうなので使ってみたいです

https://qiita.com/ohbashunsuke/items/ae1da96e582aef734eee