Esfog_unityshader Tutorial _ Frame-wise animation

　There is a period of time not out of this series of new articles, today take a more common and relatively basic use of change shader to change the continuous adjustment of the UV implementation of the small function of the frame animation. It was a long time since I had written it, I practiced practiced hand. In the new version of Unity has long been integrated with the sprite2d features, and can edit irregular graphics, but to understand the principle of it is fine!

Frames-per-frame animation

　　Frame animation people should not be unfamiliar, often see the animation of a few frames of the state in a certain order to integrate the same picture, such as:

As we can see, this picture animation has a total of 20 frames, from left to right, from top to bottom in order to arrange (basically this rule). To show the effect we need a plane as a model, unity inside the panel can be, but the final effect is probably the animation is inverted, Because it is not clear that unity comes with the panel's vertex UV case, you can only manually turn the switch to the right angle (if you can model it, make a plane guide to unity). We all know how a map is mapped to the surface of the model based on the UV value of the model point. If you do not modify, the lower left corner of the UV is (0,0), the upper right corner is (a), then you directly paste the stickers up to see the effect is the same, this is obviously not what we want. In the previous tutorial we are directly with the model of the UV,UV is how much to follow it to the map to take the corresponding color, this time we need to modify, such as the vertex of the UV is (a) We also do not go to the map of the location to take. Instead, it calculates the UV position of the corresponding sprite on the map (also called the Sprite, which is a piece of a specific small eliminating banding on the picture), based on time. Do not think the model vertex itself of the UV information has changed, in fact, we just passed him to our UV information processing a bit to get the pixel we want to position.

The principle is this, we carry out the example code analysis:

1Shader"ESFOG/SPRITEUV" 2 {3 Properties4     {5_spritetex ("spritetexture (RGB)", 2D) =" White" {}6_spriterowcount ("rowcounts",float) =07_spritecolumncount ("columncounts",float) =08_speed ("Animationspeed", Range (0.01,Ten)) =49     }Ten Subshader One     { A Pass -         { -Tags {"Rendertype"="Opaque" } the              - Cgprogram -             #pragmaVertex vert -             #pragmaFragment Frag +#include"Unitycg.cginc" -              + uniform sampler2d _spritetex; AUniformfloat_spriterowcount; atUniformfloat_spritecolumncount; -Uniformfloat_speed; -              -             structVertexoutput -             { - float4 pos:sv_position; in float2 uv:texcoord0; -             }; to  + vertexoutput Vert (appdata_base input) -             { the vertexoutput o; *O.pos =Mul (Unity_matrix_mvp,input.vertex); $O.UV =Input.texcoord.xy;Panax Notoginseng                 returno; -             } the              + float4 Frag (vertexoutput input): COLOR A             { the                 floatTotalspritecount = _spriterowcount *_spritecolumncount; +                 floatRowavgpercent =1/_spritecolumncount; -                 floatColumnavgpercent =1/_spriterowcount;  $                 floatSpriteindex = Fmod (_TIME.Y *_speed,totalspritecount);  $Spriteindex =Floor (Spriteindex);  -                 floatColumnIndex =Fmod (spriteindex,_spritecolumncount); -                 floatRowIndex = Spriteindex/_spritecolumncount; theRowIndex = _spriterowcount-1-Floor (rowIndex); -FLOAT2 SPRITEUV =Input.uv;Wuyispriteuv.x = (spriteuv.x + columnindex) *rowavgpercent; theSpriteuv.y = (spriteuv.y + rowIndex) *columnavgpercent;  -Float4 col =tex2d (_SPRITETEX,SPRITEUV); Wu                 returnCol; -             } About              $ ENDCG -         } -     }  -FallBack"Diffuse" A}

　　As before, a part of the content has been mentioned in the previous tutorial, no longer repeat it.

Line 5th to 8th , in the Properties section of shader, we define the _spritetex that is used to store the animated image. The _spriterowcount that is used to store a few lines of the image on the animated image. Store the image on a total of a few columns of the element Spritecolumncount. And the _speed that controls the speed of animation playback. Where _speed applies a new property type, range (x, y). This property creates a total slider slider on the Inspector panel of the material ball. He will return the float value of the position of the total slider. The leftmost is x and the right end is Y. User can drag directly, very convenient.

line 42nd to 44th , You can see from the code that the Vertexoutput and vert functions are simple, because our content is in the Frag function, Totalspritecount is used to store the total number of sprites on the animated image (how many frames altogether). Rowavgpercent is used to store a sprite in a row in the horizontal proportion, because the lower left corner of a picture is a UV (0,0), the upper right corner is (in). So it can also be considered that each of the figures in the transverse proportion of the UV. From now on, you should pay attention to the row and column in the code. Sometimes it's the horizontal or the vertical. Don't get dizzy by me. I feel awkward, too. The _spritecolumncount here is a total of a few columns we defined earlier, so 1/_spritecolumncount is the proportion of each of the graphs we want in the row. Columnavgpercent.

line 45th to 46th , because we are frame-by-frames, which is a frame-by-frame playback, Then you must record the current play in the first few frames, Spriteindex is used to do this. There is a seemingly unfamiliar expression in the back, where _time is a FLOAT4 variable that unity provides for me, and the _time.y component represents the elapsed time after the game began (s). About _ More explanations of time can be found in Unity's help documentation about the contents of the shader built-in variables. And then multiplied by a _speed is we use to adjust the playback speed, if _speed = 1 Then we are 1 seconds 1 frames of speed play animation, if _speed = 2 is 1 seconds 2 frames speed play. and the entire fmod (_TIME.Y * _speed,totalspritecount) where fmod (x, y) is the X-pair y remainder. Because our animation is looping, and the sequence number is calculated from 0, so the entire take-over operation can be based on the current time and playback speed to determine the playback to the first frame, and is a loop playback. Because it is two floating-point numbers, the remainder may contain decimal digits. And we specifically play to the first few frames is not possible for the decimal. So we use the floor function to take the results of the next round, why not take the whole, we think about it.

line 47th to 49th , in this step, We're going to figure out the first few rows of the corresponding voxel in the entire voxel matrix based on the playback to the first few frames. I think you must have seen a lot of it when you went to college. where Spriteindex/_spritecolumncount divides the current frame by the total number of columns to get the currently played figure in the first few lines (starting from 0). and Fmod (Spriteindex,_spritecolumncount) Use the current frame number to the total number of columns to get the current figure in the first column, why we do not need to fmod the results of the surplus, we think about it. Finally we take the rowindex first, then we use (total number-1) to subtract from the result, which is rounded because the rowindex in line 48th is divided by two floating-point numbers, and the result may contain decimal digits. and use (_spriterowcount-1) to reduce it, because the image of the UV origin is in the lower left corner then we calculated the first few lines are actually from the bottom of the number, which is obviously contrary to our expectations, and because the number of rows is calculated from 0, so we use (total number-1) Subtract the original rowindex to get the eliminating banding we want in the first few lines (from the bottom up).

　　Line 50th ~53 , create a SPRITEUV and give the original UV information, and then we began to process the entire raw UV, first UV information on the X-direction value of processing, (spriteuv.x + columnindex) * Rowavgpercent can be removed spriteuv.x*rowavgpercent + columnindex*rowavgpercent. The plus left is equivalent to the original uv.x (0~1) that we scaled to (0~rowavgpercent ), which is the horizontal UV ratio of the first eliminating banding in a single line of the graph. In fact, this position is equivalent to the first one in each row, and the value to the right of the plus sign is actually our relative to the UV that we just calculated as a base address and then add this offset, a figure in the landscape accounted for rowavgpercent so much UV ratio, So he's in column columnindex, so he's saying that his base position on the left side of the to is offset by so many UV ratios (columnindex*rowavgpercent). May be more around, we have a good thought to understand. Back Spriteuv.y the same. Finally, we use the processed SPRITEUV as a new UV value to remove the corresponding color in the map to return it.

　　

　　(~ o ~) ~ series of the sixth of the tutorial to this end, the content of this article is relatively basic, is explained more around, I have not written for a while, some unfamiliar. I hope you forgive me. In the future, we will continue to share. Now it's one o'clock in the morning, and tomorrow we have to work, I hope you have something to gain. Because this effect is dynamic in order to show the effect of my ability, can only use the software frame one frame screenshot and then synthesized into GIF display. It's played up and down because of the uneven size. Let's have a look. Wash and sleep ~ ~

　　

　　Respect for the wisdom of others, welcome reprint, please specify the author Esfog, the original address http://www.cnblogs.com/Esfog/p/4088597.html

Esfog_unityshader Tutorial _ Frame-wise animation