Adding Inspector Properties

Adding properties to your component

Any public marked property that is a valid serializable type in Unity will show up in the inspector for an AirshipBehaviour component

export default class ExampleAirshipBehaviour extends AirshipBehaviour {
	public exampleString = "Hello, World!";
	public exampleBoolean = true;
	public exampleNumber = 10;
}

Woo, properties!

If you do not want your properties exposed, you can just specify them as private or protected. You can also use the @NonSerializable attribute decorator (and use @SerializeField to show private/protected fields to the inspector!)

Adding references to Unity and Airship components

You can add references to Unity Objects in the same way as values. If you might not attach a reference in the inspector you should define it as optional with a ?

export default class ExampleAirshipBehaviour extends AirshipBehaviour {
	// Assume these will be set in inspector
	public exampleGameObject: GameObject;
	public exampleImage: Image;
	public exampleButton: Button;
	
	// Possibly not set in inspector
	public exampleTransform?: Transform;
	public exampleCanvas?: Canvas;
}

References to unity objects - nice!

when referencing an object for Instantiation you must use a Game Object reference. You are not able to directly reference a component until it is instantiated in the scene.

Adding AirshipBehaviour reference properties

Just like our Unity Object references, we can also add references to other AirshipBehaviour components. Any defined class that extends AirshipBehaviour can be used as a reference.

import AnotherAirshipBehaviour from "./AnotherAirshipBehaviour";

export default class ExampleAirshipBehaviour extends AirshipBehaviour {
	public anotherAirshipBehaviour!: AnotherAirshipBehaviour;
}

References to another AirshipBehaviour!

Organizing your properties

You can use attributes to stylize our inspector properties using decorators:

export default class ExampleAirshipBehaviour extends AirshipBehaviour {
	@Header("Basic Properties")
	public stringValue = "Hello, World";
	public numberValue = 1;

	@Header("Constrained properties")
	@Range(0, 100) // show a range of 0 to 100 in the inspector
	public numberRangeValue = 10;

	@Multiline(5) // The number here is the number of lines, and is optional
	public mulitlineStringValue = "This has multiple\nLines!";

	@Spacing(10) // Create some extra space before the next section
	@Header("This has a space of 10 above it")
	@Tooltip("This is a tooltip for the property") // explicit tooltips
	public tooltippedValue = 0;
}

Optionally showing properties

You may want to only show certain properties only *if* a condition is met with other properties.

This can be done with ShowIf and HideIf.

export default class ExampleAirshipBehaviour extends AirshipBehaviour {
	public toggleSetting = false;

	@ShowIf("toggleSetting")
	public valueShowOnToggle = "Hello, world!";
}

Property not shown if toggleSetting is false

Property shown if toggleSetting is true

You can also use the match versions of these decorators to show values on certain values, such as with enums:

export enum ExampleTargetType {
	Position,
	Transform,
}

export default class ExampleAirshipBehaviour extends AirshipBehaviour {
	public targetType: ExampleTargetType;

	@ShowIf("targetType", ExampleTargetType.Position)
	public targetPosition: Vector3;

	@ShowIf("targetType", ExampleTargetType.Transform)
	public targetTransform: Transform;
}

When Position is selected, it uses the Vector3 targetPosition

When Transform is selected, uses the Transform targetTransform

JSDoc Tooltips

In Airship we support implicit JSDoc tooltips - which are generated by JSDoc comments:

NOTE: JSDoc Code blocks, inline code blocks, tables, hyperlinks and images are not supported in the editor and will not show up in the tooltips.

export default class ExampleBehaviour extends AirshipBehaviour {
	/**
	 * A value that's documented by JSDoc
	 */
	public value = 100;
}

Not only does this have the benefit of being documented in your editor:

The JSDoc tooltip in the editor

But Airship will also generate a tooltip in-editor with the same formatting:

The tooltip generated in the editor

Examples of formatting in the tooltips:

export default class ExampleBehaviour extends AirshipBehaviour {
	/**
	 * ## This is a heading
	 * **Some bold** and _italicized_ text.
	 *
	 * - List item 1
	 * - List item 2
	 */
	public value = 100;
}

Formatted tooltips, just like in the code editor!