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之后

还可以做遮罩