🖼️

【Unity】画像やプレハブのプレビュー画像を表示するPropertyAttribute【Editor拡張】

2023/09/04に公開

Unity

UnityEditor

tech

概要

ScriptableObjectなどでSpriteやPrefabを多数設定するとき、どれを設定したか紛らわしいことがあります。
そのため、以下のように[Preview]を追加するだけでプレビュー画像を表示してくれるPropertyAttributeを作りました。

[Preview] [SerializeField] private Sprite sprite;
[Preview(Height=100)] [SerializeField] private GameObject prefab;

使用例

コード

// PreviewAttribute.cs
public class PreviewAttribute : PropertyAttribute
{
    public float Height = 50;
}

// PreviewDrawer.cs
[CustomPropertyDrawer(typeof(PreviewAttribute))]
public class PreviewDrawer : PropertyDrawer
{
    private static readonly float Margin = EditorGUIUtility.standardVerticalSpacing;

    public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
    {
        // 通常のプロパティを描画
        position.height = EditorGUI.GetPropertyHeight(property, label);
        EditorGUI.PropertyField(position, property, label);

        // PreviewAttributeの取得
        var previewAttribute = (PreviewAttribute)attribute;

        // プレビュー用テクスチャの取得
        var texture = AssetPreview.GetAssetPreview(property.objectReferenceValue);
        if (texture == null) return;

        var width = previewAttribute.Height * texture.width / texture.height;

        // 右寄せにして画像を表示

        // テクスチャを表示する位置を計算
        var imageRect = new Rect
        {
            x = position.xMax - width - Margin,
            y = position.y + position.height + Margin,
            width = width,
            height = previewAttribute.Height
        };

        // 画像を表示
        GUI.DrawTexture(imageRect, texture);
    }

    public override float GetPropertyHeight(SerializedProperty property, GUIContent label)
    {
        var previewAttribute = (PreviewAttribute)attribute;
        return previewAttribute.Height + EditorGUI.GetPropertyHeight(property, label) + Margin * 2;
    }
}

【Unity】画像やプレハブのプレビュー画像を表示するPropertyAttribute【Editor拡張】

概要

使用例

コード

参考

Discussion