Unity Shader实现序列帧动画效果

本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下

 

实现原理

主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标。(可分为以下四步)

1、我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time

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

3、接下来,我们需要使用行列索引值来构建真正的采样坐标。由于序列帧图像包含了许多关键帧图像, 这意味着采样坐标需要映射到每个关键帧图像的坐标范围内。我们可以首先把原纹理坐标i.uv 按行数和列数进行等分,得到每个子图像的纹理坐标范围。

4、然后, 我们需要使用当前的行列数对上面的结果进行偏移,得到当前子图像的纹理坐标。需要注意的是,对竖直方向的坐标偏移需要使用减法, 这是因为在Unity 中纹理坐标竖直方向的顺序(从下到上逐渐增大)和序列帧纹理中的顺序(播放顺序是从上到下〉是相反的。这样,我们就得到了真正的纹理采样坐标。

Unity Shader实现序列帧动画的代码:

Shader "Unlit/Demo-SequenceAnimation"
{
 Properties
 {
 _MainTex ("Sequence Frame Image", 2D) = "white" {} // 序列帧动画纹理
 _Color("Color Tint", Color) = (1, 1, 1, 1)      // 颜色
 _HorizontalAmount("Horizontal Amount", float) = 4  // 行数
 _VerticalAmount("Vertical Amount", float) = 4    // 列数
 _Speed("Speed", Range(1, 100)) = 30  // 播放速度
 }

 SubShader
 {
  // 由于序列帧图像通常包含了透明通道,因此可以被当成是一个半透明对象。
  // 在这里我们使用半透明的“标配”来设置它的SubShader 标签,即把Queue 和RenderType 设置成Transparent,
 //把IgnoreProjector 设置为True
 Tags { "RenderType"="Transparent" "Queue"="Transparent" "IgnoreProjector"="True"}
 LOD 100

 Pass
 {
 Tags{"LightMode"="ForwardBase"}

 // 由于序列帧图像通常是透明纹理,我们需要设置Pass 的相关状态,以渲染透明效果
 // 在Pass 中,我们使用Blend 命令来开启并设置混合模式,同时关闭了深度写入
 ZWrite Off
 Blend SrcAlpha OneMinusSrcAlpha

 CGPROGRAM
 #pragma vertex vert
 #pragma fragment frag

 #include "UnityCG.cginc"

 struct appdata
 {
 float4 vertex : POSITION;
 float2 uv : TEXCOORD0;
 };

 struct v2f
 {
 float2 uv : TEXCOORD0;
 float4 vertex : SV_POSITION;
 };

 sampler2D _MainTex;
 float4 _MainTex_ST;
 fixed4 _Color;
 float _HorizontalAmount;
 float _VerticalAmount;
 float _Speed;

 v2f vert (appdata v)
 {
 v2f o;
 o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
 return o;
 }

 fixed4 frag (v2f i) : SV_Target
 {
 float time = floor(_Time.y * _Speed);     //所经过的时间
 float row = floor(time / _HorizontalAmount);  // 第几行图片 (和行数不能对应起来)
 float column = time - row * _HorizontalAmount; // 第几列图片

 //每次更新的量
// float offserX = 1.0 / _HorizontalAmount;
// float offserY = 1.0 / _VerticalAmount;
// half2 uv = float2(i.uv.x * offsetX, i.uv.y*offsetY);

 //将所显示的图片缩放至应有的大小 (即一个关键帧图像的大小)
 half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / _VerticalAmount); // 等价于上面3句

 //下面方法虽然不能和序列帧动画一一对应,但仍符合序列帧动画的执行顺序
 uv.x += column / _HorizontalAmount; // 更换序列帧
 uv.y -= row / _VerticalAmount;   //等价于uv.y += 1.0 - row / _VerticalAmount; 

 // sample the texture
 fixed4 col = tex2D(_MainTex, uv);
 col.rgb *= _Color.rgb;     // 设置纹理颜色
 return col;
 }
 ENDCG
 }
 }
}

Tip:

因为使用了透明度混合,如果在Game视图中看不到效果,可去掉Lighting面板中的Skybox的材质;

ceil(x) 对输入参数向上取整。例如:ceil(float(1.3)) ,其返回值为 2.0

floor(x) 对输入参数向下取整。例如floor(float(1.3)) 返回的值为 1.0;但是 floor(float(-1.3))返回的值为-2.0。

源工程下载:UnityShader序列帧动画效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Unity代码实现序列帧动画播放器

    序列帧动画经常用到,最直接的方式就是用Animation录制.但某些情况下这种方式并不是太友好,需要靠代码的方式进行序列帧动画的实现. 代码实现序列帧动画,基本的思路是定义一个序列帧的数组/列表,根据时间的流逝来确定使用哪一帧并更新显示. NGUI的UI2DSpriteAnimation已经实现了此功能,但是它支持的目标只有Native2D的SpriteRenderer组件或者NGUI自身的UI2DSprite组件,并不支持UGUI的Image组件. 当然可以通过改写源码的方式来添加对Image

  • Unity3D制作序列帧动画的方法

    当我们需要制作动态炫酷科技感很强的UI时,美术一般会给我们提供一些序列图,这时候我们只需在程序里实现序列动画. 一.动画机 unity自带的帧动画机很方便,我们首先选择所要播放序列帧动画的Image,然后在Window下选择Animation,会弹出一个动画制动的界面,我们选择Create,然后进入如下界面: 我们按照如下添加动画控制的属性, 然后将我们美术给我们的序列图(要设置成2DandUI模式哦)拖入到动画帧面板里. Unity自带的动画机播放序列帧动画很简单也很方便,但是有一定的局限性.

  • 在Unity中实现动画的正反播放代码

    using UnityEngine; using System.Collections; public class AnimationAntiSowing : MonoBehaviour { public static AnimationAntiSowing _initialise; void Awake() { _initialise = this; } /// <summary> /// 动画进行正反播放 /// </summary> /// <param name=&q

  • Unity Shader实现序列帧动画效果

    本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下   实现原理 主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标.(可分为以下四步) 1.我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time 2.然后,我们使用time 除以_HorizontalAmount 的结果值的商来作为当前对应的行索引,除法结果的余数则是列索引. 3.接下来,我们需要使用行列索引

  • Unity shader实现顶点动画波动效果

    本文实例为大家分享了Unity shader实现顶点动画的具体代码,供大家参考,具体内容如下 需要了解的背景知识: 波动实例:y=  Asin(ωx+φ) φ:决定波形与X轴位置关系或横向移动距离(左加右减) ω:决定周期(最小正周期T=2Π/|ω|) A:决定峰值(纵向拉伸压缩的倍数) 顶点着色器的主要计算: 1.顶点位置 2.矩阵转换 片段着色器 1.纹理寻址 2.灯光作用 _Time表示时间周期 float4(t/20,  t,  t*2,  t*3) Shader "Custom/Wav

  • Unity Shader实现描边OutLine效果

    本文实例为大家分享了Unity Shader实现描边OutLine效果的具体代码,供大家参考,具体内容如下 Shader实现描边流程大致为:对模型进行2遍(2个pass)绘制,第一遍(描边pass)在vertex shader中对模型沿顶点法线方向放大,fragment shader设置输出颜色为描边颜色:第二遍正常绘制模型,除被放大的部分外,其余被覆盖,这样就有了描边的效果. 实现代码如下: Shader "Custom/OutlineShader" { Properties { _

  • Unity Shader实现黑幕过场效果

    本文实例为大家分享了Unity Shader实现黑幕过场效果的具体代码,供大家参考,具体内容如下 一.效果演示 二.实现 Shader:黑幕过场着色器 //黑幕过场着色器 Shader "Custom/BlackScreenSpread" { Properties { _Color("Main Color", Color) = (1,1,1,1) _MainTex("Base (RGB)", 2D) = "white" {}

  • Unity Shader实现翻书效果

    今天实现一个简单的翻书的效果,话不多说,先上一张效果图: 这里就随便用的一张纹理了,我们还是称为"翻木板"吧,哈哈. 实现过程: 其实这个效果实现起来还是挺简单的,大概思路其实就是 让所有顶点都绕Z轴旋转,并且通过正余弦使之带有一点弧度. 下面开始让我们一步一步的实现该效果. 首先打开Unity新建一个工程,场景,并且创建一个名为openBookEffect的Shader文件,删掉原本多余的代码. 第一步,我们先让它绕z轴旋转起来 这里就要用到一个旋转矩阵了,让顶点左乘该矩阵,就能得到

  • Unity Shader实现动态雾效果

    Unity Shader学习:动态雾,供大家参考,具体内容如下 先将相机近裁面四个角向量传给shader,再通过观察空间下的深度值和相机位置算出像素在世界坐标系的位置,通过世界空间高度值来设定雾的范围和浓度,然后通过噪声和uv偏移实现扰动效果.得到了类似寂静岭或恶灵附身1的效果. C#部分: using System.Collections; using System.Collections.Generic; using UnityEngine; [ExecuteInEditMode] publ

  • Unity Shader实现玻璃材质效果

    Unity Shader学习:玻璃材质,供大家参考. 主要是通过反射和折射来达到透明的效果,用菲涅尔来混叠. shader部分: Shader "Unlit/Crystal" { Properties { _Cube("Skybox",Cube)=""{} //折射角度 _EtaRatio("EtaRatio", Range(0, 1)) = 0 //菲涅尔系数 _FresnelBias("FresnelBias&q

  • Unity Shader实现水波纹效果

    本文实例为大家分享了Unity Shader实现水波纹的具体代码,供大家参考,具体内容如下 效果: Shader代码: Shader "Custom/shuibowen"{ Properties{ _MainTex("Base (RGB)",2D)="white"{} _distanceFactor("Distancefactor",float)=1 _timeFactor("time factor",fl

  • unity shader实现玻璃折射效果

    本文实例为大家分享了unity shader实现玻璃折射的具体代码,供大家参考,具体内容如下 Shader "Unlit/render_reflect" { Properties { _MainTex ("Texture", 2D) = "white" {} } SubShader { Tags {"Queue" = "Transparent" "RenderType"="Op

随机推荐