实现原理:主要思想是设置显示uv纹理的大小,并逐帧修改图片的uv坐标。

实现步骤

1、我们首先用_Time.y和速度属性_Speed相乘得到模拟的时间。

2、然后我们用time除以_HorizontalAmount的结果值作为当前的行索引,除法结果的余数则是列索引。

3、接下来,我们根据行索引和列索引来构建真正的采样坐标。由于序列帧图像包含了很多张关键帧图像,这意味着采样坐标需要映射到关键帧图像的坐标范围。

4、我们可以把原纹理坐标i.uv按行数和列数进行等分,得到每个子图像的纹理坐标范围。

5、映射到对应的行列数后,再对纹理坐标进行偏移。

注意:Unity的纹理坐标竖直方向的顺序和序列帧纹理中竖直方向上的顺序是相反的。

 Shader "unilt/SceneRainSplash" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {} //序列帧动画纹理
_Color("Color Tint", Color) = (, , , ) //颜色
_HorizontalAmount("Horizontal Amount", float) = // 行数
_VerticalAmount("Vertical Amount", float) = // 列数
_Speed("Speed", Range(, )) = // 播放速度
} CGINCLUDE #include "UnityCG.cginc" sampler2D _MainTex; uniform half4 _MainTex_ST;
uniform fixed4 _Color;
uniform float _HorizontalAmount;
uniform float _VerticalAmount;
uniform float _Speed; struct appdata
{
float4 vertex : POSITION; //从形似寄存器中读取顶点坐标
float2 uv : TEXCOORD0; //从形似寄存器中读取uv坐标信息
}; struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
}; v2f vert(appdata v)
{
v2f o; //mul(UNITY_MATRIX_MVP,*)' == 'UnityObjectToClipPos(*)
//(物体的模型到世界矩阵 * 从世界到摄像机的矩阵 * 投影的矩阵 )
o.vertex = UnityObjectToClipPos(v.vertex); //TRANSFORM_TEX,就是将模型顶点的uv和Tiling、offset两个变量进行计算得出实际显示用的定点uv
o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o;
} fixed4 frag(v2f i) : SV_Target
{
//所经过的时间,Unity内置变量_Timefloat4 _Time : Time (t/20, t, t*2, t*3)
float time = floor(_Time.y * _Speed);
//该时间渲染序列帧动画指定的行列
float row = floor(time / _HorizontalAmount);
float col = time - row * _HorizontalAmount; //将所显示的单张图片缩放到应有的大小区域
half2 uv = float2(i.uv.x / _HorizontalAmount, i.uv.y / _VerticalAmount);
//移动到对应缩放后的区域位置
uv.x += col / _HorizontalAmount;
uv.y -= row / _VerticalAmount;
fixed4 color = tex2D(_MainTex, uv);
color.rgb *= _Color.rgb;
return color;
} ENDCG SubShader {
Tags { "Queue" = "Transparent" }
Cull Off
ZWrite Off
Blend One OneMinusSrcColor Pass { CGPROGRAM #pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest ENDCG } }
FallBack Off
}

序列帧图像:

UnityShader 序列帧动画效果的更多相关文章

  1. iOS-动画效果(首尾式动画,代码快动画,核心动画,序列帧动画)

    一.各个动画的优缺点 1.首尾动画:如果只是修改空间的属性,使用首尾动画比较方便,如果在动画结束后做后续处理,就不是那么方面了. 2.核心动画:有点在于对后续的处理方便. 3.块动画: (1)在实际的 ...

  2. [Cocos2d-x v3.x]序列帧动画

      简单介绍 Cocos2d-x中.动画的详细内容是依靠精灵显示出来的,为了显示动态图片,我们须要不停切换精灵显示的内容.通过把静态的精灵变为动画播放器从而实现动画效果. 动画由帧组成,每一帧都是一个 ...

  3. Unity3d的序列帧动画

    马上这星期就要过去了,为了完成每星期写一篇博客的目标,熬夜也要写完. 最近项目中用到了很多序列帧动画,之前看教程也接触过序列帧动画,但当时没用到,就没仔细研究,这次就借着这个机会好好总结一下序列帧动画 ...

  4. (二)plist的使用和序列帧动画

    六.plist的使用方法: iOS的程序在安装在手机上以后会把全部资源文件集成在一个文件夹中,这种文件集合称为bundle,对于一般的工程,只有一个bundle,即mainbundle,因此可以通过b ...

  5. Unity Shader序列帧动画学习笔记

    Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...

  6. (转)NGUI系列教程七(序列帧动画UITexture 和 UIsprit)

    NGUI系列教程七(序列帧动画)   今天我给大家讲一下如何使用NGUI做序列帧动画.本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画.废话不说了,下面开始.还 ...

  7. unity shader序列帧动画代码,顺便吐槽一下unity shader系统

    一.看到UNITY论坛里有些人求unity shader序列帧动画,写shader我擅长啊,就顺势写了个CG的shader.代码很简单,就是变换UV采样序列帧贴图,美术配置行数列数以及变换速度. Sh ...

  8. canvas+js绘制序列帧动画+面向对象

    效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. NGUI系列教程七(序列帧动画)

    今天我给大家讲一下如何使用NGUI做序列帧动画.本节主要包括两方面内容,分别是使用UIspirit和使用UITexture 做序列帧动画.废话不说了,下面开始.还要在啰嗦一句,首先大家要准备一些序列帧 ...

随机推荐

  1. 深入理解JavaScript函数参数

    前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数. arguments javascri ...

  2. nginx模块学习

    rewrite模块的语法 链接

  3. Chapter 10 软件测试

    软件测试是软件质量保证的一项关键活动,验证与确认是贯穿软件生命周期的规范化评估方法.软件验证则试图证明在软件生存的各个阶段是否满足客户的需求,软件确认是一系列的活动和过程,两个活动相互独立但却相辅相成 ...

  4. DPDK skeleton basicfwd 源码阅读

    学习这个例子用于理解单纯的 dpdk 转发过程,L2 和 L3 的转发是基于此:在rte_eth_rx_burst()收包后进行解包,提取 mac.ip 等信息然后在转发到输出网卡. 如果要写出自己的 ...

  5. week4f:个人博客作业

    8,工作中的照片 9,对方编程习惯总结 宋成鑫(以后简称老宋).老宋,对编程的思想看的比较重,具体什么是编程的思想,我是也不是很清楚.但是,在编程过程中,老宋的一些话给了我启示.这或许就是编程的思想吧 ...

  6. H5页面的滚动条在windows浏览器下始终看到(灰色的不可用的)

    一般这种情况是在某些相关的div上设置了overflow:scroll属性,在mac系统的浏览器下均没有滚动条显示而在windows下的各个浏览器上均可以看到灰色的不可用的滚动条,这种情况我们需要在b ...

  7. OSG学习:裁剪变换(1)

    在OSG中,默认了6个裁剪平面以去除没有必要显示的物体.也可以自己定义其他的裁剪平面来确定裁剪. osg::ClipPlane类继承自osg::StateAttribute类,封装了OpenGL中的g ...

  8. 统计Github项目信息

    项目总述 项目Github传送门 主要任务是从之前同项目的组员建的关系型数据库里提取出我们需要的GitHub的数据,并把结果保存到文件,以便之后插入到数据库. 从已经建立好的关系型数据库上多线程地读取 ...

  9. PHP 配置默认SSL CA证书

    1.从CURL 官网下载CA 证书(当然也可以选择自己创建SSL CA证书,详情参考 https://blog.csdn.net/scuyxi/article/details/54898870 ,或自 ...

  10. vue-cli配置axios

    1. npm install axios --save 2. npm install @type/axios --save-dev(使用ts编写的需要此声明文件,升级的axios好像不需要了,已经自带 ...