如果代码中有什么不清楚请查看以下基础知识
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相关的设置即可看到效果