Unity VFX Graph - Kassadin Slash Effect Tutorial

today we are going to see how to create the cassadin Slash [Music] hi I'm Gabriel Aguirre currently developing rabbit's tail links below for more and I wanted to recreate this effect for quite some time now and today I'm gonna show you how to achieve a simplified version of the castle in he ability also known as the force pulse from League of Legends there's some very interesting tricks here that we are going to see so let's jump right into this oh and if you want to get this project it's all available on my patrons page where there is many more assets for you to study up close or use them in your games links below and I'm gonna show you how to build the mesh from scratch we are going to use blender because it's free and the first thing we want to do is Select everything with a and press delete we want to clean scene then we can add with shift a cylinder on this left bottom panel you can control the vertices and most importantly the cap fill type we want to set it to nothing we basically only want a ring let's enter an edit mode with tab select everything with a press R to rotate lock it in the y-axis rotate it 90 degrees and press enter then we are going to drag a new window from this left bottom corner we are going to switch this to UV editor it's really important we get the UVS right for this to work out up here I'm going to turn on uvsync selection and on UV enable constraint to image bounds let's press Z to see true and then go to the right orthographic view by pressing 3 on the numpad and we want to select the right side as you can see in our UV editor we have selected the extremities of the UVS we are only going to use the stripes on the middle we are going to delete this right side select everything and rotate it in the z-axis 180 degrees now with s I'm going to lock it into Y and I'm going to scale this up just like this and once again with s scale it down in the Z axis all right let's scale this up and the x-axis only let's increase the wide exactly and now let's fix the UVS by the way it's very simple press s lock it in the X and scale this up but as you can see the right side represents the bottom of our mesh and the left side the top of our mesh what I'm going to do in the UV editor press Ctrl Tab and select faces I'm going to select the bottom part I'm going to press G lock it in the X and push it all the way to the left and then with r we are going to rotate this 180 degrees what we are doing is create a mirror of the UVS the top and the bottom part will be the same now let's select everything with a move it with G on the x axis the value of 0.25 so it's centered all we gotta do is press s to scale it in the X only all the way until it touches the extremities and the text in the shade we are going to create are going to work from the top to the bottom top being most visible and bottom less visible so I'm going to select everything with a and rotate it minus 90 degrees as you can see it goes from the top to the bottom once we select each face exactly like this looking good this is extremely important otherwise the effect won't work the UVS are helping us map the texture properly to this mesh if you are developing for mobile be careful with this next step we are going to use Ctrl R to add three Edge Loops scroll up press enter so they stay in right position and then Escape and I'm going to switch the selection with Ctrl tab to vertex select this bottom vertices and if we scale this we are not influencing the other vertices around what we can do is turn on proportional editing up here we have here a few graphs on how it's going to influence the vertices around and we can select the sharp graph and once we press s you can scale up or down to control the influence the idea is to lock it in the X by the way shrink this so it's thinner at the bottom and it's going to be larger in the front that's what we are trying to do here now we are going to select these three vertices in the front press G and move it into y only but we need to switch the graph of the proportional editing to a sphere and move it in the Y with g maybe less influence all right looking good I'm going to select the three vertices on the left and the three vertices on the right in the front and scale them only in the X so it becomes wider in the front as you can see control the influence by scrolling up or down I'm actually going to use the sharp graph up here all right looking good maybe increase a little bit and that's pretty much it obviously you can play a little bit more but we have reached a nice point with our mesh so we are going to move on we are going to smooth this as you can see We Have Faces here I'm going to press spacebar and search for shade smooth you can go to object and right here you have Shades mode as well and yeah I'm gonna scale this a little bit down but that's essentially it now we can rename this I'm going to call it the cassadine zero two and then we are going to increase the poly count with the modifier called subdivision surface set the render to one be careful if you are on mobile by the way because we are increasing the faces once you have a shifted shape similar to this one we can go ahead and before exporting we need to press Ctrl a to apply the rotation and scale then we can go to file and export fbx I'm gonna export directly to my Unity project and turn on selected objects so it exports only the Slash alright looking good and if we go back to Unity now in our mesh I'm gonna say that the scale factor is 100. that's one step down and it was the nard one because this mesh is a little bit more complex now let's go ahead and create a VFX graph so we can use the mesh however we want rename it to VFX graph and the score cast in slash for example and drag and drop it to your scene and press the edit button to enter VFX graph I'm going to dock it right here and well the first thing we want to do is we don't want to constantly spawn casting slashes right we just want a single burst with one particle each time we play this right and on here we don't want to put a particle we want to Output the mesh we created so output particle mesh exactly now in here we are able to assign the mesh we created like this cool let's control the size with the set size I'm going to set it to 1 and press play and it's huge and vertical alright so at this point I'm going to turn on shaded wireframe so I can see the orientation of this mesh all right I need to rotate it in the X we are going to do it in a moment for now let's say that lifetime is going to be constant one second for the lifetime is enough and remove the set velocity we are going to create the motion a different way you will see in a moment for now let's use a set angle and rotate this minus 90 degrees in the X as you can see our particle system our VFX graph is right here but our mesh should be starting as well right here what's happening is the pivot point we need to push it all the way back it's very simple all we gotta do is Select make sure you don't have anything selected and then select these four vertices press Ctrl s while you are in edit mode and select cursor to select it let's get out of the edit mode by pressing tab again now with Ctrl shift alt C we are going to say origin to 3D cursor if this shortcut does nothing to you you can go up here to object and you have set origin right here all right and then we can export this fbx once again replace the existing mesh you have in your project and here we go the mesh now starts at the right position that's where we want this mesh to be all right so I'm going to switch this back to shaded and now let's take care of the motion by the way you can control the scale down here in case you want this to be thinner or in case you want to stretch this you can still adjust it in unity without opening blender the way we control the motion now is with a set scale over life where each Curve will control different axes in this case the Z is how tall it is let's start by selecting the default line copy and paste it to the X and Y and for example the X will control the White and the Y it will control how long it is let's start with that and let's select the diagonal line but we want this to happen much faster on the last key let's press with right click and select edit key and the time it's going to be 0.2 but the value is going to be something like 0.95 it's not going to grow entirely and until it reaches the maximum size let's add another key and say the value is 1 and the time one we don't want this curvature so on the second key right click and clamp it auto exactly it grows fast and then it keeps growing a little bit until it reaches its maximum size let's copy this curve and paste to the scale X and here we go we have taken care of the scale you can obviously test different curves and different motions I highly recommend you to do so because you will learn a lot and now for the motion we are going to use the plate particle section at the set velocity over life once again each curve controls a different axis and for the X we can start with the line but it cannot be one otherwise it will move in the X a little bit so delete the last key right click on the first key and say the value is zero let's do the same thing for the Y because the Z will control if it goes forward or backward in my specific case it's not facing the Z axis it's facing the opposite direction so for the Z the first key it's going to start at -20 since we want this to move faster the time it's going to be 0.2 and the value 0. all right exactly like this it scales up and it moves forward a little bit that's the motion of the cassadin attack the kassadin slash right so we need to improve statically how it looks and in this specific case we are going to need a texture created in Photoshop or in krita I'm going to use krita because it's free and you can follow along easily so I'm going to create a new file with 2048 by 2048 black background and on this empty layer I'm gonna select brush B for shortcut and then use this airbrush soft with around 600 pixels and I'm gonna press shift W to enter in wrap mode and now we are going to create the curvy line like this and then let's go up here to the brush presets and select the blender smear brush and now we can push this up and down until we have this slasher line you can even use the motion blur if you want after this I'm going to fast forward this because it's a repetitive process where you push some lines up and others down you can also use the hairbrush soft and the raised tool to remove some of these white spots we want a nice balance between gray and white you get the idea of the texture you need and the techniques that I use it just takes a while to get a good text and patience after you have achieved this point don't forget to turn off wrap mode you can hide the black background and Export this as a PNG directly to your Unity project in nudity you can assign this new texture to your VFX graph it's black and white because Alpha's transparency is disabled you can turn it on and apply in the texture settings and here we go we are starting to see something a little bit closer to the castle in slash I'm going to turn on shaded wireframe so you can see that we need to scroll this from the bottom of our mesh to the top of our mesh to the front right and that's when a Shader becomes super useful so right click in a folder and I'm going to create a you can start with a blank to the graph or an unlit Shadow graph I'm going to rename this to Castleton Shader just because it's a gasoline slash tutorial in here we are going to need a color property it's going to be an HDR mode white Alpha to 100 percent and then we are going to need a texture to D for the main text let's drag and drop it and let's sample this by the way you can already assign the slash you have created and the way we scroll this in this specific case we are going to use a tiling enough set node and that's the only node we need connect to the UV input as you can see the Y will control exactly what we want so let's create a vector 2 and call it the main text offset connect it here oh and let's multiply the sample text to D with the color and connect this to the base color as you can see in the preview by the way it's black and white once again because we are not controlling the transparency in the Shader we need to set up the surface type it's going to be transparent instead of full pack and now the last node we can split it and we have access to the alpha which is the transparency and we can connect it right here to the alpha input of the fragment function if we save this we can use the Shader and VFX graph it doesn't appear here because in the Shader in Shadow graph we only have to turn on support VFX graph and that's it don't forget to save and now you can assign the Shader to VFX graph all right so the way we are going to use this the main text offset it's only the Y we need in this case we are going to start at something like 0.75 for example and go all the way if you look here to the beginning of the mesh all the way to minus 0.6 or something like that but as you can see this keeps on scrolling and scrolling and scrolling in this case of the casting slash we don't want this to scroll so in the wrap mode of the texture instead of repeat we want to say clamp so it doesn't repeat the texture every time you scroll you can apply this change if you scroll up and down in the Y of the main text offset it doesn't repeat anymore that's exactly what we need we want this texture to go from the beginning to the end of our mesh without repeating and the way we do it now is with a sample curve we are going to go from something like 0.75 to minus 0.6 for example so in this curve let's select this diagonal line the first key it's going to be minus 0.75 and the last key it's going to be something like 0.6 0.65 let's see how it goes if you connect this to the Y nothing will happen because the time values at zero we need to animate this time input fortunately we have the age of our lifetime note which goes from 0 to 1 and it represents the lifetime of this mesh which is one second as you can see oh yeah it's animating backwards interesting that's totally fine the first key instead of minor 0.75 it's going to be 0.65 or something like that and the last key it's going to be minus 0.7 we need to switch the values and oh nice looking good look at this we are scrolling the texture perfectly if you want now you can adjust this value so it starts a little bit before the mesh as you can see but that's it we have the main feature of this gasoline slash so let's add some color to this I already have some values in case you want to copy them it's 3.4 for red 1.15 for green and 31 for blue but as you can see this is super intense it doesn't fade in it doesn't Fade Out so what we can do is use a gradient we are going to sample a gradient let's first copy this color on this gradient we are going to paste the color to the last key remove these Keys up here which are for the alpha only if the white one and the black one at the end and first key of the color we can paste the color but decrease the intensity then we can click close to the first key drag a little bit to the right click again close to the second key and drag a little bit to the right and let's test this out let's connect the edge of our lifetime to the time and the gradient to the color and yeah it's very dull for some reason we have copied the color but all right last key needs to be more intense around six oh yeah looking good becomes brighter and brighter that's nice what we are going to do now is a little trick in the Shader if you want to know more about Telegraph make sure to check out my channel there's plenty of tutorials there that will help you out what we are going to do is mix a noise texture with our main texture so it isn't so intense spacebar and search for simple noise scale of 30 40 more less and to this we are going to add a gradient it's going to go from white to black and we can get that gradient from the UV node if we split this the G Shadow represents that grid cool all we gotta do now is multiply this with our main texture before multiplying with the color and replace this connection and we are good to go may not seem like much but but our main texture now looks a little bit less intense and a bit more random it adds a nice text a nice touch there's plenty of tricks you can do last one I'm going to show is we can connect this to a power node and the power node will create a little bit more contrast as you can see and this will in some ways dissolve a little bit our main texture as you can see in the beginning it looks pretty damn dissolved and at the end it becomes bright and we still see the noise so that's it that's pretty much it what we can do now is add some dark tones to this increase the trail it leaves behind for example it's very simple we can go back to VFX graph rename this output to Bright slash copy this name select everything and we right click create a group rename the group to be the same name select the group and with Ctrl C and Ctrl V we are going to duplicate this it's going to be called the dark slash and on this case we need to change the texture to main texture so let's go back to krita and it's very simple let's duplicate this text hide the other one the original one enter in wrap mode with shift W and then with Ctrl T we are going to increase this but be careful to not clip the main texture otherwise it won't look good once it is almost touching the boundaries you want to duplicate this push it below or up we are basically thickening this we need this text to be thicker right just like this always make sure you don't clip your text to it then you can get out of the wrap mode with shift w i the black background and Export this for example as dark slash zero three in my case and as a PNG that's very important and in unity now we can assign this to the dark slash let's turn on Alpha's transparency apply oh yeah we clearly need to set the rep mode to clamp so it doesn't keep on repeating this texture exactly apply okay we don't see dark tones because this credit is way too intense so let's open this up delete last key and the third key of the color push the second key all the way to the end and the first key to more or less around here create another key to the beginning completely black and here we go the dark slash is on top of the right slash we can fix that by selecting the VFX graph in the folder and in the inspector we can say the dark slash is rendered before the bright slash exactly like this okay looking good now we are leaving some dark Trails behind we can increase that effect on the offset curve this one basically we want the dark slash to begin earlier so let's push this first key up to around 1.2 1.3 and the last key let's push it up to around -0.6 for example and here we go looking very good we are leaving some dark Trails behind that's a really nice touch in my opinion you can now play a lot with this for example the lifetime could be shorter you can create a property for these two lifetimes for example and control it in the inspector but something quicker you can achieve it like this for the offset curves you can also make sure that it slows down at the end so we see the bright at the end a little bit longer that's what I did here with this card right here and then I added some particles and if you want to learn more about VFX graph make sure to check out my channel you are going to learn so much more and you are going to be able to recreate these particles for example Plus if we want to get these projects and many others everything is available on my patrons page for a very low fee you can get all of this and study this up close or even use it in your games it's all available there links below and a big thank you goes to each Patron that sparked me last month and as usual a quick shout out to the Top Tire patrons which are 3D sorcery al-shank karval alpera archai Achilles Benitez Ave kainerino silona krubidubidu cyber cradle Daniel Schmidt Dave Game Dev the egg Mark do it wrong effect yellow El Sharif Jill's Walter Goblin plague Trinidad AC Miller Cannon and Salem lucky Campbell Lee and ALT Mark annum Michael again Michael late MOA mortar Naru not Sims or it's pradeepsen radioactive bullfrog ratchet and Revenant games very suit Will Hughes will Palin dung Mount dong and Cheng pyong Ling thank you all for your amazing support to keep this channel going I hope you have enjoyed this video and all the assets on patreon and to anyone watch this I hope to see you on the next video and thanks for watching bye [Music]

Channel: Gabriel Aguiar Prod.

Views: 214,372

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, slash effect, unity fire, fire, vfx graph slash, unity tutorial, sword slash, unity sword slash, slash attack, league of legends, kassadin, LoL, fan art, unity kassadin, unity league of legends

Id: TubAzBsFQYE

Length: 24min 0sec (1440 seconds)

Published: Tue Dec 13 2022