Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to draw Unity+shader halftone animation to achieve Star Kabi Nova Alliance screen cutting effect, the content of the article is of high quality, so the editor will share it for you to do a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Kabi is a good game, this time the screen cut and loading screen is also adorable. First, release the effect that this article wants to reproduce:

The screen-cutting effect of Kabi's entrance

Next, let's show what we finally achieved:

It is also very simple to use, and even the animation system can complete the above effects.

After some analysis, we can split Kabi's screen-cutting effects into several parts:

1. Halftone graphics that move in one direction

two。 Switch between two maps / colors

3. Mask map of any shape to specify axis rotation and scaling

So from the first step, draw a halftone graph.

To draw halftone dots and move them through the screen, you first need a property to determine the location of the graph.

Properties {_ MainTex ("Texture A", 2D) = "black" {} _ MainTexB ("Texture B", 2D) = "black" {} [Space (10)] _ Position ("Halftone Position", Float) = 1 _ Diameter ("Diameter", Range (0jue 1)) = 0.25 _ Num ("Length", Range (1d16)) = 3.0} the diameter of dots is also defined _ Diameter And the length of the halftone transition region _ Numstruct v2f {float4 pos: SV_POSITION Half2 uvTA: TEXCOORD0; half2 uvTB: TEXCOORD1; half2 uvORI: TEXCOORD2;//original}; v2f vert (appdata_img v) {v2f o; o.pos = mul (UNITY_MATRIX_MVP, v.vertex); o.uvTA = (v.texcoord-_MainTex_ST.zw) * _ MainTex_ST.xy; o.uvTB= (v.texcoord-_MainTexB_ST.zw) * _ MainTexB_ST.xy O.uvORI.xyroomv.texcoord.uvORI.XYXYREV.texCod; return o;}

Here you can use tillng and offset for the two maps, while the uv for painting halftone uses the original values.

Then, based on position, uv is divided into several grids. Finally, draw the dot with the center point of each grid as the center.

Fixed4 frag (v2f I): SV_Target {float _ rd; fixed2 posCenter; fixed indexOfGrid=floor ((i.uvORI.x-_Position) / _ Diameter); / / num of grids between uv and PosW posCenter.x=_Position+ (indexOfGrid + 0.5) * _ Diameter; posCenter.y= (floor (i.uvORI.y/_Diameter) + 0.5) * _ Diameter; _ rd=0.5*_Diameter* abs (indexOfGrid) / _ Num / / radius of the current grid fixed inCircle=step (distance (i.uvORI philosophy posCenter), _ rd); inCircle=clamp (inCircle,0,1); fixed4 texA=tex2D (_ MainTex, i.uvTA) .rgba; fixed4 texB=tex2D (_ MainTexB, i.uvTB) .rgba; fixed4 sum= lerp (texB,texA,inCircle); return sum;}

Take a look at the effect, there seems to be some problems.

It can be found that symmetrical dots appear on both the left and right sides of the position. To solve this problem, we only need to make the part where the uv is greater than position directly display the textureB.

If (indexOfGrid > = 1) {return tex2D (_ MainTexB, i.uvTB) .rgba; / / return texture A when uv is in front (larger) of PosW}

Another problem is that the radius of the dot is an increasing relationship according to the distance from position. In the rear grid, when the radius of the dot exceeds the size of the grid, it will not be displayed in the adjacent grid.

This problem will not be abnormal when you draw a square in the grid.

When you draw dots, you can find some obvious straight lines (at the first column of dots in the image above), but you can't see them when you draw squares.

At this point, the post-method grid needs to be taken into account in the calculation.

Float _ rdNext=_rd+0.5*_Diameter/_Num; fixed2 posCenterNext= posCenter-fixed2 (diameterW,0); / / center of up-next grid / / fixed inCircle=step (abs (i.uvORI.x-posCenter.x), _ rd) * step (abs (i.uvORI.y-posCenter.y), _ rd); / / Square fixed inCircle=step (distance (i.uvORI), _ rd) + step (distance (i.uvORI), _ rdNext); / / Dot

Now, a movable halftone figure is drawn.

But this is a little different from our common halftone graphics.

Yes, there is no offset between the grids, it is completely horizontal and vertical distribution, which does not look good at all, so you need to add a parameter to let it have an offset in the y direction, and then in order to make the graph more natural, when the y direction is offset, the x direction is also compressed. So we make the following modifications to frag fixed4 frag (v2f I): SV_Target {float _ rd; fixed2 posCenter; fixed diameterW,diameterH; diameterW=_Diameter* (1-_rotOffset/2); / / width of grid, reduce when _ rotOffset is larger than zero diameterH=_Diameter; fixed indexOfGrid=floor ((i.uvORI.x-_Position) / diameterW) / / num of grids between uv and PosW if (indexOfGrid > = 1) {return tex2D (_ MainTexB, i.uvTB) .rgba; / / return texture A when uv is in front (larger) of PosW} posCenter.x=_Position+ (indexOfGrid+0.5) * diameterW; fixed modOffset=frac (indexOfGrid*_rotOffset) * _ Diameter; posCenter.y= (floor ((i.uvORI.y-modOffset) / diameterH) + 0.5) * diameterH+modOffset _ rd=0.5*diameterH* abs (indexOfGrid) / _ Num;//radius of the current grid float _ rdNext=_rd+0.5*diameterH/_Num; fixed2 posCenterNextUp=posCenter-fixed2 (diameterW,_Diameter* (_ rotOffset-1)); fixed2 posCenterNextDown=posCenter-fixed2 (diameterW,_Diameter*_rotOffset); / / center of down-next grid float _ rdPrev=_rd-0.5*diameterH/_Num; fixed2 posCenterPrevUp=posCenter+fixed2 (diameterW,_Diameter* (_ rotOffset-1)) Fixed2 posCenterPrevDown=posCenter+fixed2 (diameterW,_Diameter*_rotOffset); / / center of down-next grid / / fixed inCircle=step (abs (i.uvORI.x-posCenter.x), _ rd) * step (abs (i.uvORI.y-posCenter.y), _ rd); / / Square fixed inCircle=step (distance (i.uvORI _ posCenter), _ rd); inCircle+=step (distance (i.uvORI _ rdNext), _ rdNext) + step (distance (i.uvORI _ posCenterNextDown), _ rdNext) InCircle+=step (distance (i.uvORIdict posCenterPrevUp), _ rdPrev) + step (distance (i.uvORIZhi posCenterPrevDown), _ rdPrev); inCircle=clamp (inCircle,0,1); fixed4 texA=tex2D (_ MainTex, i.uvTA) .rgba; fixed4 texB=tex2D (_ MainTexB, i.uvTB) .rgba; fixed4 sum= lerp (texB,texA,inCircle); return sum;}

Because there is an offset in the uv direction, four squares are needed to draw the content in a grid: upper left, lower left, upper right, lower right.

In properties, add

_ rotOffset ("Offset Between Points", Range (0recom 0.5)) = 0.0

Because the dot is symmetrical, the range of the offset needs to be only half of the lattice size.

At this point, a halftone cut effect that can move the position is complete. At this point, you might wonder, how is this different from using a map directly as a mask? The answer is that there is really no difference, and the effect so far can be achieved with a mask. Using a mask can achieve even more fancy effects, but a mask also has things it can't do. Next, modify the method of grid division, so that the position of the grid no longer follow the position change, and then change the method of calculating the radius of the dot to make the effect of popping up one by one.

Modify the method of grid division so that the position of the grid no longer changes with position:

Fixed indexOfGrid=floor ((i.uvORI.x) / diameterW); / / num of grids between uv and PosW posCenter.x= (indexOfGrid+0.5) * diameterW; fixed modOffset=frac (indexOfGrid*_rotOffset) * _ Diameter;posCenter.y= (floor ((i.uvORI.y-modOffset) / diameterH) + 0.5) * diameterH+modOffset

Then change the method of calculating the dot radius to change it according to the relationship between uv and position:

_ rd=0.5* (_ Position-posCenter.x) / _ Num;//radius of the current grid float _ rdNext=_rd+0.5*diameterW/_Num; float _ rdPrev=_rd-0.5*diameterW/_Num

Here, when calculating the radius in the front and rear grid, you need to use the compressed diameter, otherwise there will be something wrong. As the method of dividing the grid has changed, the original if (indexOfGrid > = 1), the direct output of textureB has been invalid, in fact, the condition should be that the radius of the dot is less than 0.

Next, you need a property that indicates the angle to make the graph move in one direction, not just from left to right.

_ Rotation ("Rotation", Range (0360)) = 0.0

The algorithm of rotation angle can be found in many places. Here, the uv coordinates used in calculating halftone are converted directly, while the uv of textureA and B are not affected. Because the uv change between vertices is linear, this transformation can be done in the vert function.

O.uvORI.xyroomv.texcoord.fixed2 offsetXY=fixed2; float Rot = _ Rotation * (3.1415926f/180.0f); float s = sin (Rot); float c = cos (Rot); float2x2 rMatrix = float2x2 (c,-s, s, c); rMatrix * = 0.5; rMatrix + = 0.5; rMatrix = rMatrix * 2-1; o.uvORI.xyx = mul (o.uvORI.xy-offsetXY, rMatrix) + offsetXY

It is also possible to change this _ Rotation to a Radian angle. _ Rotation ("Rotation", Range (0Power6.283)) = 0. 0, then there is no need to multiply PI and divide by 180.

Now take a look at the sample scenario

SlideshowEffect: Halftone and Popup

Https://sakuraplus.github.io/make-terrain-with-google-elevation/webplayershow/webplayershow.html

The effect of the halftone cut image inside is basically complete.

On Unity+shader how to draw halftone animation to achieve Star Kabi Nova Star Alliance screen cutting effect is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.