mcpField
U
ui-imgui

ui-imgui

github.com/unity-technologies開発1.2k4.7k 回インストール1 日前に更新
リポジトリ

ui-imgui について

Unity のレガシー IMGUI コードの保守・作成を支援し、エディターウィンドウ、カスタムインスペクター、プロパティドロワー、実行時デバッグ表示を扱うスキルです。プロジェクトの規約やシリアライズ済みプロパティを重視し、新規エディター UI では UI Toolkit も案内します。

主な機能

  1. 01レガシー IMGUI コードのガイド
  2. 02EditorWindow とインスペクターのパターン
  3. 03プロパティドロワーとデバッグ表示
  4. 04レイアウトと GUI 要素の説明
  5. 05シリアライズ済みプロパティと Undo の実践

活用シーン

  1. 01既存 OnGUI エディターツールの更新
  2. 02明示的な要望による IMGUI インスペクター作成
  3. 03実行時デバッグ表示の追加
  4. 04レガシー PropertyDrawer の保守

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/unity-technologies/skills --skill ui-imgui

インストール後、Claude Code で/ui-imguiを入力して読み込まれたか確認します。

同梱ファイルreferences/gui-elements.mdreferences/templates.md

詳細

進める前に: ユーザーが IMGUI/OnGUI に明示的に言及せずに、新しいエディターウィンドウ、カスタムインスペクター、または PropertyDrawer の作成について尋ねている場合は、代わりに UI Toolkit(CreateGUI)の使用を推奨してください。これが最新の方法です。次の場合に限り、IMGUI を使用してください。

  • ユーザーが既存の IMGUI コードを変更している
  • ユーザーが IMGUI/即時モードを明示的に指定している
  • プロジェクトでエディターツールに IMGUI のみを使用している

このスキルが有効になったら、次のリファレンスファイルを読んでください。

このスキルを使用する場面

重要: このスキルはレガシー IMGUI コード専用です。次の場合に使用してください。

  • ユーザーが既存の IMGUI エディターコード(OnGUI()、OnInspectorGUI() を含むファイル)を保守・更新している
  • ユーザーが IMGUI/即時モード GUI を明示的に指定している
  • プロジェクトでエディターツールすべてに IMGUI のみを使用している

次の場合、このスキルを使用しないでください。

  • 新しいエディターウィンドウ(代わりに UI Toolkit と CreateGUI() を使用)
  • 新しいカスタムインスペクター(代わりに UI Toolkit を使用)
  • IMGUI または OnGUI に明示的に言及していない依頼

レガシー IMGUI の用途:

  • エディターウィンドウ — OnGUI() を持つ EditorWindow クラス
  • カスタムインスペクター — OnInspectorGUI() を持つ Editor、PropertyDrawer クラス
  • デバッグオーバーレイ — MonoBehaviour の OnGUI()(ランタイム)

IMGUI はランタイムのゲーム UI 用ではありません。代わりに UI Toolkit または uGUI を使用してください。

範囲

依頼された内容のみを生成してください(レガシー IMGUI コードの場合):

依頼出力備考
エディターウィンドウ(IMGUI/OnGUI)OnGUI() を持つ EditorWindowIMGUI が明示的に指定された場合のみ
カスタムインスペクター(IMGUI)OnInspectorGUI() を持つ EditorIMGUI が明示的に指定された場合のみ
PropertyDrawer(IMGUI)OnGUI() を持つ PropertyDrawerIMGUI が明示的に指定された場合のみ
デバッグオーバーレイOnGUI() を持つ MonoBehaviourランタイムのデバッグ
既存の IMGUI スクリプトの更新既存の OnGUI コードを変更常に適切

曖昧な場合は確認してください。

  • 「インスペクター」→ 特定の型向けの Custom Editor ですか、それとも PropertyDrawer ですか?また、次の点も確認してください: UI Toolkit(最新)と IMGUI(レガシー)のどちらを使用しますか?
  • 「エディターウィンドウ」→ まず確認してください: UI Toolkit(最新/CreateGUI)と IMGUI(レガシー/OnGUI)のどちらを使用しますか?
  • 「ツールウィンドウ」→ どのような機能を持つ EditorWindow ですか?どの UI システムを使用しますか?

規約

まずプロジェクトのパターンに従ってください。 デフォルトを適用する前に、既存のエディタースクリプトを検索してください。

種類規約良い例悪い例
スクリプト名PascalCaseMyToolWindow.csmy-tool-window.cs
EditorWindow[Name]Window.csLevelEditorWindow.csLevelEditor.cs
Custom Editor[Type]Editor.csEnemyEditor.csEnemyInspector.cs
PropertyDrawer[Type]Drawer.csRangeDrawer.csRangePropertyDrawer.cs
場所Editor フォルダーAssets/Editor/Assets/Scripts/

Editor フォルダーは必須です — UnityEditor 名前空間を使用するスクリプトは、Editor フォルダー内に置く必要があります。そうしないとビルドに失敗します。

ワークフロー

  1. 分析 — 必要なスクリプトの種類(EditorWindow、Editor、PropertyDrawer など)を判断する
  2. 検索 — パターンを合わせるために既存のエディタースクリプトを探す
  3. プロジェクトのパターンに従う — フォルダー構成と命名を合わせる
  4. スクリプトを作成 — 適切な基底クラスと属性を使用する
  5. OnGUI を実装 — レイアウトグループでインターフェースを構築する

スクリプト構造

EditorWindow
[MenuItem attribute] → adds to menu
ShowWindow() static method → opens window
OnGUI() → draws interface
OnEnable/OnDisable → initialization/cleanup
Custom Editor
[CustomEditor attribute] → targets component type
OnInspectorGUI() → draws inspector
OnEnable() → cache SerializedProperties
serializedObject.Update/ApplyModifiedProperties → undo support
PropertyDrawer
[CustomPropertyDrawer attribute] → targets type or attribute
OnGUI(Rect, SerializedProperty, GUIContent) → draws property
GetPropertyHeight() → custom height if needed

主なルール

  • GUIStyle オブジェクトをキャッシュする — OnGUI 内で新しい GUIStyle を作成しないでください(フレームごとにメモリが割り当てられます)
  • SerializedProperty を使用する — インスペクターで適切な元に戻す/やり直す機能をサポートするために使用します
  • ApplyModifiedProperties() を呼び出す — シリアライズされたオブジェクトを変更した後に呼び出します
  • EditorGUILayout を使用する — エディタースクリプトで使用します(自動レイアウト)
  • GUILayout を使用する — ランタイムの OnGUI で使用します
  • Begin/End の組み合わせ — BeginHorizontal と EndHorizontal など、必ず対応させてください
  • Editor フォルダーが必須 — Editor フォルダー内に配置しないと、スクリプトのビルドに失敗します

レイアウトの基本

水平グループ:

EditorGUILayout.BeginHorizontal();
// elements appear side by side
EditorGUILayout.EndHorizontal();

垂直グループ:

EditorGUILayout.BeginVertical("box");
// elements appear stacked, with box style
EditorGUILayout.EndVertical();

スクロールビュー:

scrollPos = EditorGUILayout.BeginScrollView(scrollPos);
// scrollable content
EditorGUILayout.EndScrollView();

折りたたみ可能なセクション:

showSection = EditorGUILayout.Foldout(showSection, "Section Name");
if (showSection)
{
    EditorGUI.indentLevel++;
    // section content
    EditorGUI.indentLevel--;
}

よくあるパターン

アクション付きボタン:

if (GUILayout.Button("Do Something"))
{
    // action here
}

ラベル付きプロパティフィールド:

EditorGUILayout.PropertyField(myProperty, new GUIContent("Label"));

オブジェクト参照フィールド:

myObject = (MyType)EditorGUILayout.ObjectField("Label", myObject, typeof(MyType), true);

無効化されたグループ:

EditorGUI.BeginDisabledGroup(condition);
// disabled elements
EditorGUI.EndDisabledGroup();

ベストプラクティス

  • 元に戻す機能をサポートするには、SerializedObject と SerializedProperty を使用します
  • プロパティ参照は OnEnable() でキャッシュします
  • シリアライズされていない変更に限り、EditorUtility.SetDirty() を使用します
  • オブジェクトを直接変更する前に、Undo.RecordObject() を使用します
  • 外観を統一するには、EditorStyles を使用します
  • 要素を離して配置するには、GUILayout.FlexibleSpace() を使用します

スクリプトテンプレートの全容については、references/templates.md を参照してください。 要素の一覧については、references/gui-elements.md を参照してください。

コメント