Custom Inspector in Unity

Building a big project within a small team often requires building some shortcuts. One of them could be a custom inspector. Let’s find out how to make them in Unity!

Building a custom inspector is easy in Unity. You need to follow this 200-step instru… No, just kidding. ?

But in actual fact, it’s very easy!

The only thing that you need to do is to create an editor script for the component that you want to customize. And besides that, you also need to understand how Unity’s old GUI system works.

Customize the component!

The first thing that we need is component to customize. Let’s create one! Also, we can remove the content of that component as we are not going to use anything of that.

using UnityEngine;

/// <summary>
/// Component containing message which will be displayed in Editor.
/// </summary>
public class MessageInfo : MonoBehaviour
{

}

Great! We are already halfway through it!

This step is very important, and without it, it won’t work. We need to create a new folder which we are going to name it Editor.

Why this is important?

Unity has special folders that it’s using for some different purposes. One example is Resource folder which we can access by Resource class. Another example is the Editor folder which we can put anywhere in the project, or we can even have multiple folders with that name. I’m not going to dive deeper into that, but if you are interested, I would recommend checking this page.

With that folder in place, now we can execute the next step, which is creating our custom view class!

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector for Message Info component.
/// Additional functionality allow us to display message in editor.
/// </summary>
[CustomEditor(typeof(MessageInfo))]
public class MessageInfoEditor : Editor
{
    /// <summary>
    /// Unity method that renders component inspector.
    /// </summary>
    public override void OnInspectorGUI()
    {
        // Drawning default component inspector for compare 
        DrawDefaultInspector();
    }
}

You can see that I’ve added already one function there. This function is something like Update() in regular script. Here OnInspectorGUI() is responsible for rendering component view in inspector.

And to render anything there, we need to use the old GUI system that I’ve mentioned before. But don’t worry! It’s just code! ?

So, in the beginning, let’s add some labels.

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector for Message Info component.
/// Additional functionality allow us to display message in editor.
/// </summary>
[CustomEditor(typeof(MessageInfo))]
public class MessageInfoEditor : Editor
{
    /// <summary>
    /// Unity method that renders component inspector.
    /// </summary>
    public override void OnInspectorGUI()
    {
        EditorGUILayout.LabelField("Default view", EditorStyles.boldLabel);
        EditorGUILayout.Space();

        // Drawning default component inspector for compare 
        DrawDefaultInspector();

        EditorGUILayout.Space();
        EditorGUILayout.LabelField("Custom view", EditorStyles.boldLabel);
        EditorGUILayout.Space();

        // Custom editor part.
        // Getting reference to the component.
        var component = target as MessageInfo;
    }
}

Now let’s attach our component somewhere to see our changes! ?

Yay! Can you see it already? ?

Maybe we should now add some variables to our code?

using UnityEngine;

/// <summary>
/// Component containing message which will be displayed in Editor.
/// </summary>
public class MessageInfo : MonoBehaviour
{
    // Message value which will be displayed.
    public string message;
}

As we have variable now in our component, we can also access it in our custom inspector, so let’s display and edit it!

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector for Message Info component.
/// Additional functionality allow us to display message in editor.
/// </summary>
[CustomEditor(typeof(MessageInfo))]
public class MessageInfoEditor : Editor
{
    /// <summary>
    /// Unity method that renders component inspector.
    /// </summary>
    public override void OnInspectorGUI()
    {
        // ...

        // Custom editor part.
        // Getting reference to the component.
        var component = target as MessageInfo;

        // Displaying message field.
        component.message = EditorGUILayout.TextField("Message", component.message);
    }
}

There is also another way to display properties in the inspector by using SerializedProperty. With that, we can use the power of reverting changes and simplicity of code!

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector for Message Info component.
/// Additional functionality allow us to display message in editor.
/// </summary>
[CustomEditor(typeof(MessageInfo))]
public class MessageInfoEditor : Editor
{
    // Reference to the message property of the component.
    SerializedProperty messageProp;

    /// <summary>
    /// Unity method called when custom inspector is enabled.
    /// </summary>
    private void OnEnable()
    {
        // Fetching the property from the component.
        messageProp = serializedObject.FindProperty("message");
    }

    /// <summary>
    /// Unity method that renders component inspector.
    /// </summary>
    public override void OnInspectorGUI()
    {
        // ...

        // Another way to display the message.
        EditorGUILayout.PropertyField(messageProp);

        // ...
    }
}

It’s not that hard. ?

Now let’s add a button that will display the message that we’ve placed in our variable!

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector for Message Info component.
/// Additional functionality allow us to display message in editor.
/// </summary>
[CustomEditor(typeof(MessageInfo))]
public class MessageInfoEditor : Editor
{
    // ...

    /// <summary>
    /// Unity method that renders component inspector.
    /// </summary>
    public override void OnInspectorGUI()
    {
        // ...

        // In addition, we are displaying a button to show the message.
        EditorGUILayout.Space();
        if (GUILayout.Button("Show Message!"))
        {
            // Displaying a ​message with editor dialog.
            EditorUtility.DisplayDialog("You've a new message!", component.message, "OK");
        }
    }
}

CLICK IT!

? ? ? ? ?‍? ? ? ? ?

Awesome! I think that will be enough for the beginning of customizing Unity for your needs.

If you want to learn more about GUI system, I will recommend visiting this page. ?

You can also get a project with the code that we go through in this project in my public repository. ?

I hope you enjoyed it and see you here next time! ?