Custom Inspectors

Many of the toolkit's components have associated custom editor scripts. These control how the properties are rendered in the Inspector, as well as decoration, such as foldouts, colours, warning messages, and buttons.


Without Custom Inspector	With Custom Inspector

Modifying script variables

If you're modifying existing scripts, be careful, as by default adding new variables won't render them in the Inspector, and changing the names of existing variables may cause the Inspector to log errors.

Why?

The custom inspector scripts serialize properties not with their name, but with a string. When you change the name of a variable in the Door script for example, you will also need to change the property that's being serialized in the DoorInspector script.

Creating a custom inspector

If you are creating your own components and wish to implement a component interface similar to the one in the toolkit, follow these steps:

Create a new script for the custom inspector in the Core > Editor > Custom Inspectors folder. Call it something like MyComponentInspector.

Setup your script as seen below. The ExplorationToolkitBaseInspector class has a number of functions we'll be calling to format our component.

using UnityEngine;
using UnityEditor;

namespace ExplorationToolkit.Editors
{
    [CustomEditor(typeof(MyComponent))]
    [CanEditMultipleObjects]
    public class MyComponentInspector : ExplorationToolkitBaseInspector
    {

    }
}

Create the OnEnable function, and register all the properties you wish to draw using the AddProperty function.
```
void OnEnable ()
{
    AddProperty("itemName");
    AddProperty("pivot");
}
```
Override the parent class' headerTheme variable. This determines what color the foldouts are. If you wish to follow the colour-coded conventions, open the parent class and there will be comments next to the enumerator definition.
```
protected override ThemeColor headerTheme => ThemeColor.Blue;
```
For all the different foldouts you wish to implement, create private static variables for their state.
```
private static bool mainFoldout = true;
private static bool advancedFoldout = true;
```
Finally, override the parent's RenderGUI function. This is where we will draw the properties, foldouts, etc.
```
protected override void RenderGUI ()
{

}
```
To create a foldout, call the DrawFoldout function and set that to be the value of the respective static variable. This will toggle true or false when clicked on. Then if that foldout is true, draw its properties.
```
mainFoldout = DrawFoldout(mainFoldout, "My Component");

if(mainFoldout)
{

}
```
To draw a property, call the DrawProperty function, with the property name as the parameter. Optionally, you can send a second string parameter to override the name displayed.
```
if(mainFoldout)
{
    DrawProperty("itemName");
    DrawProperty("pivot", "Pivot Point");
}
```

If you wish to have boxes separating properties within foldouts, add the BeginBox and EndBox functions.

if(mainFoldout)
{
    BeginBox();
    DrawProperty("itemName");
    DrawProperty("pivot", "Pivot Point");
    EndBox();W
}

Useful Functions

The ExplorationToolkitBaseInspector parent class has a few handy functions to help you in setting up and decorating your custom inspector.

void AddProperty(string propertyName)

Add a new serialized property to the properties dictionary.

void DrawProperty(string property, string labelOverride = "")

Wrapper for EditorGUILayout.PropertyField(), with optional label override.

void BeginBox()

Used to house similar properties. Make sure to cap it off with EndBox().

void EndBox()

Called after the properties you wish to encapsulate in a box.

bool DrawFoldout(bool isOpen, string title)

Draws a drop down section with custom label and colour. When clicked on it will open/close, displaying the contents inside.

void DrawETAudioClip (string property, string displayName)

Draws our custom audio clip field with extra properties to adjust the playing of the sound.