Unity VFX Graph - Stylized Laser Beam Tutorial

so what is going on guys and once again we are going to see something amazing and this time is how to create a stylized beam and i think it turned out great and this could fit very well in a mage of some sort we are going to see a simplified version of this because the original one has a few more elements that could take some time to explain i tried my best to explain you how to do it so i hope you enjoy it and a big shout out to my patrons for making these videos possible if you also want to support this channel you will get access to this project and many others as well that you can use in your games i left a link in the description so with that being said let's jump right into it [Music] so let's start with an empty game object we can rename it to vfx on the score stylized beam i'm going to reset the transform and push it a little bit up in the y so it doesn't intersect with the ground and then with right click in a folder i'm going to create a visual effect graph i'm going to rename it vfx graph and score stylized beam and parent these to the empty wizard transform just in case press the edit button to open vfx graph we want to start with only one particle so constant spell rate can go away to give space to a single burst with one for the count we don't want to output a quad we want to use the mesh instead by default we have the capsule it's fine for now we are going to replace it let's just increase the size with a set size and say it's 3. oh and it doesn't need to move remove the velocity up here and we can already add a set angle in case we need to rotate it oh and lifetime can be constant turn off random 3 seconds in fact this is going to be the duration of the wall effect so in the blackboard we can create a float property and call it duration with a value of 3 and connect it to the set lifetime that's the initial setup for the stylized beam now within the mesh and i'm going to use blender version 3 we need a plane so i'm going to select everything with a delete it and with shift a add a plane i'm going to scale it with s lock it in the y insert 2 for the value down here i'm going to drag a new window so you can see the uv editor because if we select these two points right here they shouldn't be at the bottom they should be on the left side so press r rotate 90 degrees and make sure the left side of the uvs matches the left side of the object and with these two vertices selected we are going to press shift s to say cursor to selected let's get out of edit mode by pressing tab and with shift ctrl alt c we are going to say cursor to 3d cursor and this will be useful so whenever we want to scale the stylized beam it grows like this and that's it we have the mesh we need i'm going to rename this to plane 0 2 because i already have one in my project and with the plane selected i'm going to go to file and in export i'm going to go to fbx turn on selected objects rename this plane 0 2 export and now in unity you can select a plane 0 2 and set the scale factor to 100 and then press apply and assign the plane to the output particle mesh and if we press play maybe we don't have anything because if we select the output particle mesh in the inspector the call mode should be off so we can see both faces of this plane now we see something huge and as you can see if we rotate this it doesn't face the camera and we can fix it with an orient block set to fixed axis the axis we want to fix is the z zero for the x and y and one for the z and as you can see now it follows the camera properly and it's fixed on the z-axis another thing we can do is set the scale to be something like 0.4 and 2 so it gets stretched and since we have set the pivot to be in the beginning of the mesh now we can animate this properly with a set scale over life the z is going to be one always we are not going to change the y is going to control the length this is important we want to select this first curve add a key more or less around here around 0.1 and push the first key all the way down to zero and the x is going to control the thickness the white so we can select the line add another key in the beginning push the first key all the way down and more or less at around 0.9 we can add another key and push the last key all the way down as well so it shrinks towards the end of the lifetime and we need to set the set scale block the composition we need to set it to multiply otherwise it will overwrite any previous value and if we test this out as you can see it grows the length and the wide as well and then it shrinks nice so at this point we have the basis and the motion done now we need the artistic side of this we need to create a text i'm going to use crete we can start by creating a new file 2048 by 2048 completely square it could be a rectangle as well and the idea now is to select the brush tool b shot cut make sure it's white and the preset brush is this one we are going to use opacity 100 size 600 pixels another trick is to press shift w so we enter in wrap mode and this allows us to create seamless textures which is awesome so with one stroke i'm going to create something like this and by pressing shift w you can enable and disable the wrap mode by the way but still in wrap mode now we are going to use the erase tool decrease the opacity to around 40 and decrease the size to around 250 pixels and with one stroke we are going to erase what's inside of this line and then erase a bit here and there in the inside and erase as well on the outside you can also go to the brush and use this one it's basically the smudge tool decrease the opacity to 40 and in the brush editor you can say the fade is zero so it's completely faded and then you can push some parts of your texture which is awesome once you have something that you like in my case i'm going to erase a little bit more but once you think it's finished you can turn off wrap mode make sure it's centered by the way with ctrl t and then you can turn off the black background the layer and export this as a png to your unity project right so once you go back to unity now you can select the texture and turn on alpha's transparency and press apply and then assign this to the main texture of our stylus beam and once you try it out this is what you get we have the motion we have a texture now we can go even further and with the shader we can animate this scroll and distort i'm going to be brief but you can watch more tutorials on my channel to learn more about shaders so with right click i'm going to go to shadow graph and create a blank shader graph i'm going to rename to laser shader tooth double click to open it up first thing we want to do is in the graph inspector we want to say that the target is visual effect it's going to be unlit and we can turn on alpha clipping we are going to need a color property which is going to be in hdr mode white full opacity and we are going to need a text for a mask and another texture for the main texture which is the one we created in krita and then a vector 2 for the main text speed the main text we need to sample it first any texture needs to be sampled i'm going to assign the text we created don't worry about being black and white here in shadowgraph and then we can multiply these with the mask texture we need to sample it as well i'm going to select one of these masks but i'm going to show you in a moment how to create one the idea now is that we multiply these two together so the beginning and the end of the laser is faded that's important and in the end we want to multiply this with the color and then connect to the base color of the fragment function and let's go ahead and take care of the scroll of the main texture with the tiling and offset node the offset we can connect this to the uv the offset as you can see enables us to scroll this and since we need to animate this we need a time node multiply it with the main text speed the vector 2 we created earlier you can connect it to the offset and if you increase the main text speed the x to one as you can see it's scrolling this is a nice first draft let's save this shader and go back to vfx graph and now we have this input right here if you don't see it make sure you go to preference in edit and invisible effects which are non experimental operator slash blocks now we can assign the shader we created and oh yeah this is normal because we need to take care of the alpha of the transparency so back to the shader before multiplying with color we want to split this multiply and the a is the alpha we want to connect it to the alpha input of the fragment oh let's already create a float for the alpha clip this one is going to be a slider between 0 and 1 it will allow us to dissolve the texture let's save this and now in vfx graph besides scrolling the opposite direction okay so let's see how to create a mask first let's just change the blend mode to additive so back to crit we can create a new file 512 by 512 is enough and the idea is to use the gradient tool this one and a half here we want to select the second slot the one that says foreground to transparent want to press the edit button in my case it's already done but basically the first key it's going to be with no opacity the second key is at 100 opacity third key is around 60 of opacity and the last key is at zero opacity you can press ok and now go up here you need to make this straight so we are going to go from corner to corner press alt drag and release and here we go we have a gradient and we are going to export two versions one with the black background export it as a png and the other without the black background exactly like this one is to work with alpha mode and the other to work with additive blend mode if you want to learn more about these make sure to check out my channels and the courses i have on udemy they will certainly help you a lot to understand shaders and a lot of things as well okay so once we go back to unity we can assign the mask we created i'm going to assign the one with the black background and as you can see it fades the beginning and the end which is awesome i'm going to make it scroll faster minus 2 and select an orange bright orange increase the intensity to 3 looks good let's just make one final change to the shader a distortion effect will look great on this so back here let's add a lerp node as you can see the t value will blend between a and b in this case between dark and white which means for the a option we want to use the uv node it represents no distortion and for the second option the b we want a completely distorted effect and we can do it with a simple noise we can set the scale to 30 for now and connect to the b we are also going to need to scroll this so once again we are going to need a tiling and offset nodes and then a time a multiply node and a vector 2 in this case we can call it the distortion speed connect this to the offset and tiling and offset to the uv of the simple noise and for the t option we can create a float and call it the distortion amount which is going to be between 0 and 1. we can connect it to the t input of the lerp and one last float that we can add is a distortion scale connected to the simple noise default value of 30 by the way and we can connect this linear interpolation node to the uv of the tiling and offset and you may not necessarily see the change right now because we need to increase the distortion amount but once you do it you can clearly see that we are animating the stylizer trail great so now let's set the distortion speed to -3 which is faster than the main tech speed and it will give a really nice sensation a really nice distortion on the stylized beam we can add a few more elements for example we can copy this ctrl c ctrl v this is going to be for the electric beam and with the elements that we already have it's very simple for example we can switch the color to a blue and then increase the alpha clip which will erode the texture and then increase the distortion amount to 0.20.3 that should give a really nice feeling and my values may not fit your texture so it's really up to you to test and see what will look better alright so as you can see it was super easy to create an electric feeling one of the final elements that we can add to the beam is a dark background so we can copy now the beam car with ctrl c ctrl v again and this one is going to be for the beam dark and the main difference here is that the blend mode is going to be in alpha so we can rent darker colors and the color is going to be a dark red really dark and then we can increase the set scale to something like 0.6 for example and we have two problems right now first one is that we see the black of the mask in the extremities it's easily fixed by switching our mask with the transparent one that we exported earlier in krita and the second problem is that it's being rendered in front of everything and we actually don't want that if we select our vfx graph in the inspector we can push the beam dark all the way to the beginning so it's the first one being rendered and then everything else will be rendered on top what i'm going to do now is decrease the beam car wide as well as the electric beam to 0.4 you see it's an adjustment of values to balance everything nicely so they have a good proportion between each other and that comes up with a little bit of trial and error now since all of this is the same up here you can connect all of these output particles to one of these update particles like this great one of the last things that i can show you is how to add stretched particles to this we want to go ahead and start with a simple particle system you can press spacebar and search for one and the first thing we can do is set the duration of this particle system so if we select the spawn in the inspector we can say the loop count is going to be constant as well as the loop duration and for the duration i'm gonna pick this variable and subtract a very small percentage of the original value and we can set the constant spawn rate to 40. it is advised to also increase the capacity but what really matters for these stretched particles is to say the velocity of the z-axis is going to be between 20 and 40 for example and the rest is going to be between 0.5 and minus 0.5 something short for the lifetime 0.2 0.45 and then we can say this bound in a circular shape so let's use a set position arc circle and decrease the radius to 0.5 that should be enough let's take care of the aspect down here and set the blend mode to additive and the main text to the default particle that comes with unity it's quite useful and then you want this to be a long velocity we don't see any changes because i've turned off alto i will compile it in a moment let's just say we want the set size random between 0.7 and 1.2 now i'm going to compile and yeah we need to stretch them we already have the long velocity orient block now we simply need to use a set scale we can say it's 0.05 for the x and one for the y oh and for the set size of our life we need to change the composition to multiply and use this curve from big to small to add color we can use a set color an orange with brightness of tree and then disable the set color of a life we already have the size of our life that is shrinking the particles we don't need to fade them and if we compile these as you can see we get we get a really nice set of particles of sparks flying at high velocity along the beam and that adds a nice touch of motion looking very good very interesting one last thing we can quickly see is how to add a flash in the beginning once again with a simple particle system you can say the main text is default particle blend mode to additive so it becomes bright and turn on use soft part so it becomes soft whenever it touches some geometry set size random between 2.5 and 5 and then use this curve from big to small again and set the composition to multiply we don't need velocity we just need this to have a super short lifetime like 0.1 and 0.2 increase the capacity and in the spawn say the loop duration and loop count is constant so we can connect this duration variable up here and oh and we can add color of course an orange a bright orange set color over life to multiply and here we go we have some flashes at the beginning of our laser beam which really adds a nice touch obviously from now on you can add more elements on top of what we already have i think this is a good basis for you to develop from here i obviously went a few extra steps and spent a few more hours to reach to this point all of these laser beams are available on my patreon page and you will obviously get access to many many more assets that you can use i want to take this moment to thank each patron for supporting the channel and as usual a quick shout out goes to the top tier patrons which are adrian biedriski elect frost albert wagner austin schneider crooby dubedu derek benson donald thompson edward chai eric edson goblin plaque guillerme trindad joe's game show johan ashtram john nix casey milor leonardo ferraz levinw little tsai loves to pose maxine mograph tech nazims otzk radioactive bullfrog revenant games ciao sharat ravi shanka sungyap joe very suit vladiakubiski and william morris your sport is super much appreciated guys and to anyone watch this i hope you have enjoyed please like subscribe and i hope to see you in the next video thanks bye [Music] you

Channel: Gabriel Aguiar Prod.

Views: 76,259

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, unity fire, fire, unity tutorial, Fire, unity laser, unity stylized, stylized, unity electric, stylized laser, stylized beam, laser beam, laser, beam, unity beam, unity electricity, unity laser tutorial, laser tutorial, vfx graph laser

Id: _SaBXY-Ejqo

Length: 20min 27sec (1227 seconds)

Published: Tue Feb 08 2022