Unity Shader 之 实现循环滚动浏览长图片的效果

1、打开Unity，新建一个空工程，具体如下图

2、向工程中导入一个长图片，因为要循环浏览图片，那图片的 wrap mode 设置为 repeat ，具体如下图

3、在工程中，新建一个脚本可以命名为“LoopRollAnimation”，然后双击打开，具体如下图

4、脚本“LoopRollAnimation”的具体代码和代码说明如下图

5、脚本“LoopRollAnimation”具体内容如下：

Shader "Custom/LoopRollAnimation" {

Properties {

_Color ("Color", Color) = (1,1,1,1) // 图片混合颜色参数

_MainTex ("Albedo (RGB)", 2D) = "white" {} // 设置的长图片

_SeparateNumber("Seprate Number", float) = 3 // 把图片大概分割显示的个数

_RollSpeed("Roll Speed", Range(5,20)) = 10 // 滚动播放的速度参数

}

SubShader {

Pass{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

// 属性里面的参数在CG编程中需要重新声明，才能使用

float4 _Color;

sampler2D _MainTex;

float _SeparateNumber;

float _RollSpeed;

// 定义结构获取顶点信息和纹理坐标

struct appdata{

float4 vertex : POSITION;

float2 uv : TEXCOORD0;

};

struct v2f{

float4 pos : SV_POSITION;

float2 uv : TEXCOORD0;

};

v2f vert (appdata v){

v2f o;

// 物体的模型到世界矩阵 * 从世界到摄像机的矩阵 * 投影的矩阵

o.pos = UnityObjectToClipPos(v.vertex);

o.uv = v.uv;

return o;

}

// 实现循环滚动播放的函数

float4 LoopRollAnimationFunc(v2f i){

// 根据把图片大概分割显示的个数显示图片，然后在时间函数下移动图片

// 这里是水平移动，竖直移动的话，对 y 进行修改即可

float uv_x = i.uv.x * (1.0 / _SeparateNumber )  + _Time.x * _RollSpeed;

float uv_y = i.uv.y;

float2 uv = float2(uv_x, uv_y);

// 根据 uv 显示长图片，并且混合颜色

float4 color = tex2D(_MainTex, uv);

color.rgb *= _Color.rgb;

return color;

}

float4 frag(v2f i) : COLOR{

// 调用循环滚动函数

float4 color = LoopRollAnimationFunc(i);

return color;

}

ENDCG

}

}

}

6、脚本编译正确，回到Unity，在场景中 添加一个 Image，并且在工程中新建一个材质，把shader设置为刚才新建的shader，具体如下图

7、给材质赋值长途和对应参数，然后把材质赋给 Image，具体如下图

8、运行场景，循环滚动浏览长图片的效果如下图