How do I Create a sprite preview in inspector?

Unity Engine
1

I’m trying to load my sprite into the inspector, to make an editor extension. The problem is that the sprite is part of a larger texture. I just want to draw the portion of the texture that holds a static sprite.
How do I do this?

public override void OnInspectorGUI() {
//...
Rect spriteSheetRect = GUILayoutUtility.GetRect( 32.0f, 32.0f, GUILayout.ExpandWidth( false ), GUILayout.ExpandHeight(false) );
EditorGUI.DrawPreviewTexture(new Rect(0,0,50, 50),S_C.texture);
//...
}
1 Like
2

FYI Solved it using the Texture2D.SetPixels, to make the sprite into its own texture. It sucks that I couldn’t pass a sprite preview into the inspector.

1 Like
3

(Sorry for necro, but info on this is pretty sparse)
Could you, by chance, post a code sample using your said solution? That would greatly help the community (read: “me”) in replicating your result. :slight_smile: Many thanks.

2 Likes
4

In custom inspector:

public override void OnInspectorGUI()
{
    var texture = AssetPreview.GetAssetPreview(sprite);
    GUILayout.Label(texture);
}
5 Likes
5

If you need a preview that allow selecting a sprite (like in the script import settins or some material editors), you can use a specifc overload of EditorGUI.ObjectField. By feeding it the typeof(Sprite) parameter, the resulting field will be shaped like this :
3557591--286453--Sprite.png

4 Likes
6

You could use the integrated preview panel that shows at the bottom of the inspector:

7

Pardon the necro, I’m having problems with this implementation. My sprite is part of a spritesheet, and when I get the texture it just shows each and every sprite in said spritesheet

8

@Avalin

Well you can load the sprite asset, it will contain all the subassets. First one is the root asset. Path (in this case) is your sprite asset path.

 UnityEngine.Object[] asset = AssetDatabase.LoadAllAssetsAtPath(path);

Then take sub assets from this array and make those into previews. And this is actually IMGUI / Editor scripting question… but anyway that should work.

9

Sorry to necro this, but could you show me the exact code you used to get this output? It’s precisely what I need and I haven’t been able to get it to work after several hours of tinkering.

10

I know you asked someone else, this is quite an old thread (and a wrong forum too) but I guess I could answer.

Something like this?

You would have this code in your custom editor’s OnInspectorGUI method for example, and “sprite” is a field of type Sprite in your custom editor.

// Square box style
// drop your sprite here
sprite = EditorGUILayout.ObjectField(sprite, typeof(Sprite), true,
GUILayout.Height(48), GUILayout.Width(48)) as Sprite;

It will create a field like this here, you can drop or browse a sprite and it will show it:

8380869--1105092--upload_2022-8-22_16-15-44.png

2 Likes
11

Thanks for sharing this, exactly what I was looking for!

12

Sorry for replying again, but I ran into an issue.

I’m trying to get the same result by using UIElements and UIToolkit. Everything works except that the field isn’t displaying a preview. It sets the value properly tho. Any idea on why this happens?

This is what I’m trying to do:

// Querying the field since the UI is created with UIToolkit.
        ObjectField skillIconField = rightPane.Q<ObjectField>(name = "skill-icon-field");
        // Binding the property I want to the field.
        skillIconField.BindProperty(serializedSkill.FindProperty(nameof(Skill.skillData)).FindPropertyRelative(nameof(SkillData.Icon)));

This is the result I’m getting:
8582440--1149958--upload_2022-11-13_13-56-23.png

13

So you know, the dedicated UI forums are here: https://forum.unity.com/categories/ui-systems.364/

14

Thank you very much!!!

15

For anybody looking at this old thread, let me save you some time: these solutions are deprecated, here’s the right way:

EditorGUILayout.BeginHorizontal();
Layout.PrefixLabel("Source Texture");
texture = (Texture2D)EditorGUILayout.ObjectField(texture, typeof(Texture2D), allowSceneObjects: true);
EditorGUILayout.EndHorizontal();

This results in a GUI like this:

1 Like