Shader序列帧动画学习笔记

文章目次

• 
  
  
  
  • 自言自语
    
  • 序列帧图为网上找来的
    
  • 效果转成GIF如下
    
  • 另一个严格一点的切图
    
  • 效果
    
  • shader部分
    
  
  

自言自语

之前有学习过 但是后边忘记了
本日复习 发现当初明确的有一些问题本日就边写边实验自己明确并注释
但是另有许多地方不明确 一并写在注释里了 有大佬能浅显通俗的帮我答疑解惑么。3D美术在TA路上艰巨爬行的时候 也会非常感谢您的不吝见教的 谢谢
序列帧图为网上找来的

效果转成GIF如下

他这个图并不是很严格的切图 所以会有点偏差哈
另一个严格一点的切图

天之痕小雪 也百度来的
效果

shader部分

1. Shader "TNShaderPractise/ShaderReview_AnimationTexture_035"{    Properties    {        _MainTex ("Texture", 2D) = "white" {}                //行数Row 从上到下数 本示例图中为3行                _Row("Row",float)=3.0                //列数Column 从左到右数 本示例图中为5列                _Column("Column",float) =5.0                _TimeSpeed ("Speed",float) =1.0    }    SubShader    {        Tags { "RenderType"="Opaque" }        Pass        {            CGPROGRAM            #pragma vertex vert            #pragma fragment frag            #include "UnityCG.cginc"            struct a2v            {                float4 vertex : POSITION;                float2 uv : TEXCOORD0;            };            struct v2f            {                float2 uv : TEXCOORD0;                float4 pos : SV_POSITION;            };            sampler2D _MainTex;            float4 _MainTex_ST;                        float _Row;                        float _Column;                        float _TimeSpeed;                        //例行公事的定点着色器            v2f vert (a2v v)            {                v2f o;                o.pos = UnityObjectToClipPos(v.vertex);                o.uv = TRANSFORM_TEX(v.uv, _MainTex);                return o;            }                        //盘算都放在片元着色器上            fixed4 frag (v2f i) : SV_Target            {                                //先对时间取整数 得到整数上的时间 我个人明确为时间一直在流逝乘以速度后得到一个总量                                  //这个总量去除以相应的行和列的平分 会构成一个行列读取循环 不知道明确的对不对 不是很明确                                float Time = floor(_Time.y*_TimeSpeed);                                //时间除以列数 也就是水平方向上平分求得 N列个平分 比如图中是5列 则水平方向上5平分 对其取整 得到 行索引 为5                                 float rowLine = floor(Time/_Column);                                //然后别的数就是 列索引 应该为3   用被除数 - 行索引5*列数为5  就得到列索引3个  （冯乐乐女神书上写的行列应该是颠来倒去的，我个人看着难过按照自己明确掰过来）                                //不外还是没能明确为啥取余就是列索引 求大神浅显明确极其通俗的解我疑惑                                float columnLine = Time-rowLine*_Column;                                //然后先把图中X轴向平分 因为本示例有5列,所以水平轴应该是被5平分 因此除以列数Column 冯女神书上写的除以行数难以明确                                //同理Y轴平分 是竖直方向上的 应该用行数3行 平分成3份 所以除以行数Row                                //然后分别用行列索引除以行列数量得到当前图像所在的XY坐标范围 去做偏移                                //需要注意的是做Y方向上偏移时用减法 因为坐标盘算是从下方开始向上递增  而贴图往往是从上到下递增                                half2 uv = float2 (i.uv.x/_Column+columnLine/_Column,i.uv.y/_Row-rowLine/_Row);                                /上面的长式子拆分下就是下面的式子 再单独注释方便明确                                然后先把图中X轴向平分 因为本示例有5列,所以水平轴应该是被5平分 因此除以列数Column 冯女神书上写的除以行数难以明确                                同理Y轴平分 是竖直方向上的 应该用行数3行 平分成3份 所以除以行数Row                                //half2 uv = float2 (i.uv.x/_Column,i.uv.y/_Row);                                然后分别用行列索引除以行列数量得到当前图像所在的XY坐标范围 去做偏移                                //uv.x += columnLine/_Column;                                需要注意的是做Y方向上偏移时用减法 因为坐标盘算是从下方开始向上递增  而贴图往往是从上到下递增                                //uv.y -= rowLine/_Row;                                把上面拆分的式子再做个整合 就是冯乐乐女神书里写的那样了 只是我的行和列和她的差别                                但是这么整合写 反而欠好明确  我就直接写一行了                                同样的我和她明确的行列正好相反                                //half2 uv = i.uv + float2 (columnLine, rowLine);                                //uv.x /= _Column;                                //uv.y /= _Row ;                fixed4 col = tex2D(_MainTex, uv);                return col;            }            ENDCG        }    }                        FallBack "VertexLit"}

复制代码

总之就是 盘算过程中的许多还是没明确 还望大佬们见教

来源：https://blog.csdn.net/ezcome11/article/details/112000994
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！