本系列主要参考《Unity Shaders and Effects
Cookbook》
一书(感谢原书作者),同时会加上一点个人理解或拓展。

这里是本书所有的插图。这里是本书所需的代码和资源(当然你也可以从官网下载)。

========================================== 分割线 ==========================================

题外话

好久未更新,一些习惯还是应该要好好坚持啊。最近发现Android上一个很好的应用,希望每天可以坚持看一个视频,了解下最新的科技动态和演讲,也推荐给大家使用!

这次内容主要讲如何使用sprite sheets制作2D动画。在Unity中,实际上已经有很多插件可以完成这个工作,例如2dTookit,新版的Unity中支持2D应该也会提供类似的功能了。虽然如此,我还是希望通过这篇文章可以更深入地理解2D动画的原理。说到动画的原理,先要提到一个名词,sprite atlas,也可以称为image sequence,实际上就是一张大图中包含了很多张小图,如下:

当我们按照一定速率滚动这张图时,就会发现图片动起来了,这我们应该都有经验,以前看小人书快速翻动时就发现小人在动。这里实际上也是这个原理。

准备工作


  1. 准备一张sprite sheet,你可以自己画一张也可以从网上下载一张,或是直接使用本书资源。这张图不需要太复杂,只需要包含一组图片序列来供滚动浏览就行。下面是本书中的实例图片(5084_Code/Unity assets/5084_02_UnityAssets/Textures/Chapter02_SpriteSheet005.png):

  2. 创建一个新的Shader和一个新的Material,名称分别为AnimateSprites;
  3. 新建一个场景,名为AnimateSprites_Scene,在场景中添加平行光,创建一个新的平面,并把上一步中的Material设为其材质,将第一步中的图片拖到Material的图片上。最后如下所示:

实现


  1. 打开Shader编辑器,向Properties 区域添加三个新的Properties:

    	Properties {
    _MainTex ("Base (RGB)", 2D) = "white" {} // Create the properties below
    _TexWidth ("Sheet Width", float) = 0.0
    _CellAmount ("Cell Amount", float) = 0.0
    _Speed ("Speed", Range(0.01, 32)) = 12
    }
  2. 在SubShader区域为每个新增的Properties增加对应的引用,以便在代码中使用它们的值:
    		CGPROGRAM
    #pragma surface surf Lambert sampler2D _MainTex; //Create the connection to the properties inside of the
    //CG program
    float _TexWidth;
    float _CellAmount;
    float _Speed;

    下面更改surf函数。

  3. 将_MainTex的UV坐标先存储到单独的变量中:
    			//Lets store our UVs in a seperate variable
    float2 spriteUV = IN.uv_MainTex;

    之后,我们将使用该变量计算新的UV坐标。

  4. 下面,我们需要计算每个小图的宽度,最后计算得到每个小图宽度占整体的百分比。

    原书中代码如下:

    			//Lets calculate the width of a singe cell in our
    //sprite sheet and get a uv percentage that each cel takes up.
    float cellPixelWidth = _TexWidth/_CellAmount;
    float cellUVPercentage = cellPixelWidth/_TexWidth;

    但通过观察代码可以发现,缩短为一行即可:

    			//Lets calculate the width of a singe cell in our
    //sprite sheet and get a uv percentage that each cel takes up.
    float cellUVPercentage = 1.0/_CellAmount;

    对于示例图片,其宽度为512,包含了9张小图,Inspector中配置如下:

  5. 下面,通过得到系统时间来计算需要在原图上的偏移量,来得到不同的小图:
    			//Lets get a stair step value out of time so we can increment
    //the uv offset
    float timeVal = fmod(_Time.y * _Speed, _CellAmount);
    timeVal = ceil(timeVal);
  6. 最后,计算在X方向上的最终偏移量。

    原书中代码如下:

    			//Animate the uv's forward by the width precentage of
    //each cell
    float xValue = spriteUV.x;
    xValue += cellUVPercentage * timeVal * _CellAmount;
    xValue *= cellUVPercentage;

    同样,观察cellUVPercentage的计算式,可以简化上述代码如下:

    			//Animate the uv's forward by the width precentage of
    //each cell
    float xValue = spriteUV.x;
    xValue += timeVal;
    xValue *= cellUVPercentage;
  7. 应用最终偏移量,显示到plane上:
    			spriteUV = float2(xValue, spriteUV.y);
    
    			half4 c = tex2D (_MainTex, spriteUV);
    o.Albedo = c.rgb;
    o.Alpha = c.a;
最终Shader代码如下:
Shader "Custom/AnimateSprites" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {} // Create the properties below
_TexWidth ("Sheet Width", float) = 0.0
_CellAmount ("Cell Amount", float) = 0.0
_Speed ("Speed", Range(0.01, 32)) = 12
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200 CGPROGRAM
#pragma surface surf Lambert sampler2D _MainTex; //Create the connection to the properties inside of the
//CG program
float _TexWidth;
float _CellAmount;
float _Speed; struct Input {
float2 uv_MainTex;
}; void surf (Input IN, inout SurfaceOutput o) {
//Lets store our UVs in a seperate variable
float2 spriteUV = IN.uv_MainTex; //Lets calculate the width of a singe cell in our
//sprite sheet and get a uv percentage that each cel takes up.
float cellUVPercentage = 1.0/_CellAmount; //Lets get a stair step value out of time so we can increment
//the uv offset
float timeVal = fmod(_Time.y * _Speed, _CellAmount);
timeVal = ceil(timeVal); //Animate the uv's forward by the width precentage of
//each cell
float xValue = spriteUV.x;
xValue += timeVal;
xValue *= cellUVPercentage; spriteUV = float2(xValue, spriteUV.y); half4 c = tex2D (_MainTex, spriteUV);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}

保存后,点击运行即可看到动画效果。

解释


为了每刻只显示一张小图,我们需要将sprite atlas进行放缩,这就需要计算放缩比例cellUVPercentage。
float cellUVPercentage = 1.0/_CellAmount;
事例中_CellAmount为9,则cellUVPercentage为0.11。

下面根据时间计算偏移量,这些偏移量随时间增大而且为整数,直到增大为小图的数目大小。
float timeVal = fmod(_Time.y * _Speed, _CellAmount);
timeVal = ceil(timeVal);
这需要使用CGFX的内置函数fmod。

如上所示,fmod函数将返回x除以y的余数。示例中,fmod函数将循环返回范围为0至9之间的小数。为了得到整数,再使用ceil函数向上取整。


下面这部分代码最难理解:
float xValue = spriteUV.x;
xValue += timeVal;
xValue *= cellUVPercentage;

第一行首先声明一个新的变量xValue,用于存储用于图片采样的x坐标。它首先被初始为surf函数的输入参数In的横坐标。类型为Input的输入参数In代表输入的texture的UV坐标,范围为0到1。第二行向原值加上小图的整数偏移量,最后为了只显示一张小图,我们还需将x值乘以小图所占百分比cellUVPercentage。

为了理解,我们举例来说。假设此时timeVal值为0,即显示第一张小图,则此时xValue的范围将会是 (0 + 0) * 0.11 = 0至(1 + 0) * 0.11 = 0.11,即第一张小图对应的贴图范围。时间推进,当timeVal值增大为1,即需要显示第二张小图时,xValue值范围将是 (0
+ 1) * 0.11 = 0.11至(1 + 1) * 0.11 = 0.22,即第二张小图对应的贴图范围。这样就按照顺序显示小图,从而让整个画面动起来了。

扩展


在上例中,我们只需要偏移x值即可。但有时,x和y方向都需要进行偏移来移动小图。如下图:

这时你只需要像移动x方向那样移动y即可。虽然这样可以达到动画要求,但是这张在Shader端开发的方法会添加过多的Shader指令,从而造成程序性能下降。
为了改善这一情况,我们可以将帧偏移选择的代码转移到C#脚本中,从而让CPU来分担GPU的部分负担。这种同时使用CPU和GPU,让其配合相互工作的方法在优化性能方面非常有用。按照这种想法我们改写上述Shader代码,并创建一个新的C#代码,SpriteAnimator.cs,并将其拖拽到plane上面。
更改后的Shader代码如下:
Shader "Custom/AnimateSprites" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {} // Create the properties below
_CellAmount ("Cell Amount", float) = 0.0
_TimeValue ("Time Value", float) = 0.0
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200 CGPROGRAM
#pragma surface surf Lambert sampler2D _MainTex; //Create the connection to the properties inside of the
//CG program
float _CellAmount;
float _TimeValue; struct Input {
float2 uv_MainTex;
}; void surf (Input IN, inout SurfaceOutput o) {
//Lets store our UVs in a seperate variable
float2 spriteUV = IN.uv_MainTex; //Lets calculate the width of a singe cell in our
//sprite sheet and get a uv percentage that each cel takes up.
float cellUVPercentage = 1.0/_CellAmount; //Animate the uv's forward by the width precentage of
//each cell
float xValue = spriteUV.x;
xValue += _TimeValue;
xValue *= cellUVPercentage; spriteUV = float2(xValue, spriteUV.y); half4 c = tex2D (_MainTex, spriteUV);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}

C#代码如下:

using UnityEngine;
using System.Collections; public class SpriteAnimator : MonoBehaviour
{ public float speed = 5.0f;
public int cellAmount = 0; float timeValue = 0.0f; void Start ()
{
transform.renderer.material.SetFloat("_CellAmount", cellAmount);
} // Update is called once per frame
void FixedUpdate ()
{
timeValue = Mathf.Ceil(Time.time * speed % 9);
transform.renderer.material.SetFloat("_TimeValue", timeValue);
}
}

在Inspector界面上,我们只需要调整C#代码的两个变量即可,而不需要更改Material的变量。这样,我们将计算整数偏移量的工作转移到了C#代码中。



当然,如果你不想自己实现一个功能完全的2D动画系统,你可以到Asset Store上下载一些插件,这些插件可以帮你完成大部分工作。这些插件有:
如果你需要寻找一些应用来制作sprites,可以使用下列应用:
这刀刀都在肉上,当然我相信大家总会有办法的。

【Unity Shaders】Using Textures for Effects——让sprite sheets动起来的更多相关文章

  1. 【Unity Shaders】Using Textures for Effects介绍

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  2. 【Unity Shaders】Using Textures for Effects —— 实现Photoshop的色阶效果

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  3. 【Unity Shaders】Using Textures for Effects——打包和混合textures

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  4. 【Unity Shaders】Using Textures for Effects——通过修改UV坐标来滚动textures

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  5. 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对照度

    本系列主要參考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同一时候会加上一点个人理解或拓展. 这里是本书全部的插图. 这里是本书所需的代码 ...

  6. 【Unity Shaders】《Unity Shaders and Effects Cookbook》总结篇

    我的唠叨 不知不觉,从发表第一篇关于<Unity Shaders and Effects Cookbook>已经快十个月了.一开始的初衷就是学习笔记,毕竟将来回过头去看的时候,再看英文难免 ...

  7. 【Unity Shaders】使用Unity Render Textures实现画面特效——建立画面特效脚本系统

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  8. 【Unity Shaders】Lighting Models —— 衣服着色器

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  9. 【Unity Shaders】Reflecting Your World —— Unity3D中的遮罩反射(Masking Reflections)

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

随机推荐

  1. NPOI给单元格加范围边框

    HSSFWorkbook workbook2 = new HSSFWorkbook();        //XSSFWorkbook workbook2 = new XSSFWorkbook();// ...

  2. redis和spring集成

    redis和spring框架的整合 我这里创建的是maven工程,通过maven锁定版本号,管理jar包之间的依赖 1.在pom文件中,引入spring和redis的jar包的坐标: <prop ...

  3. Java面试18|关于进程、线程与协程

    1.IPC(Inter-Process Communication,进程间通信)与线程通信的几种方式 # 管道( pipe ):管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进 ...

  4. MySQL EXTRACT() 函数

    定义和用法 EXTRACT() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 EXTRACT(unit FROM date) date 参数是合法的日期表达式.unit 参 ...

  5. jQuery 捕获

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  6. Gradle 1.12用户指南翻译——第46章. Java 库发布插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  7. sublime snippet 示例

    <snippet> <content><![CDATA[local ${1:M} = {} function ${1:M}.new(cls, self) self = s ...

  8. RunLoop总结:RunLoop的应用场景(三)

    今天要讲的RunLoop的应用场景可能太简单了,所以东西比较少.因为跟UITableView.UICollectionView等的滑动优化有关,就顺便总结一下会影响UITableView.UIColl ...

  9. C算法实现:将字符串中的数字返回为整型数

    今天看linux内核驱动的代码,发现一个算法写得挺简单,也有意思. 分享一下我的测试代码: #include <stdio.h> typedef int U32 ; U32 String2 ...

  10. Linux 高性能服务器编程——socket选项

    socket选项函数 功能:用来读取和设置socket文件描述符属性的方法 函数: #include <sys/scoket.h> int getsockopt ( int sockfd, ...