Asset Preview Grid for Unity

Some time ago, I was a little bit irritated that after I received a new package of 3D models, I had to place them manually on the scene to preview them. So why don’t we build a little script that will do it for us? ?

I’m a lazy guy, and I always try to find a way that will make my life easier. After I get a few packages, I decided that I don’t want to move them manually anymore! It was horrible, and I needed to find a medicine for my pain. ?

Luckily, having programming skills is priceless in game development. So it was time to build a simple but relieving solution. ?‍?

The idea ?

There are many ways how we can approach this problem. We could build a custom window for the editor like we recently did with Replace Tool for Level Designers, but let’s make a simple component this time. With that, we will be able to change parameters in the component, and they will be saved there. Besides the parameters which we can add in MonoBehaviour, we will also need a button which we can create with a custom inspector.

This simple solution will help us each time we would want to preview some assets on the scene.

Let’s build it! ?

Creating a tool ?‍?

The first step is to create a component. This component will have just two parameters — one to set the grid width and one to set spacing.

This class will also have logic for rearranging elements into a grid.

using UnityEngine;

/// <summary>
/// Asset preview grid component.
/// This component gives you options for rearranging its children.
/// </summary>
public class AssetPreviewGrid : MonoBehaviour
{
    // Grid width.
    [SerializeField]
    private int gridWidth = 10;

    // Spacing between elements.
    [SerializeField]
    private float offset = 3;

    /// <summary>
    /// Call this method to rearrange elements under the game object that has this script attached.
    /// </summary>
    public void RearrangeElements()
    {
        Debug.Log("Rearranging elements");

        // Iterate over all children.
        for (int i = 0; i < transform.childCount; i++)
        {
            var child = transform.GetChild(i);
            child.position = new Vector3(i % gridWidth * offset, 0, (i / gridWidth) * offset);
        }
    }
}

Great! Now we have parameters that we can play with.

Our next step is to make a custom inspector for the component that we just created.

We don’t need to override the default drawing of the Inspector. We just need to add a button at the end.

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector drawer for AssetPreviewGrid script.
/// Adds button to the Inspector and menu item.
/// </summary>
[CustomEditor(typeof(AssetPreviewGrid))]
public class AssetPreviewGridEditor : Editor
{
    /// <summary>
    /// Unity method which draws Inspector.
    /// </summary>
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        // Add space between parameters and the button.
        EditorGUILayout.Space();

        // Button for rearranging elements.
        if (GUILayout.Button("Rearrange elements"))
        {
            var placer = target as AssetPreviewGrid;
            placer.RearrangeElements();
        }
    }
}

At this point, I would add one more thing — menu item for attaching our component to the selected game object. This is optional as we can attach the component like any other component, but this will make it a little shortcut for convenience. ?

using UnityEngine;
using UnityEditor;

/// <summary>
/// Custom inspector drawer for AssetPreviewGrid script.
/// Adds button to the Inspector and menu item.
/// </summary>
[CustomEditor(typeof(AssetPreviewGrid))]
public class AssetPreviewGridEditor : Editor
{
    /// <summary>
    /// Attaches the component to the selected game object.
    /// </summary>
    [MenuItem("Custom Tools/Add Asset Preview Grid")]
    public static void AttachComponent()
    {
        // Check if only one game object is selected.
        if (Selection.gameObjects.Length != 1)
        {
            Debug.Log("Select one game object to attach AssetPreviewGrid script!");
            return;
        }

        // Get selected object.
        var selected = Selection.gameObjects[0];

        // Try to get AssetPreviewGrid script.
        AssetPreviewGrid placer = selected.GetComponent<AssetPreviewGrid>();

        // Check if selected object has this script and add if needed.
        if (!placer)
        {
            placer = selected.AddComponent<AssetPreviewGrid>();
        }
        else
        {
            Debug.LogWarning("Selected game object already have AssetPreviewGrid script attached!");
        }

        // Rearange elements.
        placer.RearrangeElements();
    }

    ...
}

The result ?

Now it’s time to see the final result of our work!

It’s working great! What do you think about it? What other things you would make easier for yourself? Let me know in the comment section below!

If you want to get notified on future content, sign up for the newsletter!

As always, the whole project is available at my public repository. ?

And I hope to see you next time! ?