Sprite animation effect of Unity3d texture

Sprite Animation, as the name implies is an animation effect, we use the map is similar to film, each frame is placed on a picture,

Then the displacement is shifted by changing the UV value,

If you have not previously done a UV-related transformation, you can view the previous article Unity3d texture map Mobile effects

First, we need a sticker like this one.

Then build a shader


Declare variables first
_texwidth Total Map width
_cellamount A picture contains several actions (there are several small pictures)
_speed Speed of animation

Properties {_maintex ("Base (RGB)", 2D) = "White" {}_texwidth ("Sheet Width", float) = 0.0_cellamount ("Cell Amount", Floa T) = 0.0//has several picture _speed ("Speed", Range (0.01, 32)) = 12}

The main operation is also performed in the surf function.
Need a little knowledge of mathematics ....

Browse Local Variables First

FLOAT2 UV coordinates for SPRITEUV maps
Float Cellpixelwidth The width of a small picture in a map

Float Celluvpercentage small screen to the ratio of the entire map, the smaller the number of small picture ratio of the larger

Float Timeval The number of small picture bits currently displayed (which is the small picture to display)
float XValue x-coordinate values in map Uvs

void Surf (Input in, InOut surfaceoutput o) {float2 SPRITEUV = in.uv_maintex;float cellpixelwidth = _texwidth/_cellamount; A small picture of the width of float celluvpercentage = cellpixelwidth/_texwidth;//small screen accounted for large picture ratio, the smaller the ratio of the larger float Timeval = fmod (_TIME.Y * _speed, _cellamount); timeval = Ceil (timeval);//rounding up to get an integer less than cellamount float XValue = spriteuv.x;xvalue + = Celluvpercentage * Timeval * _cellamount;//xvalue *= celluvpercentage;//The UV is scaled SPRITEUV = Float2 (XValue, spriteuv.y); Half4 C = tex2d (_maint EX, SPRITEUV); O. Albedo = C.rgb;o. Alpha = C.A;}

The width of a small picture
= Total width/number of small pictures
Cellpixelwidth = _texwidth/_cellamount;


The ratio of a small screen to the entire map = width of a small screen/entire map width
Celluvpercentage = Cellpixelwidth/_texwidth


For the time * speed and the number of small pictures to get more than a small number of pictures, just is the current display of the number of images
fmod (x, y)The remainder function returns a floating-point residue of X/y
Timeval = Fmod (_TIME.Y * _speed, _cellamount)

But Fmod () gets a floating-point value, not an integer value,
We'll useceil ()This function takes it up to the full
Timeval = Ceil (timeval)

Initialize x-coordinate values in Xvalue map Uvs
float XValue = spriteuv.x

Offset to get the UV position of the current small picture
XValue + = celluvpercentage * Timeval * _cellamount

Then you have to scale the Uvs to see a small picture
XValue *= Celluvpercentage

Then get the final UV value for texture rendering

Finally, the result is this:

The shader code is as follows:

Shader "Custom/testshader" {Properties {_maintex ("Base (RGB)", 2D) = "White" {}_texwidth ("Sheet Width", float) = 0.0_cel Lamount ("Cell Amount", float) = 0.0//has several picture _speed ("Speed", Range (0.01, +)) = 12}subshader {Tags {"rendertype" = "Opaque" }lod 200cgprogram#pragma Surface Surf lambertfloat _texwidth;float _cellamount;float _speed;sampler2d _MainTex;struct Input {float2 Uv_maintex;}; void Surf (Input in, InOut surfaceoutput o) {float2 SPRITEUV = in.uv_maintex;float cellpixelwidth = _texwidth/_cellamount; A small picture of the width of float celluvpercentage = cellpixelwidth/_texwidth;//small screen accounted for large picture ratio, the smaller the ratio of the larger float Timeval = fmod (_TIME.Y * _speed, _cellamount); timeval = Ceil (timeval);//rounding up to get an integer less than cellamount float XValue = spriteuv.x;xvalue + = Celluvpercentage * Timeval * _cellamount;//xvalue *= celluvpercentage;//The UV is scaled SPRITEUV = Float2 (XValue, spriteuv.y); Half4 C = tex2d (_maint EX, SPRITEUV); O. Albedo = C.rgb;o. Alpha = C.A;} ENDCG} FallBack "Diffuse"}

--------by wolf96

Sprite animation effect of Unity3d texture