图片循环滚动效果shader
背景无限循环滚动效果,有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的更多相关文章
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- 使用UIScrollView 结合 UIImageView 实现图片循环滚动
场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...
- 如何在HTML中实现图片的滚动效果
<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- cocos2d(背景图片循环滚动)
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
随机推荐
- 转载:Java高并发,如何解决,什么方式解决
原文:https://www.cnblogs.com/lr393993507/p/5909804.html 对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并 ...
- javascript this详解(转)
在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScrip ...
- Iterator 接口
首先要从foreach说起,我们都知道对象,数组和对象可以被foreach语法遍历,数字和字符串却不行.其实除了数组和对象之外PHP内部还提供了一个 Iterator 接口,实现了Iterator接口 ...
- poj1436水平可见线
还是线段树区间更新,这次不需要对线段离散化,但是要把线段纵坐标*2,可以举例模拟 #include<iostream> #include<cstring> #include&l ...
- JavaScriptDom操作与高级应用(八)
一:Dom操作基础与高级应用 Node接口也定义了一些所有节点类型都包含的属性和方法.
- 【Leetcode】404. Sum of Left Leaves
404. Sum of Left Leaves [题目]中文版 英文版 /** * Definition for a binary tree node. * struct TreeNode { * ...
- 浅析微信支付:公众平台卡券功能开通、HTML5线上发券(JS-SDK接口)、查看卡券详情
本文是[浅析微信支付]系列文章的第十六篇,主要讲解如何使用微信公众平台的卡券功能.如何使用HTML5在网页展示用户领券以及微信卡券和商户平台代金券的关系. 浅析微信支付系列已经更新十六篇了哟-,没有看 ...
- ActiveMQ、RabbitMQ、RocketMQ、Kafka有什么优点和缺点
ActiveMQ 单机吞吐量:万级 topic数量都吞吐量的影响: 时效性:ms级 可用性:高,基于主从架构实现高可用性 消息可靠性:有较低的概率丢失数据 功能支持:MQ领域的功能极其完备 总结: 非 ...
- 《Java程序性能优化》之设计优化
豆瓣读书:http://book.douban.com/subject/19969386/ 第一章 Java性能调优概述 1.性能的参考指标 执行时间: CPU时间: 内存分配: 磁盘吞吐量: 网络吞 ...
- day9--队列queue
queue队列 Queue是python标准库中的线程安全的队列(FIFO)实现,提供了一个适用于多线程编程的先进先出的数据结构,即队列,用来在生产者和消费者线程之间的信息传递.一个线程放入数据,另外 ...