Unity Shader入门教程(十五):纹理动画

发表于2018-06-07
评论0 1.5k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学堂游戏程序行业精英群

711501594
在游戏中对于纹理动画的使用是非常多的,尤其是在各种资源都比较局限的移动平台上,我们往往会使用纹理动画来代替复杂的粒子系统等模拟各种动画效果。

一、序列帧实现爆炸效果

1、思路
使用一个nXn的序列图,通过floor操作;
每隔一段时间改变一次time,替换当前展示的单元图,计算uv时,先将顶点着色器中传入的uv映射到单元图的uv格子中;
再将映射好的uv映射到正确行、列上;
最后对纹理采样输出。

2、代码实践
Shader "Custom/Edu/ImgSeqAnim" {
    Properties {
        _MainTex("Main Tex",2D) = "white"{}
        _HAmount("HAmount",float) = 8
        _VAmount("VAmount",float) = 8
        _Speed("Speed",Range(1,100)) =30
        _Color("Color Tint",Color) = (1,1,1,1)
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        Pass
        {
            Tags{"LightMode" = "ForwardBase"}
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            sampler2D _MainTex;
            float4 _MainTex_ST;
            half _HAmount;
            half _VAmount;
            half _Speed;
            fixed4 _Color;
            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 = v.texcoord;
                return o;
            }
            fixed4 frag(v2f i):SV_Target
            {
                //这里要对时间取整!!!
                //错误写法
                //half time = _Time.y * _Speed;
                //导致的后果是前后图片横向滑动而不是隔一段时间替换一次
                half time = floor(_Time.y * _Speed);
                half row = floor(time/_HAmount);
                half column = time - row * _HAmount;
                //将当前uv点映射到更小的单元序列图像上
                half2 uv = half2(i.uv.x/_HAmount,i.uv.y/_VAmount);
                //将当前uv映射到正确的序列图上
                uv.x += column/_HAmount;
                //Unity中纹理坐标的竖直方向上从下到上递增
                //而序列帧纹理的播放顺序是从上到下的
                uv.y -= row/_VAmount;
                return tex2D(_MainTex,uv) * _Color;
            }
            ENDCG
        }
    }
    FallBack "

3、效果图

二、滚动背景效果实现

1、基本思路
随着时间连续的横向改变采样的uv坐标,又结合前景与后景做不同的滚动速率以达到更加真实的背景效果。

2、代码实践
Shader "Custom/Edu/BgSroll" {
    Properties {
        _FrontTex("前景",2D) = "white"{}
        _BackTex("后景",2D) = "white"{}
        _ScrollSpeed1("前景滚动速度",Range(-10,10)) =1.0
        _ScrollSpeed2("后景滚动速度",Range(-10,10)) =1.0
    }
    SubShader {
        Tags { "RenderType"="BackGround" "Queue" = "BackGround"}
        Pass
        {
            Tags{"LightMode" = "ForwardBase"}
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            sampler2D _FrontTex;
            float4 _FrontTex_ST;
            sampler2D _BackTex;
            float4 _BackTex_ST;
            half _ScrollSpeed1;
            half _ScrollSpeed2;
            struct a2v
            {
                float4 vertex:POSITION;
                float2 texcoord:TEXCOORD0;
            };
            struct v2f
            {
                float4 pos:SV_POSITION;
                float4 uv:TEXCOORD0;
            };
            v2f vert(a2v v)
            {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
                o.uv.xy = TRANSFORM_TEX(v.texcoord,_FrontTex);
                //frac函数将会截获取得各个分量的小数部分
                o.uv.xy += frac(float2(_ScrollSpeed1*_Time.y,0.0));
                o.uv.zw = TRANSFORM_TEX(v.texcoord,_BackTex);
                o.uv.zw += frac(float2(_ScrollSpeed2*_Time.y,0.0));
                return o;
            }
            fixed4 frag(v2f i):SV_Target
            {
                fixed4 frontColor = tex2D(_FrontTex,i.uv.xy);
                fixed4 backColor = tex2D(_BackTex,i.uv.zw);
                return lerp(backColor,frontColor,frontColor.a);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

3、效果图


原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

移动官网
公众号
在线反馈
返回顶部