Unity VFX Graph - Yasuo Wind Wall Effect Tutorial

today we are going to see how to create the yasu wind wall [Music] not these wind walls this wind blade you know the one that cancels pretty much any ability on League of Legends yeah that one I'm Gabriel iguer a VFX artist that is currently developing rabbit's tail by the way links below for more and I'm gonna show you how to recreate the fan made version of yasu wall immunity game enjoy it's also a great way to learn how to create wind effects and if you want to get your ends of this project it is all available on my patrons page there's plenty of visible effects it's an awesome library for your games or to study links below so without further Ado let's jump right into this [Music] one requires some mesh and a specific motion and well a Shader so let's start with the motion first enough folder with right click I'm gonna go ahead and create a visual effect graph rename it to VFX graph underscore Yazoo ball and drag and drop it to my scene and then press delete button to open VFX graph and I'm gonna dock this window more or less around here right so this is constantly spawning particles because of this black Hub here which we can delete and replace by a burst single burst of one particle and down here we don't want to Output a quad we are going to need a mesh like I said previously so let's exactly do that replace this with an output particle mesh and delete the output particle quad let's already take care of the size with a set size set to 1 and here we go we have this bin from Fall guys I mean now we can control the scale it's going to be useful let's leave it right here and as you can see it's going up which is not exactly the motion we are looking for let's remove this set velocity and say the set lifetime doesn't have Randomness by turning this off and say it's 4 seconds which is more or less the time of a yasu wall in the update particle where it keeps on updating the particle we are going to use a set velocity this is where we are going to control the motion a value of 5 in the Z will push this forward excellent and this wall has a very specific motion which requires a curve we are going to need to sample a curve it's very simple to the time it's going to be for the age of our lifetime which goes from 0 to 1 and represents this Lifetime right here and that value can be multiplied for now by one this is where we are going to control the speed of the wall let's connect this to the Z and as you can see it goes a little bit forward now the motion requires a specific curve for example something like this it's close but not exactly what we are looking for the yasu wall it's really fast in the beginning and then it slows down towards the end of the lifetime as you can see that motion is done by adding a key mirrors around here and we right click we are going to say that the value is going to be 0.16 and the time 0.16 a very specific value I know right click again on this curve and let's select broken so we can control these handles like this so we got this to slow down towards the end now if you press play it's slow because multiply is set to 1. if we set it to 5 for example that's looking better for a yasu wall right so the motion is already there and the lifetime now we just need the mesh and for a mesh I'm going to use blender because it's free you can easily pick this up what we need is a clean scene so I'm going to select everything with a and press delete and then with shift a I'm going to add the mesh a plane This Plane I'm going to rotate it with r 90 degrees only in the X I'm gonna press G and lock it into Z to push up a value of 1. as you can see if I scale this up it scales from the center we want this to scale from the bottom so I'm going to use shift Ctrl alt C and say the origin to 3D cursor as you can see it scales from the bottom great let's scale these only in the X for now a value of 3 for more or less and then scale into z a value of 1.66 you should have a plane like this now with tablets enter delete mode select everything and press Ctrl R and scroll up to create three vertical edges I'm gonna select these two edges scale them only in the X a value of more or less 1.6 I'm going to select the edge of the extremities press G and move it into y a small value like 0.3 0.35 all right you should have something like this at this point and now we are going to add some curvature to these so with Ctrl R again we're going to scroll up this time we want horizontal edges three and with shift out I'm going to select this Edge Loop and push it with G only in the Y to the front I'm gonna do the same right here and now we can select the last Edge loop on top and with G lock it in the wire and push it to the back great you should have something like this and this is pretty much what we need now with spacebar I'm going to search for shade smooth you can also go up here in object and find shade smooth one last thing we need to do is control the UVs so you can properly map a text or to this object as you can see this is the device currently they will distort the texter which is not great now I'm going to press one and numpad to go to the front orthographic view you can also press 3 to go to the side view but we want this to be like this and then press U to select project from view bounds as you can see now it represents the reality of this mesh more properly let's just rename this object to yasu wall get out of the edit mode with Tab and press Ctrl a to apply rotation and scale and that's it we have our mesh let's go to file and in export select fbx I'm going to turn on selected objects to export only this wall rename this to yasu wall and Export it now back to Unity we can assign down here our yasu ball and if you press play you you will probably see nothing because it is small a simple trick is to go to your mesh and in the part panel say the scale factor is 100 and I'm gonna press apply and still we don't see nothing and it's very likely the rotation is wrong I'm going to look around to see if I find the mesh exactly so happier in the initialize part we can use the set angle and say that the x is -90. and here we go it's facing forwards cool and now let's get rid of this default particle and create a Shader it's going to be a very simple Shader so with right click on the folder we can go ahead and in share the graph in urp create an unlit Shadow graph rename it to windshader for example and double click to open this up and the first thing we need is to say the surface type is transparent and most importantly turn on support VFX graph down here to make your life easier we are going to use a procedural node in this noise section we have here three noises and the one that I found to be closer to the ASU wall is the simple noise as you can see we can control the scale of this so let's create a float for that and call it the noise scale default value of 10 and now we need to stretch this vertically and then shrink it horizontally so we are going to use the node called tiling and offset connect it here and as you can see the tiling controls exactly that we can stretch or Shrink the image let's create a vector too so we can control that option in VFX graph nice styling default value of 3 and 0.2 or 1 1 and then to scroll this as you can see we have the offset the Y that's going to be useful as well another Vector 2 property to control in VFX graph call it noise speed default value of -0.5 in the Y but to animate this we are going to multiply the noise speed with a Time node and it's scrolling up and it is stretched but it is still too persistent we need to kind of dissolve this so it's connected to a power node as you can see these controls how much we dissolve it let's create a fault property so we can control it in the effects graph and call it noise power default value of 1 or 2. and now we can connect this to the base color of the fragment function so you can see how it works in VFX graph back to VFX graph we have the shadow graph option in case you don't see it you can go to editing preference in visual effects you can turn down experimental operator slash blocks and then you can assign your Shader as you can see this is how it looks currently it doesn't have any transparency and we have the art edges all over so back to the share let's fix the transparency by first creating a color property it's going to also be useful to tint this however we want let's say it's HDR and white with Alpha to 100 for now drag it around here and multiply this with a power node and replace the connection to the base color now we can split this and use the a channel which is the alpha Channel and connect it to the alpha fragment so we can have transparency so it renders the black spots as transparent here we go now that's getting closer to the Su wall to the wind wall to get rid of the art edges we are going to create a mask where the black areas are not going to be rendered let's create a text 2D and call it mask sample this and multiply this with the power down here and replace this connection to the multiply and let's save it now let's go back to VFX graph as you can see you not have a mask I'm going to show you in a moment how to create one but it's going to be something like this and it's going to fade in and Fade Out between the art edges and the texture so let's open up krita I'm going to use krita because it's free you can download it for free and it's easy to use actually and we are going to create a new file with 2048 by 2048 pixels in this empty layer we are going to cheat a little bit so we can quickly create this texture for this tutorial we can paint this layer the wall layer with the bucket White and now we are going to select the brush tool B for shortcut and on the brush presets we are going to use the hair brush soft and then turn on eraser with more or less 600 pixels for the size we are going to delete around our text try to make this as straight as possible I wouldn't recommend this technique but it's very quick to create a mask like this then we can switch the brush to the blender smear and push this up here more or less like this a few times with opacity of around 45 the size of the brush can be bigger than smaller to create these little details and once you are satisfied with this you can export it as a PNG to your project and then use it as your mask here we go it's a very quick technique to create a mask now my values for the noise are 20 the scale and 3 for the noise power so it is a little bit more to be more dissolved and 3.2 and 0 to D4 for the X and Y of the noise styling and minus 0.649 speed in the Y I found these values to be okay for the ASU wall but now what really matters that we add a little bit of color to this the ASU wall has a little bit of blue we are going to use the gradient we are going to sample a gradient and once again we are going to use the age of our lifetime to control the time variable it goes from 0 to 1. and it fades in and Fades out as well which is great and I'm using this gradient right here which as you can see is also faded in and fading out but the first key for the color I'm using these specific values with an intensity of two I found out this color to be great for the wind and for the last key it's the same color but with no intensity great and here we go that's how it turned out this is a great start now our next objective is to create a background for this let's copy this output particle with the gradient and connect it up here it's going to be for a wind Main and down here it's going to be for the wind back it's going to be very subtle let me disconnect the wine Main the wind back a major difference is on the noise scale it's going to be 10 and noise power it's going to be 2. so It Isn't So dissolved we are going to decrease how much it is stretched on the X 1.9 for example but increase on the Y and the color it is way too bright I have this gradient the alpha up here is at 100. and the color is the same but once again no intensity and this is the result if you combine these two together let me reconnect the wind main we get a really nice filling so that's the second layer for the third layer since this is composed of several layers we can once again copy the wine Main drag it to the right connect the gradient as well but this time it's going to be smaller not so tall and it's going to be wider it's going to give a subtle sensation of thickness 0.8 for the Zeal looks really nice and 1.2 for the y in the set scale all right that's the third layer and now we really need to give the Sensation that this is on the scene so I'm going to create a fake Shadow for this the idea is to copy this entire system call it the ground Shadow delete all of these outputs because we are going to need a quad output particle quad by the way let me turn off the alto so it doesn't keep on compiling so it becomes faster to work with VFX graph the output particle quad we are going to need the set size set to 1. in a set scale the set color and a set color over life to fade this out set scale below the set size and set color of a life below the set color with the composition set to multiply as well as the alpha composition the call is going to be black oh and we need a set Alpha to control the transparency by the way around 0.5 0.4 the idea is to stretch this a lot on the X so it follows along with the yasu wall value of 8 for example we are going to select this default particle that comes with unity set size to 1 don't forget velocity is okay we also want this to follow along and we can compile its LEDs yeah exactly like this it's following along the wall it's a nice little touch that's how I created the detail the ornament on the ground for the yasu that yellow ornament one of the final things I'm going to show you is another layer to the wall we can copy this entire system the wind Main and it's going to be for the initial small wind once again I'm going to turn off the alto so it doesn't keep on compiling the trick here is going to be much smaller in terms of length but taller and Z it's going to be random between 0.8 and 1.2 speed faster 0.7 minus 0.7 and random for the X of the noise tiling between 0.4 and 0.9 very small stretch by the way don't forget to turn off the constant on these random numbers turn it off lastly we can also use a random number between 18 and 22 for the noise scale you can randomize this a lot and that's the idea with these small winds and now it's very important that we push this key to the right and clip a little bit in the beginning we don't want this to be visible at the start only after a few milliseconds it's going to be much faster because it's going to have a much shorter lifetime then for the speed multiply but lifetime random between 0.9 and 1.1 and and we are going to have five of this in the single burst you can five yeah and if we compile this oh and I'm forgetting one thing we need to offset them in the X so they spawn randomly in the X along the wall so let's use a set position [Music] and we are going to use a random number between -2 and 2. turn off the constant and connect to the x of the set position in the initialized particle if you compile this we get a really nice wall now now we are having a lot a lot more depth to this more detail to the yasu wall you can increase the intensity of the color by the way the gradient of the first key alright looking very good this is a really nice touch and well I hope this is a great start for you I obviously added a few more things but that takes much more time like the detail on the ground like Sparks in the beginning the flared flash flare the ground's car the ground crack you know if you want to know more about this I highly recommend to check out my channel there's plenty of tutorials and my courses as well on udemy or you can go ahead and support me via patreon and get access to this project and many other projects as well visual effects that you can study up close or use them in your game it's an awesome library of visual effects I want to say thank you to each Patron that supported me last month and as usual a quick shout out goes to the Top Tire patrons which are 3D sorcery Alexander brazy alparaichi Achilles Benitez Javier to Bali Ruby cyber cradle Daniel Schmidt diaku Jack marks deutra effect yellow El Sharif thanks Striker Geo glitch Goods Goblin plague Casey Miller Lee and old lutuli Mark annum Michael again Michael lay Naru that seems oh it's pradips and radioactive bullfrog raichan Revenant games drunk fan very Suitor real who's Will polio down and Chiang Pion Ling thank you all for your amazing support you guys rock and keep this channel going hope you have enjoyed this video to anyone watch this I hope to see you on the next one and thanks for watching bye [Music]

Channel: Gabriel Aguiar Prod.

Views: 15,979

Keywords: Unity tutorial, vfx, vfx graph, vfx graph tutorial, unity, visual effect graph, unity visual effect graph, unity vfx graph, unity visual effect, tutorial, shader, shader graph, unity shader graph, unity shader, fx, graph, visual effect graph unity, slash effect, unity tutorial, slash attack, league of legends, LoL, fan art, unity league of legends, wind tutorial, unity wind, wind, wind effect, vfx graph wind, shader graph wind, unity wind effect, yasuo, wind wall, unity yasuo

Id: TJdtV8ZaDSM

Length: 21min 3sec (1263 seconds)

Published: Tue Jan 24 2023