Unity UI Toolkit

Unity UI Toolkit

UXML マークアップ、USS スタイル設定、C# VisualElement API、最新の UI パターンなど、Unity UI Toolkit の開発を支援します。

このスキルでできること

UXML の構造

• 適切な要素階層と命名規則
• 一般的なコントロール：TextField、Button、Toggle、Slider、ObjectField、ListView
• レイアウトコンテナー：VisualElement、ScrollView、Foldout、TwoPaneSplitView
• テンプレートとバインディングを使ったデータ駆動型 UI

USS のスタイル設定

• クラスベースのスタイル設定とセレクター
• Flexbox レイアウト（flex-direction、justify-content、align-items）
• USS 変数とダークテーマ向けの最適化
• 疑似クラス（:hover、:active、:disabled）
• トランジションとアニメーション

C# VisualElement API

• Query API：rootElement.Q<Button>("my-button")
• イベント処理：.clicked += と .RegisterValueChangedCallback()
• コンストラクターを使った動的な UI 作成
• Bind() と SerializedObject を使ったデータバインディング

ベストプラクティス

• 構造には UXML、スタイル設定には USS、ロジックには C# を使います
• Query API からアクセスできるように要素に名前を付けます
• インラインスタイルではなくクラスを使ってスタイルを設定します
• VisualElement の参照をフィールドにキャッシュします
• OnDestroy() で適切にイベントをクリーンアップします

一般的なパターン

エディターウィンドウのセットアップ：

public void CreateGUI() {
    var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("path/to.uxml");
    visualTree.CloneTree(rootVisualElement);

    var button = rootVisualElement.Q<Button>("my-button");
    button.clicked += OnButtonClick;
}

USS クラスの切り替え：

element.AddToClassList("active");
element.RemoveFromClassList("active");
element.ToggleInClassList("active");

データバインディング：

var so = new SerializedObject(target);
rootVisualElement.Bind(so);

Unity のバージョン要件

• ランタイム UI Toolkit には Unity 2021.2+ が必要です
• エディター専用 UI Toolkit（機能制限あり）には Unity 2019.4+ が必要です

API の全ドキュメントについては、ui-toolkit-reference.md を参照してください。

他のコンポーネントとの使い分け

次の場合はこのスキルを使用します：UI Toolkit インターフェースの構築、UXML/USS の記述、または C# での VisualElement の操作

プロジェクトで UGUI と UI Toolkit のどちらを使うか選ぶ場合は、unity-ui-selector スキルを使用します

複雑な UI ロジックやカスタム VisualElement コントロールを実装する場合は、@unity-scripter エージェントを使用します

UXML/USS ファイルを使って新しい UI Toolkit エディターウィンドウを生成する場合は、EditorScriptUIToolkit テンプレートを使用します

関連スキル

• unity-ui-selector：UGUI と UI Toolkit のどちらを使うか選ぶのに役立ちます
• unity-template-generator：UI Toolkit エディタースクリプトのテンプレートを生成します
• unity-script-validator：UI Toolkit のコードパターンを検証します