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!

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;
}

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!