ui-imgui について
ui-imguiは、既存のUnity IMGUIエディターコードの保守や、IMGUIを明示的に求める作業向けのスキルです。レガシーなエディターワークフローを扱い、新規UIにはUI Toolkitを案内します。
主な機能
- 01レガシーIMGUIコードの指針
- 02EditorWindow、インスペクター、ドロワーのパターン
- 03OnGUIのレイアウトと要素の規約
- 04SerializedPropertyとUndoの指針
- 05プロジェクト規約とフォルダーの確認
活用シーン
- 01既存OnGUIエディターウィンドウの更新
- 02カスタムインスペクターやPropertyDrawerの保守
- 03IMGUIデバッグオーバーレイの追加
- 04UI ToolkitとIMGUIの選択相談
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ unity-technologies/ unity-agent-plugin --skill ui-imguiインストール後、Claude Code で/ui-imguiを入力して読み込まれたか確認します。
同梱ファイルreferences/gui-elements.mdreferences/templates.md
詳細
進める前に: ユーザーが IMGUI/OnGUI に明示的に言及せずに、新しいエディターウィンドウ、カスタムインスペクター、または PropertyDrawer の作成について尋ねている場合は、代わりに UI Toolkit(CreateGUI)の使用を推奨してください。これが最新の方法です。次の場合に限り、IMGUI を使用してください。
- ユーザーが既存の IMGUI コードを変更している
- ユーザーが IMGUI/即時モードを明示的に指定している
- プロジェクトでエディターツールに IMGUI のみを使用している
このスキルが有効になったら、次のリファレンスファイルを読んでください。
- references/templates.md — EditorWindow、Inspector、PropertyDrawer のテンプレート
- references/gui-elements.md — GUI 要素、レイアウトグループ、スタイル設定
このスキルを使用する場面
重要: このスキルはレガシー 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() を持つ EditorWindow | IMGUI が明示的に指定された場合のみ |
| カスタムインスペクター(IMGUI) | OnInspectorGUI() を持つ Editor | IMGUI が明示的に指定された場合のみ |
| PropertyDrawer(IMGUI) | OnGUI() を持つ PropertyDrawer | IMGUI が明示的に指定された場合のみ |
| デバッグオーバーレイ | OnGUI() を持つ MonoBehaviour | ランタイムのデバッグ |
| 既存の IMGUI スクリプトの更新 | 既存の OnGUI コードを変更 | 常に適切 |
曖昧な場合は確認してください。
- 「インスペクター」→ 特定の型向けの Custom Editor ですか、それとも PropertyDrawer ですか?また、次の点も確認してください: UI Toolkit(最新)と IMGUI(レガシー)のどちらを使用しますか?
- 「エディターウィンドウ」→ まず確認してください: UI Toolkit(最新/CreateGUI)と IMGUI(レガシー/OnGUI)のどちらを使用しますか?
- 「ツールウィンドウ」→ どのような機能を持つ EditorWindow ですか?どの UI システムを使用しますか?
規約
まずプロジェクトのパターンに従ってください。 デフォルトを適用する前に、既存のエディタースクリプトを検索してください。
| 種類 | 規約 | 良い例 | 悪い例 |
|---|---|---|---|
| スクリプト名 | PascalCase | MyToolWindow.cs | my-tool-window.cs |
| EditorWindow | [Name]Window.cs | LevelEditorWindow.cs | LevelEditor.cs |
| Custom Editor | [Type]Editor.cs | EnemyEditor.cs | EnemyInspector.cs |
| PropertyDrawer | [Type]Drawer.cs | RangeDrawer.cs | RangePropertyDrawer.cs |
| 場所 | Editor フォルダー | Assets/Editor/ | Assets/Scripts/ |
Editor フォルダーは必須です — UnityEditor 名前空間を使用するスクリプトは、Editor フォルダー内に置く必要があります。そうしないとビルドに失敗します。
ワークフロー
- 分析 — 必要なスクリプトの種類(EditorWindow、Editor、PropertyDrawer など)を判断する
- 検索 — パターンを合わせるために既存のエディタースクリプトを探す
- プロジェクトのパターンに従う — フォルダー構成と命名を合わせる
- スクリプトを作成 — 適切な基底クラスと属性を使用する
- 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 を参照してください。