Proper Sprite Preview through Serilialized Properties

Unity Engine
,
1

Hello! I want to get a nice-looking object picker, like the one here through custom GUI

However, this one is hard coded and sadly doesn’t even change the image when selected!
Here’s the code for such results:

using UnityEditor;
using UnityEngine;

[CustomEditor(typeof(SpeakerSO))]
public class SpeakerEditor : Editor
{
    SpeakerSO speaker;
    SerializedProperty nameProp;

    Sprite neutralPProp, happyPProp, sadPProp, angryPProp;

    private void OnEnable()
    {
        speaker = (SpeakerSO) target;
        nameProp = serializedObject.FindProperty("characterName");
        neutralPProp = speaker.neutralPortrait;

    }

    public override void OnInspectorGUI()
    {
        //base.OnInspectorGUI();
        GUILayout.Label("This script is to set up personas that will be able to speak within the game and their portraits");

        EditorGUILayout.PropertyField(nameProp);
        speaker.neutralPortrait = (Sprite)EditorGUILayout.ObjectField("Neutral Sprite",neutralPProp,typeof(Sprite),false);
        speaker.happyPortrait = (Sprite)EditorGUILayout.ObjectField("Happy Sprite",happyPProp,typeof(Sprite),false);
        speaker.sadPortrait = (Sprite)EditorGUILayout.ObjectField("Sad Sprite",sadPProp,typeof(Sprite),false);



        //serializedObject.ApplyModifiedProperties();
    }
}

As you can see, I’ve already dabbled with Serialized Properties and they work pretty well! Though, once I change my ObjectFields to include Serialized Properties, this is the result it get.

Hurray! I can now change my object in the field and am using more flexible code! However, I’ve lost my nice preview image. Is there a way I can have the best of both worlds?! Here is the code I used to achieve this result:

using UnityEditor;
using UnityEngine;

[CustomEditor(typeof(SpeakerSO))]
public class SpeakerEditor : Editor
{
    SpeakerSO speaker;
    SerializedProperty nameProp;

    SerializedProperty neutralPProp, happyPProp, sadPProp, angryPProp;

    private void OnEnable()
    {
        speaker = (SpeakerSO) target;
        nameProp = serializedObject.FindProperty("characterName");
        neutralPProp = serializedObject.FindProperty("neutralPortrait");

    }

    public override void OnInspectorGUI()
    {
        //base.OnInspectorGUI();
        GUILayout.Label("This script is to set up personas that will be able to speak within the game and their portraits");

        EditorGUILayout.PropertyField(nameProp);
        EditorGUILayout.ObjectField(neutralPProp, typeof(Sprite), new GUIContent("Neutral Sprite"));
       
        serializedObject.ApplyModifiedProperties();
    }
}

Thank you for the help in advance!

2

I’m not sure if you were able to resolve this on your own given the time of this post but for anyone that stumbles upon this here is my solution. You can find the GetTargetObjectOfProperty method used in line 4 in this thread.

 private void DisplaySprite(SerializedProperty property)
        {
            // Get sprite from property
            Sprite sprite = GetTargetObjectOfProperty(property) as Sprite;

            // display loaded sprite
            sprite = EditorGUILayout.ObjectField(sprite, typeof(Sprite), true,
                GUILayout.Height(48), GUILayout.Width(48)) as Sprite;

            // update sprite to selection
            property.objectReferenceValue = sprite;
        }

In my own implementation I added a few other things to this method like a label and sprite name but it looks different from what you wanted and purely cosmetic so I decided not to share it since it muddled the answer.