Unity VFX Graph - Dragon Fire Breath Tutorial

welcome back to gabriella gabrod and this time my patrons voted for something related to dragons what could it be and as you have probably guessed by now we are going to see how to create a dragon breath so yeah i think it came out really nice for this version i actually used two shaders and a few textures we are going to see a simplified one but if you want to get access to the original effect to this project and many many others you can do it in my patreon page it's all available there links below so unity today is sponsoring this video and i got something amazing for your new year's resolution if you want to become a game designer you have to check this out this is an ebook made by unity on how to create games on how to design them properly there's so many good information in here that everyone who is creating a game should check this out i left the link below it's free you simply need to fill this out and you will get the book and i'm sure you will learn something new so make sure to check the link below to learn some tips and tricks about game design for free by unity right so in my scene i have the dragon and the dragon breath and i got the dragon from the asset store which is free by the way and to create this version i actually used these two shaders from the stylized trails and the stylized fire tutorials that's why it came out like this you can actually get the same result if you do both of those tutorials and combine it with what you will learn here today okay so let's get started as a good rule of thumb let's create an empty game object in our scene and rename it reset the transform and in this case i'm gonna place it right here in front of my dragon more or less near the mouth then we can go ahead and in a folder with right click we can create a new visual effect graph you can rename it and then parent this to the empty we created make sure to reset transform just and if we're pressing the edit button we can open visual effect graph i'm gonna duck it more or less around here and well the idea now is that we shoot one particle and it leaves a trail behind so let's do exactly that since we only need one particle we can replace this constant spawn rate with a single burst of one particle and as you can see it's going everywhere we need velocity but not here in the initialized particle so let's remove it and for the set lifetime we can turn off the randomness and say it's two seconds and a half for the motion we can use the update particle because we want this to slow down towards the end if i set z to 1 it keeps on going on forever until the end of its lifetime and we don't want that we want to control it with a sample curve and it's useful to create an animation curve property to control it in the inspector we can rename it to fire trail motion for example and this curve is extremely important to get the right feeling of this dragon breath for now i'm going to push the last key to more or less 0.3 and 0.13 for the value and we are going to fix it in a moment and improve it for now let's connect it right here and for the time well we can use the edge of the particle which goes from 0 to 2.5 but this block translates it to be between 0 and 1. and to have a better control of this motion we can use the float and multiply it with a simple curve let's create a fire trail speed we can say it's 13 for now multiply this and connect it to the z value of the set velocity and what will happen is that towards the end as you can see it's slowing down the particle and that is great we are going to adjust the curve a little bit later for now we want to emit the trail and in order for that to happen we need to trigger an event in this case rate based on rate over time continuously we could push a line from here and construct the wall particle system but there's a simpler way if we press spacebar and search for trail you will find the simple adds and trails particle system which is a very good start we actually don't need this left side so let's remove it let's move this a little bit closer let's create a connection from the trigger event to the gpu event up here and as soon as we do it we get one trail in fact that's going to be our fire breath where we are going to apply our shade let's just adjust a few things for example the lifetime can be 1.5 and we don't need turbulence in the update particle strip down here let's use the set size with a value of 1.5 1.6 for now we will see and for the set size of our life we want this curve from big to small oh and we need to set it to multiply in the composition by the way otherwise it will overwrite the previous set size block cool if you look closely it isn't smooth but it's very simple to fix it we simply need to increase this rate in the trigger event to 30 for example and now we will have a smoother trail cool right and that's it for the first part in visual effect graph now comes the part where we need to create a shader for this something that looks like a fire trail so with right click in a folder let's go ahead and create a blank shadow graph i'm going to rename it to dragon breath shader and double click to open it up in here make sure you have the graph inspector window because for the active targets we are going to add visual effects only and that's it now we can start by adding two color properties so we can create a gradient and then a texture 2d for the main text for the first color we can say it's in hdr mode you can actually already select a yellow color and increase the alpha and for the color zero two you could actually already select a reddish color just make sure you increase the alpha to 100 and set the mode to hdr now the way this works is with a lerp node you can press spacebar and search for one connect the connect the first color to the a option and the second color to the b option yeah in my case i'm going to select now orange for the first color and then something more long red for the second color but we need something to influence the t input of the lerp and in this case we can use a uv node if we split this we get access to the rgba and r and g are a gradient you can use the preview for the r and as you can see it goes from black to white and b goes so if we connect the r channel to our t we get a gradient that goes from yellow to orange in this case which is super useful now we can pick this up and multiply it with our main texture which means basically any text that we assign here will have this gradient for now i'm going to select a trail that i already have made but i'm going to show you in a moment how to create one as well you can select the default part on your case so yeah looking good now let's take this moment to animate this trail to scroll it the way we do it is by using a tiling and offset node the offset part will scroll it can connect it to the uv of the sample texture and now we can go ahead and create two vector twos one for the main text styling and the other for the main text speed the tiling must be 1 1 and connect to the tiling input and for the speed as you can see the offset scrolls this but we need the time variable if we multiply this with our vector 2 main text speed like this and then connect to the offset now we are able indeed to scroll this for example minus 0.5 and x as you can see and that's going to be super useful let's connect this last multiply node to the base color and save this shader and then go back to vfx graph so we can see how this works with our trail we don't need this output particle quad down here delete it and then we can assign to our output particle strip the shader we created if you don't see this shadow graph option make sure you go to preference and invisible effects you turn on experimental operators all right so yeah this is what we have very simple very basic for now i'm gonna adjust the first color and increase the intensity you can copy these values if you want and for the second color i'm also going to use red but increase the intensity okay something like this and now it's a good time to adjust the animation curve the fire trail motion curve so let's open it up and the idea is that first key goes to 1 and the last key should be around 0.36 for the time and 0.16 for the value and then adjust the handles like this this is a good motion you can try other motions of course and it will look better if we set the blend mode to alpha yeah we get all of this black around our particle because we haven't fixed the alpha we'll fix it in a moment for now let's quickly create a stylized trail for this so i'm going to use crit and i'm going to create a new file with 2048 by 2048 pixels make sure the background is black and that we have an empty layer and if you press shift double v you enter in wrap mode basically you can create seamless textures with this which is awesome so with the brush tool i'm going to go ahead and select this one and with a brush of more or less 800 pixels i'm gonna create something like this in one go then you can select this brush right here press this little icon so we can edit this brush and decrease the fade to zero then we can press e to select the eraser and with an opacity of around thirty percent forty percent with one go you can remove a little bit from here then from here and then decrease the brush size you cannot shift to decrease the brush size by the way remove from here and then from up here you can add a little touch now make some holes in these and that's it now press shift w again to get out of the wrap mode and then you can save this export as a png to your unity project in the main texture we can assign the trail we created and here we go if we set the main text speed we get a really cool effect set it to minus set it to minus 1.5 for example yeah it looks very nice let's do a few more things you can also adjust the main text styling by the way i'm going to leave it at one for now okay so let's get rid of that black it's very simple this last node we can connect to the alpha in this case and press save asset and here we go we no longer have the black background but let's do something more let's make sure that we can dissolve this and if we multiply the main texture with the voronoi node we can do it first let's connect the voronoi to a power node as you can see it dissolves the voronoi which is useful by the way let's create a float for the dissolve scale with a default value of 3 for now and we also need this to move so once again a tiling and offset node is required and a time node as well multiply it with a vector 2 which is for the dissolve speed in this case so down here if you connect the power to the multiply as you can see now it dissolves our texture finally let's just create a dissolve float with a default value of 2. and it will look better if we dissolve only the end of our text so once again with the uv node we can extract the gradient from the r channel and multiply it with the power node but in this case we want the opposite of the graded so let's use the one minus note connect up here to the multiply and then you can save this in the save asset button and that's it we have now a beautiful fire breath let's make a few adjustments to our vfx graph and add some flames as well as you can see this is leaving it on forever it should stop once it gets thinner we simply need to stop the trigger event on rate to fire up and the way we do it is by comparing the values that come out of this sample curve we can say that if the sample curve is greater or equal to the lowest value of the curve which is this last key down here for example in my case 0.164 that's what i'm going to use down here 0.165 for example so then we can use a branch and say that well if it's true if it's greater or equal in this value then keep on firing the trigger event on right but if it's slower then it's going to be false it's going to be zero and it's not going to spawn the trigger event on rate right all right so let's make some adjustments to our shader to our fire breath let's increase the tiling to 1.5 and the main tag speed something like -4 so it goes really fast much more aggressive for a dragon right you can also say the dissolve scale is 5 and set the default speed to -2 for example and dissolve power to 2.5 i'm just going to go ahead and for the color 002 i'm going to increase the density to almost 10 and set the u to 7 and now we have a very beautiful color going on fantastic with what we have you can also create some quick flames for example we can copy this part right here ctrl c ctrl v and instead of a single burst we want a constant spawn rate of something like 32 particles oh and let's create an output particle quad down here so we can see something right as you can see it keeps on spawning particles we can fix it by selecting the spawner up here you can say the loop duration is constant as well as the loop count and for the loop duration we can say it's 1.7 let's increase the capacity to 250 for example the lifetime you can make it random between 1 and 1.5 seconds let's add randomness to the rotation random yes between 360 and minus 360 in the z we don't need this trigger event let's remove these nodes and the trigger event as well what we need is down here we can play with this now and say we want this to be rvn towards the camera so it faces the camera we want to control the size random yes between 1.5 and 3.5 these default particles are huge we are going to fix it now let's add a set size of our life and for the curve we want this to go from small to big but we want to push the first key up below 0.5 we need to set this to multiply otherwise it will overwrite any previous value all right looking good look at this just kidding let's assign our shader that we created and let's change the main texture to the default part that comes with unity it would be better if you could create a flame text so like when i have here something nicer check out my channel for more by the way and now we need to control the color of this we are going to use a gradient a sample gradient the time requires the age of the particle age of our life for the gradient we can say that the first key is almost red you can copy my values by the way increase the intensity to 2 8 9 something crazy push this key around here and for the color i'm going to select orange something like this but density is lower like two then connect this to color zero one and color zero two and here we go really if you can create a texture for this go ahead oh and by the way let's delete this fire trail speed and set it to 20 so it goes faster okay let's play with dissolve this is very kind of a pack a simple curve will do because it will allow us to animate it once again age over lifetime to control the time of the sample curve the first key right click he did and we can say it's around 6.5 second key around 4 for the value and for the last key something like 11 should be fine to dissolve and for the last key something like 12 should be fine to dissolve everything you can press a to see the wall curve and we want to fix these bezier curves like this and we are good to go connect to the soft power by the way and yeah it dissolves towards the end which is nice that's what we need now let's feed random values to the dissolve scale we can use a random number for that between two and seven that's very nice for what we have here with one shader and one texture right let's add some fire near the mouth of our dragon we can copy this ctrl c ctrl v up here loop duration 1.5 16 for the constant spawn rate instead and a shorter lifetime between 0.5 and 1. we don't need set velocity it's going to be static near the mouth what we need is to actually it we can set position and set it to 0.5 in z nice we can increase down here dissolve scale to something like 3 and 9 and size could be 1 and 3 and here we go we have fire near the mouth with one shader and one particle i obviously use two shaders for this and different texture as well which i highly recommend you to check out my channel to learn more about this but that's what i can show you today with the time we have this project is available on my patreon page if you want to learn more about it it's there you support the channel and you get access to a bunch of effects that you can use for your games which is awesome to my patrons i want to say a big thank you to which one of you and as usual a quick shout out to the top tier patrons which are awesome and they are elac frost croopy dooby doo derek benson donald thompson edward shy eric hudson goblin plug guy rappaport leonardo ferraz little tsai lobster posey maxim mograph tech nazims oitzke radioactive bullfrog revenant games stefan zarkov try it out very soother william morris sonnenchin and ingudaz your sport is super much appreciated guys and it keeps me going to everyone watch this i hope you have enjoyed this video and i really hope to see you in the next one please like and subscribe so you don't miss anything and that's it guys i hope you have learned something new so thanks and bye [Music] you

Channel: Gabriel Aguiar Prod.

Views: 30,844

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 ray, Fire, unity dragon, dragon, dragon breath, fire breath, breath, unity dragon breath, dragon breath tutorial, dragon breath vfx, vfx graph fire, unity fire breath, fire tutorial, dragon attack

Id: cZRp8Jr1xx0

Length: 19min 10sec (1150 seconds)

Published: Tue Jan 11 2022