滚动的背景
一、分析利用纹理坐标制作滚动背景的原理
基本原理： 不停的利用时间变量对uv坐标进行偏移计算 超过1的部分从0开始采样 小于0的部分从1开始采样 注意： 滚动背景使用的美术资源图片，往往是首位相连的 ## 二、使用Shader实现滚动的背景
1.实现思路
- 属性声明、属性映射 主纹理、U轴速度、V轴速度
- 透明Shader 一般这种滚动图片都有透明部分
- 设置渲染标签 Tags{"RenderType" = "Transparent" "Queue" = "Transparent" "IgnoreProjector" = "True"}
- 关闭深度写入、开启混合
- ZWrite off
- Blend SrcAlpha OneMinusSrcAlpha
- 结构体 顶点和纹理坐标
- 顶点着色器 顶点坐标转化、纹理坐标赋值
- 片元着色器 利用时间和速度对uv坐标进行偏移计算，通过frac()函数进行滚动限制 利用偏移后的UV坐标进行采样
2.实现示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| Shader "Unlit/ScrollingBackgroud"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
_ScrollSpeedU("ScrollSpeedU",float) = 0.5
_ScrollSpeedV("ScrollSpeedV",float) = 0.5
}
SubShader
{
Tags { "RenderType"="transparent" "Queue" = "Transparent" "IgnoreProjector" = "True" }
Pass
{
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float _ScrollSpeedU;
float _ScrollSpeedV;
v2f vert (appdata_base v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.texcoord;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
float2 scrollUV = frac(i.uv + float2(_Time.y * _ScrollSpeedU,_Time.y * _ScrollSpeedV));
return tex2D(_MainTex,scrollUV);
}
ENDCG
}
}
}
|
