Unity UI图片的一种优化方式

项目中使用的不少UI图片是轴对称的，包括：

1）横轴对称或纵轴对称

2）同时满足横轴对称和纵轴对称

图1：竖轴对称图片

可以使用镜像效果来节省图片资源。第一种情况可以省下完整资源的一半，第二种情况则可以省略3/4。普通的方法则是一个Image GameObject下面挂载1个或3个Image。这些Image的scale的x或y分量值设置为-1, 就产生一个镜像了，然后开发者小心翼翼把他们对齐。这个过程太繁琐，而且产生了冗余的GameObject。

更好的办法是使用纹理采样的Wrap Mode来实现。先设置图片Wrap Mode：

图2：Wrap Mode的设置

然后上代码：

public class MirrorImage : Image

{

    [SerializeField]

    public Vector2Int m_MirrorAttr = Vector2Int.one;

    protected override void OnPopulateMesh(VertexHelper toFill)

    {

        if (type == Type.Simple)

        {

            GenerateSimpleSprite(toFill, preserveAspect);

            return;

        }

        base.OnPopulateMesh(toFill);

    }

    void GenerateSimpleSprite(VertexHelper vh, bool lPreserveAspect)

    {

        var activeSprite = overrideSprite;

        Vector4 v = GetDrawingDimensions(lPreserveAspect);

        var uv = (activeSprite != null) ? UnityEngine.Sprites.DataUtility.GetOuterUV(activeSprite) : Vector4.zero;

        uv.z *= m_MirrorAttr.x;

        uv.w *= m_MirrorAttr.y;

        var color32 = color;

        vh.Clear();

        vh.AddVert(new Vector3(v.x, v.y), color32, new Vector2(uv.x, uv.y));

        vh.AddVert(new Vector3(v.x, v.w), color32, new Vector2(uv.x, uv.w));

        vh.AddVert(new Vector3(v.z, v.w), color32, new Vector2(uv.z, uv.w));

        vh.AddVert(new Vector3(v.z, v.y), color32, new Vector2(uv.z, uv.y));

        vh.AddTriangle(0, 1, 2);

        vh.AddTriangle(2, 3, 0);

    }

    private Vector4 GetDrawingDimensions(bool shouldPreserveAspect)

    {

        var activeSprite = overrideSprite;

        var padding = activeSprite == null ? Vector4.zero : UnityEngine.Sprites.DataUtility.GetPadding(activeSprite);

        var size = activeSprite == null ? Vector2.zero : new Vector2(activeSprite.rect.width, activeSprite.rect.height);

        Rect r = GetPixelAdjustedRect();

        // Debug.Log(string.Format("r:{2}, size:{0}, padding:{1}", size, padding, r));

        int spriteW = Mathf.RoundToInt(size.x);

        int spriteH = Mathf.RoundToInt(size.y);

        var v = new Vector4(

                padding.x / spriteW,

                padding.y / spriteH,

                (spriteW - padding.z) / spriteW,

                (spriteH - padding.w) / spriteH);

        if (shouldPreserveAspect && size.sqrMagnitude > 0.0f)

        {

            var spriteRatio = size.x / size.y;

            var rectRatio = r.width / r.height;

            if (spriteRatio > rectRatio)

            {

                var oldHeight = r.height;

                r.height = r.width * (1.0f / spriteRatio);

                r.y += (oldHeight - r.height) * rectTransform.pivot.y;

            }

            else

            {

                var oldWidth = r.width;

                r.width = r.height * spriteRatio;

                r.x += (oldWidth - r.width) * rectTransform.pivot.x;

            }

        }

        v = new Vector4(

                r.x + r.width * v.x,

                r.y + r.height * v.y,

                r.x + r.width * v.z,

                r.y + r.height * v.w

                );

        return v;

    }

}

[CustomEditor(typeof(MirrorImage), true)]

[CanEditMultipleObjects]

public class MirrorImageEditor : ImageEditor

{

    public override void OnInspectorGUI()

    {

        base.OnInspectorGUI();

        var property = serializedObject.FindProperty("m_MirrorAttr");

        EditorGUILayout.PropertyField(property);

        serializedObject.ApplyModifiedProperties();

    }

}

效果如下图：

图3：最终效果

PS：如果需要的是重复模式，比如绳子的每两节完全一样的效果。Wrap Mode选择Repeat就可以。