实现原理:主要思想是设置显示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. SharpDevelop 笔记

    1. 下载地址: http://jaist.dl.sourceforge.net/project/sharpdevelop/ 2. 使用 VS2012 去掉编译不通过的 Test ,其它可以运行调试. ...

  2. mkswap命令详解

    基础命令学习目录首页 原文链接:http://blog.51cto.com/arlen99/1743841 mkswap命令用于在一个文件或者设备上建立交换分区.在建立完之后要使用sawpon命令开始 ...

  3. 升级Xcode 10 后报错问题记录([CP] Copy Pods Resources)

    1.升级Xcode到Version 10.0 (10A255)后,运行已有项目,报如下错误: error: Multiple commands produce '/Users/galahad/Libr ...

  4. 一次ajax调用,发送了两次请求(一次为请求方法为option,一次为正常请求)

    在项目了开发时遇见一个奇怪的现象,就是我在js里面发送一次ajax请求,在浏览器network那边查询到的却是发送了两次请求,第一次的Request Method参数为OPTIONS,第二次的Requ ...

  5. Virtual DOM的简单实现

    了解React的同学都知道,React提供了一个高效的视图更新机制:Virtual DOM,因为DOM天生就慢,所以操作DOM的时候要小心翼翼,稍微改动就会触发重绘重排,大量消耗性能. 1.Virtu ...

  6. fullPage全屏高度自适应

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Javascript面向对象二

    Javascript面向对象二 可以通过指定原型属性来对所有的对象指定属性, Object.prototype.name="zhangsan"; Object.prototype. ...

  8. 剑指offer:二位数组中的查找

    准备找实习期间,复习一下数据相关内容,刷刷题. 题目描述: 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样 ...

  9. FD.io 社区中国行暨未来网络技术沙龙 南京站 参会小结

    FD.io 社区中国行暨未来网络技术沙龙 南京站,2018 年 3 月 17 日. 开场致辞 Ray 介绍了一些有的没的 ⁃ (Future Event)DPDK summit, FD.io summ ...

  10. vue开发完成后打包后图片路径不对

    用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过.也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理. 于是,上周五模拟好数据(接口还未写),准备打包 ...