How to make custom Inspectors for serialized classes

I have 2 simple pieces of code:

Unity Objects:

using System;
using UnityEngine;

public class ModularJoiner : MonoBehaviour
{
    public ModularJoint joint;
}

[Serializable]
public class ModularJoint : UnityEngine.Object
{
    public Vector3 Position;
    public Vector3 NormalRotation;
}

And then my custom inspector for my Serializable class:

using UnityEditor;

[CustomEditor(typeof(ModularJoint))]
public class ModularJointEditor : Editor
{ 
    public override void OnInspectorGUI()
    {
        var joint = (ModularJoint)target;

        joint.Position = EditorGUILayout.Vector3Field("Position", joint.Position);        
        joint.NormalRotation = EditorGUILayout.Vector3Field("Normal", joint.NormalRotation);
    }
}

This is the result in the inspector:

Inspector

And this is what I want, excluding the expanding thing(Highlighted yellow):

Inspector

Please, I don’t want to add the ModularJoint fields into the ModularJoiner class. Because I am actually using an array of joints. But I kept it simple so that my code is clearer.

It seems that by inheriting from UnityEngine.Object causes the issue. But I need to do this if I wish to do this: var joint = (ModularJoint)target;

When looking online I keep seeing Property Drawers which is not quite what I want to achieve.

You can’t because custom serializable classes are not serialized on their own. They are just part of the MonoBehaviour that containst a variable of that type. Custom inspectors only work for classes derived from UnityEngine.Object. The only classes you can use as base classes which are derived fro UnityEngine.Object are MonoBehaviour or ScriptableObject. You should not derive your own class from UnityEngine.Object. Things derived from “UnityEngine.Object” are serialized on their own.

You have to use a property drawer here. Why do you think that a property drawer is not quite qhat you want? To me it looks like it’s exactly what you need -.-

What’s your problem with using a property drawer? Keep in mind if you need a multi-line property you have to override the GetPropertyHeight method as well and provide a proper height value.

edit

For example:

using UnityEditor;
using UnityEngine;

[CustomPropertyDrawer(typeof(ModularJoint))]
public class ModularJointDrawer : PropertyDrawer
{
    public override float GetPropertyHeight(SerializedProperty property, GUIContent label)
    {
        return 16f * 2;
    }
    public override void OnGUI(Rect rect, SerializedProperty property, GUIContent label)
    {
        var positionProperty = property.FindPropertyRelative("Position");
        var normalProperty = property.FindPropertyRelative("NormalRotation");
        
        EditorGUIUtility.wideMode = true;
        EditorGUIUtility.labelWidth = 70;
        rect.height /= 2;
        positionProperty.vector3Value = EditorGUI.Vector3Field(rect, "Position", positionProperty.vector3Value);
        rect.y += rect.height;
        normalProperty.vector3Value = EditorGUI.Vector3Field(rect, "Normal", normalProperty.vector3Value);
    }
}

If instead you want a single Joint to occupy a single line you can set the height to 16f instead of 16*2 and use something like this instead:

    EditorGUIUtility.wideMode = true;
    EditorGUIUtility.labelWidth = 30;
    EditorGUI.indentLevel = 0;
    rect.width /= 2;
    positionProperty.vector3Value = EditorGUI.Vector3Field(rect,"pos", positionProperty.vector3Value);
    rect.x += rect.width;
    normalProperty.vector3Value = EditorGUI.Vector3Field(rect, "norm", normalProperty.vector3Value);

Here’s how it would look like. The first has the two fields on top of each other, the second has both in one line