Inspector Decorators

Decorators mark fields and methods for the Chrome extension and for saving. Use them in components and custom GameObjects.

import { Component, Inspector, InspectorButton, InspectorField } from 'bare-engine';

export class TurretComponent extends Component
{
    @InspectorField
    @Inspector.Limit(0, 10)
    @Inspector.Description('Shots per second')
    fireRate = 2;

    @InspectorField
    @Inspector.Dropdown(['bullet', 'rocket', 'laser'])
    ammo = 'bullet';

    @InspectorButton
    Fire() { ... }
}

Every decorator is available through Inspector, which is handy for autocomplete: @Inspector.Limit, @Inspector.Label, and so on. Each can also be imported on its own, like @Limit. @InspectorField, @InspectorButton, @InspectorClass and @InspectorBaseClass are the same as @Inspector.Field, @Inspector.Button, @Inspector.Class and @Inspector.BaseClass.

Fields

Decorator	Description
@InspectorField	Show the field in the inspector, and allow setting it from prefabs and levels.
@Inspector.Label('Name')	Show a different name.
@Inspector.Description('…')	Add a tooltip.
@Inspector.Locked	Show the value, but don't allow editing.
@Inspector.Limit(min, max)	Keep a number within bounds.
@Inspector.Int	Whole numbers only.
@Inspector.Decimal(places)	Show this many decimals.
@Inspector.Percentage	A value from 0 to 1.
@Inspector.Dropdown(values)	Pick from a list. values can be an array or a function returning one.
@Inspector.Enum(MyEnum)	Pick from a TypeScript enum's members.

A field can also be a getter and setter pair, to show a computed value or react to edits:

import { Component, Inspector, InspectorField } from 'bare-engine';

export enum State { Idle, Walking }

export class StateComponent extends Component
{
    private currentState = State.Idle;

    @InspectorField
    @Inspector.Enum(State)
    get state(): State { return this.currentState; }
    set state(value: State) { this.currentState = value; }
}

Examples: the Platformer's player fields (Limit, Label, Locked and a getter/setter), and the Shmup's shoot settings (Limit, Decimal).

Buttons

Decorator	Description
@InspectorButton	Show a button that calls the method.
@InspectorButton('Label')	Same, with a custom label.

Handy for debugging: a Fire() or Die() button you can press while the game runs.

Examples: the Shmup's Shoot button, and the RPG weapon's Slash button.

Classes

Decorator	Description
@InspectorClass	Show another object's inspector fields as a group inside this one.
@InspectorBaseClass	Register a GameObject class so it can be used as a prefab baseClass. See Custom GameObjects.

@InspectorBaseClass example: the RPG's Weapon is registered this way.

@InspectorClass example: the Shmup's scene shows a Watcher, whose getters count enemies and bullets.

Saving and run modes

These two aren't just for the inspector, so they're kept in production builds:

Decorator	Description
@Save	Save the field into levels. Inspector fields aren't saved without it. See What gets saved.
@Run(...modes)	Choose whether a component runs while playing (GameMode.Play), in the level editor (GameMode.Edit), or both.

All other decorators are removed from production builds, unless you turn off stripDecorators.

Examples: the RPG's AliveComponent saves its health with @Save, and the Showcase's level connector uses @Run(GameMode.Edit) and @Save.