Shader实例:序列帧动画
效果:


序列帧图片网上随便找的,质量不是很好,重点不是它,不要在意。
思路:
1.之前都是在一张面片上直接映射一张纹理,IN.uv的范围是0~1
现在要映射一张纹理上的一小块区域,就要用这块区域的uv去采样后映射到面片。
所以:x方向,IN.uv.x/列数,范围变化到0~(1/列数)
同理:y方向,IN.uv.y/行数,范围变化到0~(1/行数)
2.根据时间驱动,加上当前sprite的偏移量
uv.x = cellX + SpriteColumnIndex*1.0 / _Column;
uv.y = cellY + SpriteRowIndx*1.0 / _Row;
3.用变换后的uv去采样图片
half4 c = tex2D(_MainTex,uv);
代码有注释:
Shader "Custom/SpriteAnimation"
{
Properties
{
_MainTex("main tex" ,2D) = ""{}
_Row("行",Int) =
_Column("列",Int) =
_Speed("speed",Range(,)) =
} SubShader
{
Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" } Pass
{
Blend One OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc" struct v2f
{
float4 pos:POSITION;
float2 uv:TEXCOORD0;
}; sampler2D _MainTex;
float4 _MainTex_ST; int _Row;
int _Column;
float _Speed; v2f vert(appdata_base v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP,v.vertex);
o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
return o;
} half4 frag(v2f IN) :COLOR
{
float2 uv = IN.uv; float cellX = uv.x / _Column;
float cellY = uv.y / _Row; //Sprite总数
int count = _Row * _Column; //在0到count-1 范围内循环
int SpriteIndex = fmod(_Time.w*_Speed,count); //当前Sprite所在行的下标
int SpriteRowIndx = (SpriteIndex / _Column); //当前Sprite所在列的下标
int SpriteColumnIndex = fmod(SpriteIndex,_Column); //因uv坐标左下角为(0,0),第一行为最底下一行,为了合乎我们常理,我们转换到最上面一行为第一行,eg:0,1,2-->2,1,0
SpriteRowIndx = (_Row - ) - fmod(SpriteRowIndx,_Row); //乘以1.0转为浮点数,不然加号右边,整数除以整数,还是整数(有误)
uv.x = cellX + SpriteColumnIndex*1.0 / _Column;
uv.y = cellY + SpriteRowIndx*1.0 / _Row; half4 c = tex2D(_MainTex,uv);
return c;
}
ENDCG
}
}
FallBack "Diffuse"
}
- 本文固定链接: http://www.shihuanjue.com/?p=297
- 转载请注明: 乔 2016年01月16日 于 是幻觉 发表
Shader实例:序列帧动画的更多相关文章
- Unity Shader播放序列帧动画
Shader "LordShader/AnimateSprite" { Properties { _MainTint (,,,) //颜色属性,可以在u3d inspector面板 ...
- Unity Shader序列帧动画学习笔记
Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...
- unity shader序列帧动画代码,顺便吐槽一下unity shader系统
一.看到UNITY论坛里有些人求unity shader序列帧动画,写shader我擅长啊,就顺势写了个CG的shader.代码很简单,就是变换UV采样序列帧贴图,美术配置行数列数以及变换速度. Sh ...
- Unity Shader 序列帧动画
shader中的序列帧动画属于纹理动画中的一种,主要原理是将给定的纹理进行等分,再根据时间的变化循环播放等分中的一部分. Unity Shader 内置时间变量 名称 类型 描述 _Time floa ...
- cocos2d-x 2.0 序列帧动画 深入分析
转自:http://blog.csdn.net/honghaier/article/details/8222401 序列帧动画主要有几个类: CCSpriteFrame:精灵帧信息,序列帧动画是依靠多 ...
- [Cocos2d-x v3.x]序列帧动画
简单介绍 Cocos2d-x中.动画的详细内容是依靠精灵显示出来的,为了显示动态图片,我们须要不停切换精灵显示的内容.通过把静态的精灵变为动画播放器从而实现动画效果. 动画由帧组成,每一帧都是一个 ...
- iOS开发基础-序列帧动画之Tom猫
新建一个Single View Application,向该工程中导入Tom猫的图片资源,本示例演示Tom猫喝牛奶的动作.图片的名字为 drink_00.jpg.drink_01.jpg.....dr ...
- UnityShader 序列帧动画效果
实现原理:主要思想是设置显示uv纹理的大小,并逐帧修改图片的uv坐标. 实现步骤 1.我们首先用_Time.y和速度属性_Speed相乘得到模拟的时间. 2.然后我们用time除以_Horizonta ...
- Unity Shader 之 uv动画
Unity 动画 Unity Shader 内置时间变量 引入时间变量 名称 类型 描述 _Time float4 t是自该场景加载开始所经过的时间,4个分量分别是(t/20, t, 2t, 3t) ...
随机推荐
- 天河微信小程序入门《四》:融会贯通,form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- css3 perspective perspective-origin属性的理解
perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
- excel多组数据散点图生成
在研究数据分布时,散点图是一类比较常用的方法,通过三点图可以很好的显示数据的分布位置.一组数据生成散点图,利用excel是很容易生成的:但是,多组数据生成散点图,不同组数据用不同颜色表示,那该怎么生成 ...
- 原生js封装ajax,实现跨域请求
描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...
- Home 安转beta版软件
今天想装测试版的cocoapods,用 brew install cocoapods 后,总是安装稳定版,就是1.1.0,不是最新的beta版,发现用下面这个命令可以装最新beta版 brew ins ...
- Sublime 3 如何配置SVN插件
在sublime里面安装svn的插件,就可以在sublime的操作界面里面进行相关svn操作,这样就不用再回到文件系统中,进行相关svn的操作. 1.在进入sublime界面后,点击顶部菜单“Pref ...
- mina中游戏客户端服务端数据交互流程
====================================================================================CLIENT encode ...
- 带蒙版的提交loading页面实现
废话不多说,直接上代码. 首先是HTML中层的实现: <!-- loading 层 --> <div id="loadingDivBack" style=&quo ...
- linux 下查看cpu位数 内核等参数命令(转)
# uname -a Linux euis1 2.6.9-55.ELsmp #1 SMP Fri Apr 20 17:03:35 EDT 2007 i686 i686 i386 GNU/Linux ( ...
- 常用的HTML代码
一.文字1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>..........</fon ...