editor-component-editors

Implement ECS component editors with collapsible UI and vector controls.

13|2|Updated Jul 17, 2023
One-click install
npx skills add https://github.com/kateusz/GameEngine --skill editor-component-editors
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: editor-component-editors
Source: https://github.com/kateusz/GameEngine/tree/main/.claude/skills/editor-component-editors
Command: npx skills add https://github.com/kateusz/GameEngine --skill editor-component-editors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides developers in creating intuitive and consistent ECS component editors for the editor's Properties panel. It ensures proper UI for various property types (vectors, primitives) and seamless integration with the ComponentEditorRegistry and Dependency Injection, preventing fragmented or poorly styled component UIs.

Core Features & Use Cases

  • IComponentEditor Interface: Implement the core interface for all component editors.
  • Consistent UI Wrapper: Utilize ComponentEditorRegistry.DrawComponent for standardized collapsible UI, component headers, and remove buttons.
  • Vector Controls: Use VectorPanel for axis-colored vector (Vector2/Vector3) controls with reset functionality.
  • Primitive Property Editing: Leverage UIPropertyRenderer for simple int, float, bool, string properties.
  • DI Registration: Ensure component editors are correctly registered in the DryIoc container.
  • Use Case: To create an editor for a new HealthComponent, this Skill guides you to use ComponentEditorRegistry.DrawComponent for the overall structure, UIPropertyRenderer for an integer MaxHealth property, and VectorPanel for a RespawnPosition (Vector3) property.

Quick Start

Guide me through creating a new component editor for a HealthComponent that displays an integer Health property and a Vector3 SpawnPosition property.

Frequently Asked Questions about editor-component-editors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a component editor for ECS properties in the Properties panel?

Build a component editor by implementing the IComponentEditor interface and using ComponentEditorRegistry.DrawComponent for the wrapper, UIPropertyRenderer for primitive types, and VectorPanel for Vector2/Vector3 properties. Register the editor in the DryIoc dependency injection container.

What's the best way to display vector properties in an ECS component editor?

Use VectorPanel to render axis-colored Vector2 and Vector3 controls with reset functionality. VectorPanel integrates directly into ComponentEditorRegistry.DrawComponent and handles vector mutations on the entity.

How do I render primitive type properties like integers and booleans in a component editor?

Leverage UIPropertyRenderer to create consistent controls for int, float, bool, and string properties. UIPropertyRenderer mutates component properties directly on the entity and integrates seamlessly with the collapsible component UI structure.

Why should I use ComponentEditorRegistry instead of building editors individually?

ComponentEditorRegistry.DrawComponent provides standardized collapsible headers, remove buttons, and consistent styling across all component editors. It ensures uniform UI and prevents fragmented or poorly styled component interfaces.

Do I need to register component editors in the DI container?

Yes. Component editors must be registered in the DryIoc container for proper dependency injection and discovery. Registration ensures the ComponentEditorRegistry can locate and instantiate editors for each component type.

Can I reuse property controls across multiple component editors?

Yes. UIPropertyRenderer and VectorPanel are reusable property controls designed for consistent rendering across editors. LayoutDrawer provides layout utilities for organizing multiple controls within collapsible component sections.