Untiy Shader实现纹理贴图滚动

让我来详细讲解一下Unity Shader实现纹理贴图滚动的完整攻略。

简介

在游戏中，经常会出现需要让纹理贴图进行滚动的场景。比如，在一个街机游戏中，需要让背景贴图进行不断的水平或垂直移动，模拟出角色奔跑的效果。那么该如何实现这个效果呢？下面就让我们来看一下Unity Shader如何实现纹理贴图滚动。

Shader语言

在Unity Shader中，我们需要使用Shader语言来编写Shader。Shader语言主要分为两类：HLSL和CG。在Unity中，我们可以使用这两种语言来编写Shader。在本文中，我们将使用CG语言。

Shader实现

接下来，我们将使用一个简单的例子来演示Shader如何实现纹理贴图滚动。首先，我们需要定义一个材质球，并设置shader为Unlit/Texture。在下面的代码中，我们声明了一个叫做_Tex的纹理变量，并且通过TEXCOORD0坐标将纹理的坐标传入Shader中。

Shader "Unlit/ScrollTexture" {
    Properties {
        _MainTex("Texture", 2D) = "white" {}
        _Speed("Speed", Range(-10, 10)) = 1
    }

    SubShader {
        Tags {"Queue"="Transparent" "RenderType"="Opaque"}
        LOD 100

        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;
            float _Speed;

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                float2 uv = i.uv;
                uv += _Time.yx * _Speed;
                fixed4 color = tex2D(_MainTex, uv);
                return color;
            }
            ENDCG
        }
    }
}

在上面的代码中，我们可以看到，我们在fragment函数中进行计算，让纹理的UV坐标随着时间变化以达到纹理贴图滚动的效果。在这里，我们通过_TIme.yx变量来控制时间，通过_Speed变量来控制纹理滚动的速度。

示例说明

接下来，我们通过两个例子来演示Shader如何实现纹理贴图滚动。

水平滚动

Shader "Unlit/HorizontalScrollTexture" {
    Properties {
        _MainTex("Texture", 2D) = "white" {}
        _Speed("Speed", Range(-10, 10)) = 1
    }

    SubShader {
        Tags {"Queue"="Transparent" "RenderType"="Opaque"}
        LOD 100

        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;
            float _Speed;

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                float2 uv = i.uv;
                uv += _Time.yx * float2(_Speed, 0);
                fixed4 color = tex2D(_MainTex, uv);
                return color;
            }
            ENDCG
        }
    }
}

在这个示例中，我们实现了水平滚动的效果。我们通过在UV坐标中加上_Time.yx * float2(_Speed, 0)来控制纹理的移动。其中，_Speed参数代表水平移动的速度，float2(_Speed, 0)表示水平方向移动的距离。

垂直滚动

Shader "Unlit/VerticalScrollTexture" {
    Properties {
        _MainTex("Texture", 2D) = "white" {}
        _Speed("Speed", Range(-10, 10)) = 1
    }

    SubShader {
        Tags {"Queue"="Transparent" "RenderType"="Opaque"}
        LOD 100

        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;
            float _Speed;

            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target {
                float2 uv = i.uv;
                uv += _Time.yx * float2(0, _Speed);
                fixed4 color = tex2D(_MainTex, uv);
                return color;
            }
            ENDCG
        }
    }
}

在这个示例中，我们实现了垂直滚动的效果。我们通过在UV坐标中加上_Time.yx * float2(0, _Speed)来控制纹理的移动。其中，_Speed参数代表垂直移动的速度，float2(0, _Speed)表示垂直方向移动的距离。

总结

通过以上的讲解和示例，我们可以看到，在Unity中实现纹理贴图滚动非常简单。只需要在Shader中加入_Time.yx和一个Speed变量，就可以轻松实现纹理贴图的滚动效果。