背景无限循环滚动效果,有X和Y轴的速度控制,方便控制。见下图,操作步骤同之前的背景循环设置。

shader如下:

Shader "Custom/Scroll"
{
Properties{
_MainTint("Diffuse Tint" , Color) = (1,1,1,1)
_MainTex("Base (RGB)", 2D) = "white" {}
//x轴滚动速度
_ScrollXSpeed("X Scroll Speed" , Range(0,10)) = 2
//y轴滚动速度
_ScrollYSpeed("Y Scroll Speed" , Range(0,10)) = 2
}
SubShader{
Tags{ "RenderType" = "Opaque" }
LOD 200 CGPROGRAM
#pragma surface surf Lambert
fixed4 _MainTint;
fixed _ScrollXSpeed;
fixed _ScrollYSpeed;
sampler2D _MainTex; struct Input {
float2 uv_MainTex;
}; void surf(Input IN, inout SurfaceOutput o) { //获取UV坐标
fixed2 scrolledUV = IN.uv_MainTex; //根据时间和x,y轴的速度 计算当前UV坐标的偏移量
fixed xScrollValue = _ScrollXSpeed * _Time;
fixed yScrollValue = _ScrollYSpeed * _Time;
scrolledUV += fixed2(xScrollValue,yScrollValue); half4 c = tex2D(_MainTex, scrolledUV);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}

  在material处调整速度即可;

Ps:补充一个带有调整亮度的shader,因为有的时候,把图片设置该格式,整体会变暗。该shader不改变图片的颜色、亮度

调整material的layer mutiplier,可设置亮度;

Shader "Unlit/ScrollX"
{
Properties
{
_MainTex("Base Layer(RGB)", 2D) = "white" {} //第一层纹理 较远纹理
//_DetailTex("2nd Layer(RGB)",2D)="white"{} //第二层纹理 较近纹理
_ScrollX("Base layer Scroll Speed",Float) = 1.0 //第一层滚动速度
//_Scroll2X ("2nd layer Scroll Speed", Float) = 1.0 //第二层滚动速度
_Mutiplier("Layer Mutiplier", Float) = 1 //整体亮度
}
SubShader
{
Tags{ "RenderType" = "Opaque" "Queue" = "Geometry" }
LOD 100 Pass
{
Tags{ "LightMode" = "ForwardBase" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag #include "UnityCG.cginc" struct a2v
{
float4 vertex : POSITION;
float2 texcoord : TEXCOORD0;
}; struct v2f
{
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
}; sampler2D _MainTex;
float4 _MainTex_ST;
//sampler2D _DetailTex;
//float4 _DetailTex_ST;
float _ScrollX;
//fixed _Scrll2X;
float _Mutiplier; v2f vert(a2v v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex); o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2 (_ScrollX, 0.0) * _Time.y); //o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2 _Scroll2X, 0.0) * _Time.y);
return o;
} fixed4 frag(v2f i) : SV_Target
{ fixed4 c = tex2D(_MainTex, i.uv.xy);
//fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw); //fixed c = lerp(firstLayer, secondLayer, secondLayer.a);
c.rgb *= _Mutiplier; return c;
}
ENDCG
}
}
FallBack "VertexLit"
}

  另,该shader也可做2d场景背景,有影子随着背景移动的shader,只需要把注释打开即可。

  附上一个只可以调X轴速度的,仅供参考;  

Shader "Custom/ScrollingBackground" {
Properties{
_MainTex("Base (RGB)", 2D) = "white" {}
_ScrollX("Scroll Speed", float) = 1.0
}
SubShader{
Tags{ "RenderType" = "Opaque" }
LOD 200
Pass{
Tags{ "LightMode" = "ForwardBase" } CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc" sampler2D _MainTex;
float4 _MainTex_ST;
float _ScrollX; struct a2v {
float4 vertex : POSITION;
float4 texcoord : TEXCOORD0;
}; struct v2f {
float4 pos : SV_POSITION;
half2 uv : TEXCOORD0;
}; v2f vert(a2v v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = v.texcoord.xy*_MainTex_ST.xy + _MainTex_ST.zw;
//frac(x):返回x的小数部分
o.uv += frac(float2(_ScrollX, 0.0) * _Time.y);
return o;
} fixed4 frag(v2f i) : Color{
fixed4 c = tex2D(_MainTex, i.uv);
return c;
}
ENDCG
}
}
FallBack "VertexLit"
}

  

图片循环滚动效果shader的更多相关文章

  1. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  3. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  4. 使用UIScrollView 结合 UIImageView 实现图片循环滚动

    场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...

  5. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  6. Elastislide - 响应式的图片循环展示效果

    Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...

  7. cocos2d(背景图片循环滚动)

    背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...

  8. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

随机推荐

  1. 编译时bad substitution的解决办法

    由于使用的使用的编译器不同导致, 需要使用shell为 #!/bin/bash 即可.

  2. 源码编译安装nginx1.4.7

    传统上基于进程或线程模型架构的web服务通过每进程或每线程处理并发连接请求,这势必会在网络和I/O操作时产生阻塞,其另一个必然结果则是对内存或CPU的利用率低下.生成一个新的进程/线程需要事先备好其运 ...

  3. es6 entries(),keys() 和 values()

    for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 for (let elem of ['a', 'b'].values ...

  4. 洛谷P2239 螺旋矩阵

    传送门 分析:将整个矩阵看成 "回" 形状的分层结构,然后进行去层处理,使得要求得 \((i,j)\) 处于最外层,然后再分情况讨论.最外面的一层共有数: $ 4 * n - 4 ...

  5. 2017-05~06 温故而知新--NodeJs书摘(一)

    前言: 毕业到入职腾讯已经差不多一年的时光了,接触了很多项目,也积累了很多实践经验,在处理问题的方式方法上有很大的提升.随着时间的增加,愈加发现基础知识的重要性,很多开发过程中遇到的问题都是由最基础的 ...

  6. 使用caffe模型测试图片(python接口)

    1.加载相关模块 1.1 加载numpy import numpy as np 1.2 加载caffe 有两种方法. 方法一(静态导入): 找到当前环境使用的python的site-packages目 ...

  7. HDU 5988 Coding Contest(费用流+浮点数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5988 题目大意: 给定n个点,m条有向边,每个点是一个吃饭的地方,每个人一盒饭.每个点有S个人,有B盒 ...

  8. js字符串转换成数字与数字转换成字符串的实现方法

    转载:点击查看地址 js字符串转换成数字 将字符串转换成数字,得用到parseInt函数.parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt(' ...

  9. linux 卸载自带apache httpd 安装apache httpd

    一.卸载自带apache httpd 1.关闭httpd服务:/etc/init.d/httpd stop 2.列出相关程序包:rpm -qa|grep httpd 3.卸载命令:rpm -e --n ...

  10. django 2中的app_name和namespace

    最近看<精通DJANGO>里遇到的疑惑. 简书URL如下: https://www.jianshu.com/p/404500a0408a 其中的官方解释: 应用命名空间 它表示正在部署的应 ...