Skip to content

Understanding the Inspector UI

Jungle replaces the default Inspector with a visual system designed for composing behaviors. Instead of writing code to wire up a speed source or a trigger, you click a button, pick from a categorized menu, and configure the result - all inside the Inspector.

Every Jungle-powered component uses the same visual language, so once you learn it in one place, you can read it everywhere.

What it looks like in practice:

  • A "Speed" field shows "Constant Float" - click it, switch to "Animation Curve Float", and the field now shows a curve editor instead of a number
  • A "Conditions" list lets you add distance checks, capacity limits, or tag filters by picking them from a popup menu
  • Sections and tabs keep complex components organized without scrolling through walls of fields

TypeSelectableField

The TypeSelectableField is the core building block. Whenever a component has a field that can be one of many types (a value source, a process, a condition), it renders as a TypeSelectableField.

Anatomy

A TypeSelectableField has three parts:

  1. Type selector button - Displays the currently selected type name. Click it to open the Class Selection popup and choose a different behavior.
  2. Foldout body - Expand to see the configuration fields specific to the selected type.
  3. Help toggle - When available, shows a plain-language description of what the selected type does.

Interaction

  • Click the type name to open the selection popup
  • Click the foldout arrow to expand or collapse the type's properties
  • Right-click for context menu options (copy, paste, reset)

Visual Styles

TypeSelectableField supports four visual styles, configurable globally via Project Settings > Jungle:

Style Description
Classic Standard foldout with a bordered header
Ghost Minimal, blends into the surrounding Inspector
Pill Rounded pill-shaped type button
Underline Type name with an underline accent

Changing the visual style

Open Edit > Project Settings, find the Jungle section, and select your preferred TypeSelectableField style. The change applies globally to all Jungle components.


JungleList

When a field is a list of polymorphic types (e.g., a list of conditions or a list of modifiers), Jungle renders it as a JungleList instead of Unity's default ReorderableList.

Features

  • Add button — Opens the type picker to add a new element of a selected type
  • Remove button — Delete individual elements
  • Drag reorder — Grab the handle to reorder elements by dragging
  • Per-element foldout — Each element is a TypeSelectableField with its own expand/collapse

Toggle Set Mode

Some lists use Toggle Set rendering. Instead of a growable list with an add button, the Inspector shows one row per possible type. Each row has a toggle:

  • Checked — The type is active; its properties render inline
  • Unchecked — The type is inactive; the row collapses to a single line

Toggle sets are used when each type should appear at most once (e.g., a set of optional modifiers where you either enable or disable each one).

UniqueTypes

Toggle set mode implies UniqueTypes — the list enforces that no two elements share the same concrete type. Regular JungleLists can also use UniqueTypes without toggle set rendering, in which case the add button simply hides types already present.


Sections and Tabs

Jungle components with many fields use section attributes to organize the Inspector into logical groups.

SectionAttribute

Groups fields under a collapsible header. Sections can be nested via SubsectionAttribute for finer organization.

[Section]  Main Section Header
├── Field A
├── Field B
│   [Subsection]  Subsection Header
│   ├── Field C
│   └── Field D
└── Field E

TabSectionAttribute

Renders fields as horizontal tabs. Only one tab is visible at a time, keeping the Inspector compact even for components with many settings.

AutoSectionedEditor

Jungle's custom editor base class (AutoSectionedEditor) reads these attributes automatically and generates the sectioned layout. You do not need to write custom editor code to get organized Inspectors — just annotate your fields.


Decorators

Jungle extends Inspector rendering with decorators — additional visual overlays attached to managed reference fields.

Decorator What It Does
ValueDisplayDecorator Shows the current runtime value next to a value provider field (e.g., "Position: (1.2, 3.4, 5.6)")
DebugGizmoDecorator Draws scene gizmos based on the field's current value (e.g., position markers, direction arrows)
LocalValueAutoResolveDecorator Automatically resolves value providers to local components on instantiation, so fields work out of the box without manual assignment

Decorators activate automatically when applicable. You do not need to configure them manually.