UGUI 圓角矩形控件實現

介紹

項目中使用了很多圓角矩形的純色的按鈕，背景之類的圖片，如果使用傳統的九宮格的拉伸，那麼不通的圓角半徑必須使用不通的圖片，而且拉伸後邊緣容易出現狗牙（鋸齒）。於是想到了使用shader來實現該功能，利用算法生成圓角矩形。

最終效果

shader的實現

Shader "UI/RoundMask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0

        _RoundRadius("Round Radius", Range(0,0.5)) = 0.25
        _Width("Width", Float) = 100
        _Height("Height", Float) = 100
    }

    SubShader
    {
        Tags
        { 
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent" 
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp] 
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            Name "Default"
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile __ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            float _RoundRadius;
            float _Width;
            float _Height;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                UNITY_SETUP_INSTANCE_ID(IN);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                OUT.worldPosition = IN.vertex;
                OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

                OUT.texcoord = IN.texcoord;

                OUT.color = IN.color * _Color;
                return OUT;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                float aspect = _Height/_Width;

                float2 center = float2(abs(round(IN.texcoord.x) - _RoundRadius*aspect),abs(round(IN.texcoord.y) - _RoundRadius));
                float a = color.a*step(distance(fixed2(IN.texcoord.x * _Width,IN.texcoord.y * _Height),fixed2(center.x * _Width,center.y * _Height)),_RoundRadius * _Height);

                float oy = max(step(IN.texcoord.y,_RoundRadius),step((1-_RoundRadius),IN.texcoord.y));
                float ox = max(step(IN.texcoord.x,_RoundRadius*aspect),step((1-_RoundRadius*aspect),IN.texcoord.x));
                color.a = ox * (oy * a + (1-oy) * color.a) + (1-ox) * color.a;
;
                return color;
            }
        ENDCG
        }
    }
}

可以看到和UI-Default.shader的差別只是增加了三個參數，並且在片源着色器中加入了一套算法用於修正alpha。

        _RoundRadius("Round Radius", Range(0,0.5)) = 0.25
        _Width("Width", Float) = 100
        _Height("Height", Float) = 100

三個參數分別對應

• _RoundRadius 圓角半徑
• _Width 控件寬度
• _Height 控件高度

這裏的圓角半徑是UV.y = 1 爲單位的。變化範圍0～0.5。

有了shader，那麼還需要一個腳本來實現MaskableGraphic。當大小改變的時候修改Width和Height兩個參數，同時可以直接控制圓角半徑。

控制腳本實現

using UnityEngine;
using UnityEngine.UI;

namespace PTGame.UIExtensions
{
    [ExecuteInEditMode, RequireComponent(typeof(CanvasRenderer), typeof(RectTransform)), DisallowMultipleComponent]
    [AddComponentMenu("PTUI/RoundCorner (Unity UI Canvas)")]
    public class PTRoundRectGraphic : MaskableGraphic
    {

        //Inspector面板上直接拖入  
        public Shader shader = null;

        [Range(0, 0.5f)] public float _cornerArea = 0;



        protected override void Start()
        {
            base.Start();
            material = GenerateMaterial(shader);
            material.SetFloat("_Width", rectTransform.rect.width);
            material.SetFloat("_Height", rectTransform.rect.height);
        }


        private void Update()
        {
            material.SetFloat("_RoundRadius", _cornerArea);
        }

        protected override void OnRectTransformDimensionsChange()
        {
            base.OnRectTransformDimensionsChange();

            material.SetFloat("_Width", rectTransform.rect.width);
            material.SetFloat("_Height", rectTransform.rect.height);
        }

        //根據shader創建用於屏幕特效的材質
        protected Material GenerateMaterial(Shader shader)
        {
            if (shader == null)
                return null;

            if (shader.isSupported == false)
                return null;
            Material material = new Material(shader);
            material.hideFlags = HideFlags.DontSave;

            if (material)
                return material;

            return null;
        }


        protected override void OnDestroy()
        {
            base.OnDestroy();
            if (material != null)
                Object.DestroyImmediate(material);
        }
    }
}

總結

由於實現了默認的MaskableGraphic，相對Image少了九宮格填充的功能。而且由於每個控件使用單獨的材質傳入寬高，導致不能動態合併，Drawcall較高，當然還是有改進方法的。可以在修改寬度時重新寫入mesh中vertex的數據，將寬，高，半徑作爲一個textcrood寫入，由於UGUI控件只有四個頂點，時間消耗可以忽略不計，並且四個頂點數據相同，那麼每個片源就都可以拿到寬高。這樣只需要一個材質就可以處理了。

1. struct appdata_t 中加入float2 texcoord2 : TEXCOORD1;
2. 修改頂點着色器，增加OUT.properties = IN.texcoord2;
3. 片源着色器中增加如下代碼

    float _RoundRadius = IN.properties.y; 
    float _Width = IN.properties.x;
    float _Height = 1;

1. C# 中重寫代碼 對Mesh的UV傳入

Vector2 property = new Vector2(rectTransform.rect.width/rectTransform.rect.height, _cornerArea);
Vector2[] propertys = new Vector2[workerMesh.vertexCount];

for (int i = 0; i < workerMesh.vertexCount; i++)
{
    propertys[i] = property;
}

workerMesh.uv2 = propertys;

經過修改Drawcall成功的降了下來，4個圖形共用了一個Drawcall

修改派生關係爲繼承自Image並重寫Inspector之後

還可以做遮罩