【Unity Shaders】Using Textures for Effects——让sprite sheets动起来
本系列主要参考《Unity Shaders and Effects
Cookbook》一书(感谢原书作者),同时会加上一点个人理解或拓展。
这里是本书所有的插图。这里是本书所需的代码和资源(当然你也可以从官网下载)。
========================================== 分割线 ==========================================
题外话
好久未更新,一些习惯还是应该要好好坚持啊。最近发现Android上一个很好的应用,希望每天可以坚持看一个视频,了解下最新的科技动态和演讲,也推荐给大家使用!
这次内容主要讲如何使用sprite sheets制作2D动画。在Unity中,实际上已经有很多插件可以完成这个工作,例如2dTookit,新版的Unity中支持2D应该也会提供类似的功能了。虽然如此,我还是希望通过这篇文章可以更深入地理解2D动画的原理。说到动画的原理,先要提到一个名词,sprite atlas,也可以称为image sequence,实际上就是一张大图中包含了很多张小图,如下:
当我们按照一定速率滚动这张图时,就会发现图片动起来了,这我们应该都有经验,以前看小人书快速翻动时就发现小人在动。这里实际上也是这个原理。
准备工作
- 准备一张sprite sheet,你可以自己画一张也可以从网上下载一张,或是直接使用本书资源。这张图不需要太复杂,只需要包含一组图片序列来供滚动浏览就行。下面是本书中的实例图片(5084_Code/Unity assets/5084_02_UnityAssets/Textures/Chapter02_SpriteSheet005.png):
- 创建一个新的Shader和一个新的Material,名称分别为AnimateSprites;
- 新建一个场景,名为AnimateSprites_Scene,在场景中添加平行光,创建一个新的平面,并把上一步中的Material设为其材质,将第一步中的图片拖到Material的图片上。最后如下所示:
实现
- 打开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
} - 在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函数。
- 将_MainTex的UV坐标先存储到单独的变量中:
//Lets store our UVs in a seperate variable
float2 spriteUV = IN.uv_MainTex;之后,我们将使用该变量计算新的UV坐标。
- 下面,我们需要计算每个小图的宽度,最后计算得到每个小图宽度占整体的百分比。
原书中代码如下://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中配置如下:
- 下面,通过得到系统时间来计算需要在原图上的偏移量,来得到不同的小图:
//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); - 最后,计算在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; - 应用最终偏移量,显示到plane上:
spriteUV = float2(xValue, spriteUV.y); half4 c = tex2D (_MainTex, spriteUV);
o.Albedo = c.rgb;
o.Alpha = c.a;
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"
}
解释
float cellUVPercentage = 1.0/_CellAmount;
float timeVal = fmod(_Time.y * _Speed, _CellAmount);
timeVal = ceil(timeVal);
float xValue = spriteUV.x;
xValue += timeVal;
xValue *= cellUVPercentage;
第一行首先声明一个新的变量xValue,用于存储用于图片采样的x坐标。它首先被初始为surf函数的输入参数In的横坐标。类型为Input的输入参数In代表输入的texture的UV坐标,范围为0到1。第二行向原值加上小图的整数偏移量,最后为了只显示一张小图,我们还需将x值乘以小图所占百分比cellUVPercentage。
+ 1) * 0.11 = 0.11至(1 + 1) * 0.11 = 0.22,即第二张小图对应的贴图范围。这样就按照顺序显示小图,从而让整个画面动起来了。
扩展
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#代码中。
【Unity Shaders】Using Textures for Effects——让sprite sheets动起来的更多相关文章
- 【Unity Shaders】Using Textures for Effects介绍
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- 【Unity Shaders】Using Textures for Effects —— 实现Photoshop的色阶效果
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- 【Unity Shaders】Using Textures for Effects——打包和混合textures
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- 【Unity Shaders】Using Textures for Effects——通过修改UV坐标来滚动textures
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- 【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的亮度、饱和度和对照度
本系列主要參考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同一时候会加上一点个人理解或拓展. 这里是本书全部的插图. 这里是本书所需的代码 ...
- 【Unity Shaders】《Unity Shaders and Effects Cookbook》总结篇
我的唠叨 不知不觉,从发表第一篇关于<Unity Shaders and Effects Cookbook>已经快十个月了.一开始的初衷就是学习笔记,毕竟将来回过头去看的时候,再看英文难免 ...
- 【Unity Shaders】使用Unity Render Textures实现画面特效——建立画面特效脚本系统
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- 【Unity Shaders】Lighting Models —— 衣服着色器
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- 【Unity Shaders】Reflecting Your World —— Unity3D中的遮罩反射(Masking Reflections)
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
随机推荐
- NPOI给单元格加范围边框
HSSFWorkbook workbook2 = new HSSFWorkbook(); //XSSFWorkbook workbook2 = new XSSFWorkbook();// ...
- redis和spring集成
redis和spring框架的整合 我这里创建的是maven工程,通过maven锁定版本号,管理jar包之间的依赖 1.在pom文件中,引入spring和redis的jar包的坐标: <prop ...
- Java面试18|关于进程、线程与协程
1.IPC(Inter-Process Communication,进程间通信)与线程通信的几种方式 # 管道( pipe ):管道是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进 ...
- MySQL EXTRACT() 函数
定义和用法 EXTRACT() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 EXTRACT(unit FROM date) date 参数是合法的日期表达式.unit 参 ...
- jQuery 捕获
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- Gradle 1.12用户指南翻译——第46章. Java 库发布插件
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
- sublime snippet 示例
<snippet> <content><![CDATA[local ${1:M} = {} function ${1:M}.new(cls, self) self = s ...
- RunLoop总结:RunLoop的应用场景(三)
今天要讲的RunLoop的应用场景可能太简单了,所以东西比较少.因为跟UITableView.UICollectionView等的滑动优化有关,就顺便总结一下会影响UITableView.UIColl ...
- C算法实现:将字符串中的数字返回为整型数
今天看linux内核驱动的代码,发现一个算法写得挺简单,也有意思. 分享一下我的测试代码: #include <stdio.h> typedef int U32 ; U32 String2 ...
- Linux 高性能服务器编程——socket选项
socket选项函数 功能:用来读取和设置socket文件描述符属性的方法 函数: #include <sys/scoket.h> int getsockopt ( int sockfd, ...