Unity3D Shader示例之UI序列帧动画

最近在做一个富文本插件YLYRichText，里面用到了ui动画表情，效果如下：

其原理是在shader里面按照一定的速度改变uv，按顺序计算每一帧的uv偏移量和宽高比例，抓取序列帧图片里面每一帧的区域渲染出来。

代码里面有详细说明哈：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

Shader "Yly/YlyUISeqFrameAni" { Properties {      _MainTex ( "Texture" , 2D ) = "white" { }      _Color ( "Tint" , Color ) = ( 1 , 1 , 1 , 1 )        _RowCount ( "RowCount" , float ) = 0      _ColCount ( "ColCount" , float ) = 0      _Speed ( "Speed" , float ) = 30        //用在ui上的shader一般都需要加下面的模板测试逻辑，避免被有mask组件的父节点遮罩时没遮罩效果      _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 } SubShader {      Tags      {          "Queue" = "Transparent" //一般ui都用这种渲染队列，从远到近渲染          "IgnoreProjector" = "True" //忽略投影，一般ui的shader为提高效率都会设置为true          "RenderType" = "Transparent"          "PreviewType" = "Plane" //材质球预览模式为面片          "CanUseSpriteAtlas" = "True" //设置_MainTex可以使用Sprite(2D and UI)类型的贴图      }        //用在ui上的shader一般都需要加下面的模板测试逻辑，避免被有mask组件的父节点遮罩时没遮罩效果      Stencil      {          Ref [ _Stencil ]          Comp [ _StencilComp ]          Pass [ _StencilOp ]          ReadMask [ _StencilReadMask ]          WriteMask [ _StencilWriteMask ]      }        Cull Off      Lighting Off //关掉光照，一般ui的shader为提高效率都会这样设置      //下面两句设置ZTest只根据ui节点的树层次（即在Hierarchy视图中的层次）作为依据进行测试，不根据z值      ZWrite Off      ZTest [ unity_GUIZTestMode ]      //      Blend SrcAlpha OneMinusSrcAlpha //最终颜色值 = 输出颜色值 * 输出颜色Alpha值a + 背景颜色值 * (1 - a)，即如果有透明物品挡在前面的话，类似隔着透明玻璃看东西那种效果      ColorMask [ _ColorMask ]        Pass      {          CGPROGRAM          #pragma vertex vert          #pragma fragment frag          #include "UnityCG.cginc"            struct appdata          {              float4 vertex : POSITION ;              float2 uv : TEXCOORD0 ;          } ;            struct v2f          {              float2 uv : TEXCOORD0 ;              float4 vertex : SV_POSITION ;          } ;            sampler2D _MainTex ;          float4 _MainTex_ST ;          float _Speed ;          float _RowCount ;          float _ColCount ;            v2f vert ( appdata v )          {              v2f o ;              o . vertex = mul ( UNITY_MATRIX_MVP , v . vertex ) ;              o . uv = TRANSFORM_TEX ( v . uv , _MainTex ) ;              return o ;          }            fixed4 frag ( v2f i ) : SV_Target          {              //从左往右，从上往下进行序列帧播放              float totalCount = _ColCount * _RowCount ; //总帧数，例如 _RowCount = 2，_ColCount = 5，totalCount = 5 * 2 = 10              float curIndex = floor ( ( _Time . y * _Speed ) % totalCount ) ; //当前第几帧，例如 curIndex = 8              float2 unitSize = float2 ( 1 / _ColCount , 1 / _RowCount ) ; //每一帧所占大小比例，例如 unitSize = float2(1/5, 1/2)              float offsetU = floor ( curIndex % _ColCount ) ; //uv起点u方向偏移量，例如 offsetU = floor(8 % 5) = 3              float offsetV = floor ( ( totalCount - 1 - curIndex ) / _ColCount ) ; //uv起点v方向偏移量，例如 offsetV = floor((10 - 1 - 8)/5) = 0              float2 originUv = float2 ( offsetU , offsetV ) * unitSize ; //uv起点偏移量比例，例如 originUv = float2(3 * 1/5, 0 * 1/2) = float2(3/5, 0)              float2 newUv = originUv + i . uv * unitSize ; //newUv = uv起点偏移量比例 + uv大小比例              //例如 ui四个顶点新的uv坐标计算如下：              //左下角newUv = float2(3/5, 0) + uv(0, 0) * float2(1/5, 1/2) = float2(3/5, 0) + float2(0, 0) = float2(3/5, 0)              //左上角newUv = float2(3/5, 0) + uv(0, 1) * float2(1/5, 1/2) = float2(3/5, 0) + float2(0, 1/2) = float2(3/5, 1/2)              //右上角newUv = float2(3/5, 0) + uv(1, 1) * float2(1/5, 1/2) = float2(3/5, 0) + float2(1/5, 1/2) = float2(4/5, 1/2)              //右下角newUv = float2(3/5, 0) + uv(1, 0) * float2(1/5, 1/2) = float2(3/5, 0) + float2(1/5, 0) = float2(4/5, 0)              fixed4 col = tex2D ( _MainTex , newUv ) ;              return col ;          }          ENDCG      } } }

材质球只需要设置这三个参数就行啦。

把代码跑起来一边看效果一边看代码理解更快哦^_^。