Unity ShaderLab特效教程 适用于贴图、sprite和ugui的2d着色器实例 代码+详解注释 【可调节颜色、抖动力度、间隔的定格动画抖动涂鸦效果】

如果代码中有什么不清楚请查看以下基础知识

Shader基础知识

unity3d 中 七种坐标知识详解

涂鸦抖动效果

原理

【透明支持】：使用透明测试。
【涂鸦抖动】：随机加减sprit顶点的xy坐标值，即可实现
【颜色调整】：片元颜色 * 设置颜色 = 输出颜色
【间隔抖动】：并不是真正的判断时间，而是每一帧都在计算，只不过由于抖动使用的是伪随机函数，该函数输入固定的值结果也是固定。于是将时间四舍五入后，就变成了阶梯输入。于是也就成了间隔动画。

代码

Shader "Custom/t2"
{
    //变量接口
    Properties
    {
        //贴图
        _MainTex("贴图", 2D) = "white" {}
        //线段长度
        _Power("力度",range(-1.00,1.00)) = 1.
        //间隔
        _Interval("每秒执行几次",range(0.00,1.00)) = 0.1
        //线段颜色
        _Color("叠加颜色",COLOR) = (0,1,0,1)
        //透明测试
        _AlphaValue("透明测试", range(0.00,1.00)) = 0.5
    }
    //着色器正文
    SubShader
    {
        //着色器程序块
        Pass
        {
            Tags { "RenderType" = "Opaque" }
            LOD 200
 
            CGPROGRAM
                #pragma target 5.0
                //顶点着色器，用于处理位置信息
                #pragma vertex vert
                //片元着色器，用于处理颜色
                #pragma fragment frag
                //引入空间转换宏
                #include "UnityCG.cginc"
                sampler2D _MainTex;
                float _Power;
                float _Interval;
                fixed4 _Color;
                sampler2D _ST_MainTex;
                float _AlphaValue;
                //输入到顶点着色器的数据
                struct a2v
                {
                    //顶点位置
                    float4  pos       : POSITION;
                    //法线uv
                    float3  normal    : NORMAL;
                    //纹理坐
                    float2  uv        : TEXCOORD0;
                };
                //输入到片元着色器的数据
                struct v2f
                {
                    //像素位置
                    float4  pos       : POSITION;
                    //纹理
                    float2  uv        : TEXCOORD0;
                };
                //伪随机数发生器  如果输入的种子相同，则结果必相同
                float4 random4 (float4 n) {
                    return frac(sin(dot(n, float2(12.9898,78.233)))*43758.5453123);
                }
                //输入时间增量与间隔值，输出一个间隔值的倍数，这个倍数随着每隔间隔值的秒数发生变化
                inline float Interval(float secondCount, float val){
                    //secondCount 输入一个按秒增长的值，即_Time.y
                    //val 是间隔值。即每个val的秒数触发一次
                    //运算过程
                    // 3 * (1 / 3) = 3 * 0.33333 = 3 * 0
                    // 3 * (2 / 3) = 3 * 0.66666 = 3 * 1
                    // 3 * (3 / 3) = 3 * 1       = 3 * 1
                    // 3 * (4 / 3) = 3 * 1.33333 = 3 * 1
                    // 3 * (5 / 3) = 3 * 1.66666 = 3 * 2
                    // 3 * (6 / 3) = 3 * 2       = 3 * 2
                    // 3 * (7 / 3) = 3 * 2.33333 = 3 * 2
                    // 3 * (8 / 3) = 3 * 2.66666 = 3 * 3
                    // 3 * (9 / 3) = 3 * 3       = 3 * 3
                    //round 四舍五入
                    return val * round(secondCount / val);
                }
                //如果到达指定秒数，就返回0 否则是不为0的数
                float SetTimeout(float secondCount, float val){     
                    if(frac(secondCount / val) > 0){
                        return 0;
                    }
                    return 1;
                }
                //顶点着色器，这里是顶点浮动的核心部分，可以直接移植到任何地方
                v2f vert(appdata_base v)
                {
                    v2f o;
                    o.uv = v.texcoord;
                    //模型坐标转为世界坐标，因为要计算绝对位置
                    o.pos = mul(unity_ObjectToWorld, v.vertex);
                    //snap 返回接近输入值的整数
                    float time = Interval(_Time.y, _Interval);
                    //获取随机噪点值，这里使用的因子是原x+时间长度
                    float4 noise = random4(v.vertex * time);
                    //顶点的高度 = 原顶点+（随机噪点）* 幅度
                    //如果当前物体是2d的，那么只会运算xy，如果是3d的，xyz都会加入运算
                    o.pos += noise * _Power;     
                    //将坐标转为裁剪空间，否则就无法正常可视化
                    o.pos = mul(UNITY_MATRIX_VP, o.pos);
                    return o;
                }
                //片元着色器，用于上色
                fixed4 frag(v2f o) : COLOR
                {
                    //最终要输出的颜色
                    fixed4 outColor = tex2D(_MainTex, o.uv) * _Color;
                    //透明度测试，决定什么程度的透明度不显示
                    clip(outColor.a - _AlphaValue);
                    return  outColor;
                }
            ENDCG
        }
    }
}

使用步骤

1，导入一个精灵图片，最好带透明度的。
2，并在assets窗口中点击该图片文件，在inspector窗口中设置Mesh Type为 Tight。这样就可以使图片具有更多的顶点。
3，在assets窗口中新建材质和shader并将shader赋给材质。将上面的代码写入在shader中并保存
4，创景新建sprite元素，并将新建的材质赋给他。
5，设置材质中shader相关的设置即可看到效果