序列帧动画制作

我想都或多或少听过序列帧动画,属于纹理动画的其中之一,原理跟电影播放一样,代码如下:

Shader "Unlit/AnimationTest" {
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _MainTex ("Image Sequence", 2D) = "white" {}
        _HorizontalAmount ("Horizontal Amount", Float) = 4
        _VerticalAmount ("Vertical Amount", Float) = 4
        _Speed ("Speed", Range(1, 100)) = 30
    }
    SubShader {
        Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
        
        Pass {
            Tags { "LightMode"="ForwardBase" }
            
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            
            CGPROGRAM
            
            #pragma vertex vert  
            #pragma fragment frag
            
            #include "UnityCG.cginc"
            
            fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _HorizontalAmount;
            float _VerticalAmount;
            float _Speed;
              
            struct a2v {  
                float4 vertex : POSITION; 
                float2 texcoord : TEXCOORD0;
            };  
            
            struct v2f {  
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };  
            
            v2f vert (a2v v) {  
                v2f o;  
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
                o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);  
                return o;
            }  
            
            fixed4 frag (v2f i) : SV_Target {
                float time = floor(_Time.y * _Speed);  
                float row = floor(time / _HorizontalAmount);
                float column = time - row * _HorizontalAmount;
                
//              half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount);
//              uv.x += column / _HorizontalAmount;
//              uv.y -= row / _VerticalAmount;
                half2 uv = i.uv + half2(column, -row);
                uv.x /=  _HorizontalAmount;
                uv.y /= _VerticalAmount;
                
                fixed4 c = tex2D(_MainTex, uv);
                c.rgb *= _Color;
                
                return c;
            }
            
            ENDCG
        }  
    }
    FallBack "Transparent/VertexLit"
}

序列帧动画的制作主要在于需要每个时刻计算该时刻下应播放的关键帧的位置,并对该关键帧进行纹理采样。
  在上述代码中,_MainTex是包含了所有关键帧图像的纹理,_HorizontalAmount和_VerticalAmount分别代表了该图像在水平方向和数值方向包含的关键帧个数,_Speed属性用于控制序列帧动画的播放速度。
  由于序列帧图像通常是透明纹理,需要设置Pass的相关状态,以渲染透明效果。
  fragment中的代码则是真正计算每个时刻该渲染什么样的纹理。
float time = floor(_Time.y * _Speed); 中,_Time.y是自场景加载后经过的时间,将其和_Speed相乘得到模拟的时间,这其实是用于调整动画播放的快慢,并用CG的floor函数对结果值取整来得到整数时间time,接下来是计算行索引和列索引
  可以自己在网上找张序列帧图片绑定到一个material中,用上述shader程序,就可以运行调节看到具体效果了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 111. [动画系统]如何将其他类型的动画转换成关键帧动画? 动画->点缓存->关键帧 112. [动画]Unit...
    胤醚貔貅阅读 13,170评论 3 89
  • 书写的很好,翻译的也棒!感谢译者,感谢感谢! iOS-Core-Animation-Advanced-Techni...
    钱嘘嘘阅读 2,315评论 0 6
  • 也曾忆起你翩翩然之形影,却看不清大观园中流泪的双眸。 也曾询问过你的人生,却不能理解那变幻莫测的宿命。 也曾在梦里...
    苏知沐阅读 338评论 0 1
  • 在听完伯凡老师的直播后,我便开始尝试列时间清单。 时间清单很好列,就是在每天晚上把自己一天所做...
    007刘利珍阅读 937评论 0 1
  • 在初中的时候我就立志学习文科,幻想着有一天上通天文下通地理。然而高中分班的时候被班主任循循善诱后留在了理科班,于是...
    colayan阅读 407评论 0 0