UnityShader 序列帧动画效果

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

实现步骤

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

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

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

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

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

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

 1 Shader "unilt/SceneRainSplash" {
 2     Properties {
 3         _MainTex ("Base (RGB)", 2D) = "white" {}               //序列帧动画纹理
 4         _Color("Color Tint", Color) = (1, 1, 1, 1)            //颜色
 5         _HorizontalAmount("Horizontal Amount", float) = 6        // 行数
 6         _VerticalAmount("Vertical Amount", float) = 1            // 列数
 7         _Speed("Speed", Range(1, 100)) = 7                     // 播放速度
 8     }
 9
10     CGINCLUDE
11
12         #include "UnityCG.cginc"
13
14         sampler2D _MainTex;
15
16         uniform half4 _MainTex_ST;
17         uniform fixed4 _Color;
18         uniform float _HorizontalAmount;
19         uniform float _VerticalAmount;
20         uniform float _Speed;
21
22         struct appdata
23         {
24             float4 vertex : POSITION;   //从形似寄存器中读取顶点坐标
25             float2 uv : TEXCOORD0;      //从形似寄存器中读取uv坐标信息
26         };
27
28
29         struct v2f
30         {
31             float2 uv : TEXCOORD0;
32             float4 vertex : SV_POSITION;
33         };
34
35         v2f vert(appdata v)
36         {
37             v2f o;
38
39             //mul(UNITY_MATRIX_MVP,*)‘ == ‘UnityObjectToClipPos(*)
40             //(物体的模型到世界矩阵 * 从世界到摄像机的矩阵 * 投影的矩阵 )
41             o.vertex = UnityObjectToClipPos(v.vertex);
42
43             //TRANSFORM_TEX,就是将模型顶点的uv和Tiling、offset两个变量进行计算得出实际显示用的定点uv
44             o.uv = TRANSFORM_TEX(v.uv, _MainTex);
45
46             return o;
47         }
48
49         fixed4 frag(v2f i) : SV_Target
50         {
51             //所经过的时间,Unity内置变量_Timefloat4 _Time : Time (t/20, t, t*2, t*3)
52             float time = floor(_Time.y * _Speed);
53             //该时间渲染序列帧动画指定的行列
54             float row = floor(time / _HorizontalAmount);
55             float col = time - row * _HorizontalAmount;
56
57             //将所显示的单张图片缩放到应有的大小区域
58             half2 uv = float2(i.uv.x / _HorizontalAmount, i.uv.y / _VerticalAmount);
59             //移动到对应缩放后的区域位置
60             uv.x += col / _HorizontalAmount;
61             uv.y -= row / _VerticalAmount;
62             fixed4 color = tex2D(_MainTex, uv);
63             color.rgb *= _Color.rgb;
64             return color;
65         }
66
67     ENDCG
68
69     SubShader {
70         Tags { "Queue" = "Transparent" }
71         Cull Off
72         ZWrite Off
73         Blend One OneMinusSrcColor
74
75     Pass {
76
77         CGPROGRAM
78
79         #pragma vertex vert
80         #pragma fragment frag
81         #pragma fragmentoption ARB_precision_hint_fastest
82
83         ENDCG
84
85         }
86
87     }
88     FallBack Off
89 }

序列帧图像:

原文地址:https://www.cnblogs.com/kane0526/p/9216580.html

时间: 2024-10-16 14:09:20

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

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

http://www.cnblogs.com/hellohuan/archive/2014/01/10/3512784.html 一.看到UNITY论坛里有些人求unity shader序列帧动画,写shader我擅长啊,就顺势写了个CG的shader.代码很简单,就是变换UV采样序列帧贴图,美术配置行数列数以及变换速度. Shader "HELLOHUAN/Hello_Sequence" { Properties { _Color ("Main Color", C

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

简介 Cocos2d-x中,动画的具体内容是依靠精灵显示出来的,为了显示动态图片,我们需要不停切换精灵显示的内容,通过把静态的精灵变为动画播放器从而实现动画效果.动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画. 我们使用Animation类描述一个动画,而精灵显示动画的动作则是一个Animate对象.动画动作Animate是精灵显示动画的动作,它由一个动画对象创建,并由精灵执行. 创建方法 - 手动添加序列帧到Animation类 - 使用文件初始化Animation类 手

iOS开发-UI基础-汤姆猫Tom(序列帧动画)

使用UIImageView和UIButton实现Tom小案例. 功能分析:点击对应按钮后,tom实现相应的动作和声音 步骤分析: 搭建UI界面:(头部,肚子,尾巴,左脚和右脚使用的是button) 监听按钮点击 根据点击的按钮实现相应的序列帧动画 tom的动作就是一张一张的图片连续显示在屏幕上,实现动画有几种方式: 1.首尾式: //动画的开始 [UIView beginAnimations:nil context:nil]; //动画的内容 //提交动画(动画结束) [UIView commi

Cocos2dx学习笔记10:cocos2dx序列帧动画(1)

在cocos2dx里是不支持gif动画的,所以我们无法给精灵设置gif格式的图片.但是如果我们想实现动画效果呢?那么我们就要自己通过大量的静态图来组成播放成动画. 在cocos2dx里提供了序列帧动画的概念来实现这个功能,动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画. 首先找一张动图的gif图,这里QQ群里最近动图的逗逼图太多,我就随便找了一张,把图片另存到桌面,打开ps软件,把图片拖进去,这样gif图会被拆分许多的图层.我们把图层一个一个图层的保存成png的静态图,命名

IOS 开发笔记-基础 UI(7)汤姆猫(UIImageView 的序列帧动画、图片加载,方法重构、Bundle 图片素材)

使用UIImageView.UIButton实现一个综合小案例---汤姆猫 回忆:UIImageView 来自UIView,UIView 来自UIResponder,UIButton 来自UIControl,UIControl 来自UIView 单独看实现,代码实现其实比较简单,但是创意很难得,美工要求很高! 是一个了不起的游戏! 功能分析 (1)点击对应的按钮后,让汤姆猫展现对应的动画 步骤分析 (1)搭建UI界面,同时也是准备素材 (2)监听按钮点击 (3)根据点击的按钮执行对应的动画 说明

cocostudio使用plist创建序列帧动画图片名称序列错乱的问题

cocostudio 版本v2.2.9 用texturePacker将动画帧打包成一个plist和一张png,将plist拖入cocostudio中的资源栏中. 如图所示,plist里面的图片顺序是乱掉的,而且该顺序无法调整,10,11应该在最后,这样选择这11张图创建的序列帧动画中间2帧将是错乱的 如果自己手动调整关键帧很麻烦,那么解决问题的地方就在于texturePacker的打包上,观察文件命名,排序方式10,11排在1后面,所以猜测 texturePacker是一个个字符按位比较的,就是

序列帧动画

简介 Cocos2d-x中,动画的具体内容是依靠精灵显示出来的,为了显示动态图片,我们需要不停切换精灵显示的内容,通过把静态的精灵变为动画播放器从而实现动画效果.动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画. 我们使用Animation类描述一个动画,而精灵显示动画的动作则是一个Animate对象.动画动作Animate是精灵显示动画的动作,它由一个动画对象创建,并由精灵执行. 创建方法 手动添加序列帧到Animation类 使用文件初始化Animation类 手动添加

Sprite动画效果实现

2D游戏中通过短时间内快速切换贴图来实现动画效果.为了减少贴图数量,可以合并为一张贴图,根据时间来修改UV坐标,达到和切换贴图一样的效果. 在UnityShader的Properties块中,定义属性: Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _CellAmount ("Cell Amount", float) = 0.0 _Speed ("Speed", f

canvas+js绘制序列帧动画

效果: 素材: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制序列帧动画</title> </head> <body> <canvas id="demo"></canvas> <script type="te