Unity VFX Graph - Sword Slash Tutorial

so what's up guys welcome back to gabriela gabriel remember those slashes you see on melee attacks well that's what we are going to see today how to create a slash effect [Music] by the way guys i got a big announcement today before the tutorial now you can wishlist the game we have been developing for over two years and i'm gonna make a video soon to talk a little bit more about it but for now to find out more you can check out the links below so yeah that should be interesting so this is what we are going to see today slash applied to a swordsman very commonly used across many games and if you want to get your hands on this project it's all available on my patreon's page so without further ado let's jump right into this so we need a 3d mesh and for that i'm going to use blender select everything with a and press delete we want a clean scene and then with shift a we can add a cylinder on this left bottom panel we can control the vertice in case you want place i'm going to leave it at 32 and there's another cool thing here which is the cap fill type we want to set it to we don't want the top and the bottom face of the seller and now with spacebar i'm going to search for shade smooth you can go to object and do it here as well now let's enter in edit mode with tab because we want to add three edge loops with ctrl r you can scroll up to add more edge loops press enter and then escape press a to end select and then while holding shift a we want to select the middle edge loop then we want to turn on proportional editing by pressing o or clicking up here and with s we want to scale this up if you scroll up or down you can control the influence of the proportional editing i'm gonna leave it more or less around here okay looks good and now we can select everything with a press s and lock it in the z axis and you can flatten this until we have this shape cool that's exactly what we need let's rename it to slash mesh for example then go to file and in export select fbx turn on selected objects navigate to your project and export these as an fpx now if you go to unity just make sure you select the mesh slash 02 and set the scale factor to 100 and then press apply cool from here now we can start by creating an empty game object we can rename it vfx and the score slash and then reset transform i'm going to push it a little bit up and in front of this character what's important now is that in a folder we create the vfx graph with right click and rename it to vfx graph and the score slash i'm going to drag and drop this to the empty i just created make sure it's 0 0 0 in the position and then you can press the edit button to enter in vfx graph i'm gonna dock it here and well the first thing we want to do is say that this is going to be an output particle mesh and we can already assign the mesh we created as you can see let's remove the output particle quad and now we need to do a few things for example we don't want this to keep on spawning slashes so let's remove the constant spawn rate and replace it with a burst of only one particle a single burst exactly we also don't put this to move no velocity delete it and lifetime is going to be constant so random is off 0.3 for the lifetime okay very fast as you can see let's control the size down here with the set size set it to 1 for now and select the default particle just to see something yeah this is kinda big and we need to rotate it so in initialize particle we can take care of that with a set angle and if we rotate minus 19 x now it's facing the forward axis and it's parallel to the ground that's great we just need one last thing before going to the shade which is adding rotation to this horizontally it's a slash and we can do it in the update particle it's very simple we can use the add angle the x that will spin this properly is the z axis if we set it to two as you can see it rotates but we want this to slow down towards the end of the lifetime of this slash and it's very simple actually we just need to sample a curve and the way a sample curve works is by well first creating the curve which in this case it's going to be from big to small but not in this way we want to push the angles like this so it's fast in the beginning and then slow towards the end and then it needs the time and in this case we can feed it the edge of our lifetime which is basically the lifetime of the particle and it will animate this curve from zero to one according to the lifetime of the particle and now all we gotta do is multiply this with the velocity of the rotation we want for example 10 connect it to the z if you play this as you can see it's slashing really cool yeah i'm gonna leave it at 10 for now all right so we have everything we need to start creating the shader right just don't forget to save this from time to time and we want to feed the shader to this shadow graph input if you don't see it you can go to edit and in preference in visual effects you can turn on experimental operator blocks right so right click in a folder go to shader graph start with the blank shader graph rename this to slash shader and double click to open it up first thing we want to do is in the graph inspector what's the target well in this case it's going to be for the visual effect graph so visual effect we can leave it as unlit which is not going to be influenced by light and now well to make our life much easier let's use a noise you could also use a texture by the way but with the voronoi we can create very interesting slash as well let's just create a float to control the scale of this voronoi we can cut the voronoi scale 6 by default connect to the cell density and well if we were to connect this directly to the base color save it and assign our shader to the output particle mesh this is how it looks in our slash so basically we need to create a mask for this we just want to show the tip of the slash the one that is facing the forward axis and to create a mask in this case we actually want something radial circular and not a linear gradient the way we can control a circle gradient is by splitting a polar coordinates node the r channel in this case if you connect to a power node as you can see it goes from white to black and black is where we don't see anything so we actually need the opposite of this we can connect the split to a one minus node and as you can see we get the opposite effect it becomes pink because there's probably values below zero or above one so let's clamp this after the one minus between zero and one just like this and as you can see we get a nice radial gradient and this can be multiplied with our voronoi and if you connect this to the base color save it this is how our slash looks really cool right we are already starting to see something with just a few minutes in and that's awesome now let's take care of the color let's create a color property in shadow graph i'm going to set the mode to hdr so we can control the intensity of the color and select white color with 100 for the alpha for the default color this is going to be multiplied after everything to apply it like this connect to the base color and now for the alpha we actually first need to split the color property we get four values and we want to use the alpha one which is the a we want to multiply it with this node and connect it to the alpha input this way we get transparency and we can still use dark colors if we want to have this in alpha blend mode and before testing all of this let's already take care of one thing which is a varna it's very static we can animate it we first need to create a float property you can call it the voronoi speed let's say it has a default value of five for example and the way it works is by multiplying it with the time node and then we can connect this to the angle of set just like this looking good and before testing this out we can already take care of how do we dissolve this varney we can actually use a power node as you can see the b option will basically dissolve this voronoi and in vfx graph we can animate this value if we create a float property well for the voronoi power or voronoi dissolve default value of 2 should be enough alright that's it for the shader so let's save it and let's play with it in vfx graph if we test this out that's what we get it's white barely visible what i'm going to do first is disable the add angle so i can pause this and work on the slash and the first step i'm going to do is take care of the voronoi scale i'm going to increase it to 10 and then choose a bluish color something more or less around here what matters is that you increase the intensity yeah something like this looks very nice as you can see the voronoi power when it's closer to zero it becomes really bright and then if we increase it it dissolves away the varnish and that's useful thing if we animate it and just like we animated the value for the add angle we can do it here too we simply need a sample curve we can select this line and then push the first key to around 0.7 more or less 0.5 so it becomes really bright in the beginning and for the last key with right click we can say something like 25 which will probably dissolve most of the slash now just make sure that the handles are like these so it doesn't dissolve away in the beginning too fast and for the time we can use the edgeover lifetime property just like we did for the add angle and then connect this to voronoi power if we test this out without the add angle this is how it looks now if we turn on the add angle we get a really interesting effect from this so yeah that's how you create the car of a slash with shadowgraph and vfx graph now we can add a few more things for example some dark colors will look very nice with this so let's actually rename this output particle to bright slash let's select and copy everything with ctrl c and paste it here with ctrl v we can rename it to dark slash for example and one of the first steps that we can actually do is decrease the intensity to 0 and then select the black color and in my case i'm going to test this out with 4 for the voronoi scale and 3 for the voronoi speed and i'm gonna make it a little bit smaller so it's inside of the other bright slash like 0.95 should be fine oh and let's not forget to switch the blend mode from additive to alpha this way we can render dark colors and would you look at that you can see a slight dark shadow now the way this works is you can make it even more darker by increasing the by increasing the alpha number value to something like maybe 10 but if you look closely the dark slash is rendered on top of the bright slash the way we fix it is actually by selecting the vfx graph in a folder and now in the inspector we can organize what is rendered first and we want to say that the dark slash is rendered before the bright slash and now we get the wall effect and we get an awesome result you can then obviously adjust the alpha value if you want this dark slash to be more intense or less predominant right looking good alright so at this point i think it's also nice for you to know how to test this out with a character i think it's important to mention that you can scale this down you can rotate this however you want and vfx graph will adapt just fine so with that in mind what you can do is for example go to the attack animation where you want to apply the slash and on that specific moment of action you could for example find the bone that held the sword and attach the slash and reset to transform obviously the scale will be too big so you can scale it down but this is great to get the exact rotation and position for the slash for example now you could unparent the slash and you get the exact position and rotation to match the slash attack with that information for example what i did was to create a list of slash which is a class that i'm going to show you in a moment and every time i press space bar i call it corrupting besides setting the trigger to attack and for every slash on that list i'm going to wait the necessary time and then simply activate the object for example by the way this is the class for the slash and this is a very trivial system i just made it to test things out but you get an idea on how you can test your slash with your character as you can see i have that script attached to the character and assign a tree slashes with different timings obviously you could instantiate those slashes via script or use an object pulling system this way you get an idea on how to use the slash with a character and if you want to get your hands on all of these slashes they are available on my patreon page i left the link below and by supporting me you get access to even more effects that you can use in your games so that's it i want to say thank you to each patron and a quick shout out goes to the top tier patrons which are adrienne biedriski ella frost albert wagner austin schneider kruby dubiedo dieg marks donald thompson edward chai eric edson jill zwalder goblin plaque guillerme trindade john nix casey miller lawrence leonardo ferraz levinw little tsai love supposedly maxim mograph tech nazims ascari taminen poki radioactive bullfrog revenant games sharat ravi shanka toasted butter tyler burns very soot vladia kubiski william morris and in good days your sport is super much appreciated guys so i hope you have enjoyed 21 watch this like and subscribe and i hope to see you in the next video thanks bye

Channel: Gabriel Aguiar Prod.

Views: 126,356

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, unity slash, slash tutorial, unity ground slash, slash effect, unity fire, fire, vfx graph slash, vfx graph ground slash, unity tutorial, slash ray, fire ray, ray, unity ray, Fire, sword slash, unity sword slash, slash attack

Id: Er99e0OOBgc

Length: 16min 17sec (977 seconds)

Published: Tue Mar 08 2022