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 "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;

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"
}

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);
	}
}

• SpriteManager (Free)
• 2D ToolKit (资源商店/$65.00)
• Sprite Manager 2 (资源商店/$150.00)

• TimelineFX ($46.79)
• Anime Studio Pro ($199.99)
• Adobe Flash Professional ($699.00)