GODOT VFX - Stylized Fire Effect Tutorial

so welcome back to Gabriella gaprod and today we are going to see some stylized fire in godo [Music] welcome to the first tutorial of visual effects in godo as requested by many people in these last few weeks and the purpose of this video is to show you in a beginner-friendly way how to use the particle system in God and how to use the visual Shader and to make all of these things work together and create this kind of fires it was really fun to explore godo and I just want to say that these videos are possible thanks to my patrons thank you very much for enabling me to give you free tutorials free education links below this project is also there as well as many others and without further Ado let's jump right into this you can see I have already done three versions of these we are more specifically going to create the red one with some smoke with some ambers and some Flames flying around and before we move on I think it's worth mentioning that I have a world environment which is basically post-processing effects mostly a glow so we can have that nice Bloom and some volumetric fog right so let me just hide these Three Fires and we essentially want to start with an empty note so on this plus sign I'm gonna add a node 3D which is going to be the parent of all the particle systems we are going to need it's a good practice I'm gonna press double click or F2 to rename this to VFX underscore fire zero two underscore red and now with right click we can add a child node and in here we can search for particles or GPU we want to start with the GPU particle 3D yes there's also a CPU particle 3D by the way and I was surprised by this I must admit actually so GPU particle 3D we can rename this with F2 it's going to be for a static Flame cool thing about this is that we have These Warnings telling us what's missing for these nodes and essentially there's a mesh missing in the draw passes and we need a material to process the particles it is a little bit confusing at first so for the process material we have this section right here if we open this and by clicking on the empty we see this drop down menu where we can create a particle process material and if you click again on the particle process material you will open up essentially the particle system or a part of it and another thing that was missing was in the draw passes one is enough and if you click here you can assign a mesh and in most particle systems we use a quad as a mesh it comes by default which is used a lot of times to create a billboard and if we move around as you can see now we have everything we need and the particle system starts emitting particles another very important thing is in Geometry The material overwrite which is essentially where we are going to assign our material we are going to get there in a moment and you may be wondering why is this falling down why is this going always down well it's essentially because of this module the gravity module we can set it to zero let's imagine that we want something static we can set this to zero and up here we can control the rate the amount of particles it's going to spawn we can say one one particle is enough for a static Flame and if we open time we can say the lifetime for example is 5 Seconds and now that we have our static quad let's take care of the flame part and we can go down here to the material override and we want to create new Shader material and on Shader which is set to empty we can create a new Shader and in here we can say the type is visual Shader spatial mode and then we can save these I'm going to save this to my shaders folder and I'm going to call it fire Shader tutorial and then press create and here we go cool thing is if you select this fire Shader toot down here you have this Shader editor button which will open this well visual Shader editor if you come from Unity this is essentially Shadow graph if you come from Unreal Engine it's the material editor and it's super useful we have a lot of options in here by default up here we have the vertex function the fragment function and light function let's focus on the fragment one for now and the way we add nodes is with right click and if we start with the most common node which is the text or node we have down here the text 2D parameter we can call it the main text this is going to be for our main text and we only have one output which is to sample this texter if we drag a line from here it suggests that we can create a text to 2D which yes we want indeed and well from now on if you have some experience with with node based shaders It all becomes a little bit more friendly for example you can connect this color to the Albedo and if we drag a line from here we can search for decompose we want to decompose a vector of four because this color outputs four parameters x y z w and we want to connect W which is essentially the transparency to the alpha output this saves automatically by the way which is awesome and in our material override we already have these Shader parameters with our main text ready to receive our text by the way on the description you'll find a link with textures that are made available for you to follow this tutorial so I'm gonna drag and drop this flame01 texture and here we go that's the beginning but if I go up here to the caller and try to change it nothing really happens and that's essentially because this Shader cannot communicate with the color of the particle system fortunately it's a very easy fix if when we add a node we search for color we get this done here input color of the fragment function which essentially gives us access to the color of each vertex and then it's all a matter of multiplying these with texture make sure it's a multiply of vector 4 these this pink one and then replace the connections one to the Albedo and the other one to the vector decompose so the alpha works properly and then if you test the color as you can see it's working alright and I'm going to put here on the rough section values that I have already saved which is 4 for the r the red Channel 1.25 for the green Channel and 0.6 for the blue shadow and we get this red yellow color but if I rotate this around as you can see if I look around this is only a quad facing always the same direction and the way we create a billboard here in godo is actually very interesting in my opinion we don't control that on the Practical system we control that on the Shader in the vertex function you have here down here in the output we have the model view Matrix and if by chance you search for Billboards you will get the billboard Matrix note which is exactly what we need for this you can connect this to the orange output and here we go the static flame follows the camera everywhere it's a billboard but on the scale this doesn't work as you can see because on this git billboard Matrix note we have a keep scale Boolean that we want to turn on this way we can control the scale freely however we want good actually we find it very funny how do we create a billboard in godo for a particle system let's switch back to the fragment function because now let's imagine that we want to make this a little bit less static we want to animate this and add some dissolve so let's select the text to the parameter and the text to div node Ctrl C Ctrl V to create a duplicate and this text to the parameter is going to be for the dissolve texture and this is going to be super simple all we got to do is multiply the main texture with the dissolved text and replace the connection up here and if in our material override we drag and drop the noise that I have also added to the back of textures this is what we get now wouldn't it be cool if you could control our merch we want to dissolve this well if you search for a LARP note which is a linear interpolation you won't find anything in here in godo it's a mix make sure it's a mix for a vector 4. we can connect the main texture without dissolving to the A and then the result of multiplying the main text with the dissolved text to the B and replace these up here and now the weight will control how much we want to blend between A and B meaning that if we control this with a float parameter call it this old amount we're going to turn on default value enabled let's leave it at zero and we can say that this is a range between 0 and 1. because 0 is no dissolve and one is totally dissolving connect to the weight and that's it that's pretty much it let me just arrange this a little bit but what really matters that if now you go to the Shader parameters on your material override we have the dissolve amount and we can control that directly in our particle system pretty cool we have this UV input on the text to 2D on the sampler to show you how you can scroll this how you can pan and if we go search for UV you will find a few things but we have down here UV panning and UV scaling two functions that come already let's go with the UV panning and connect this to the UV and this offset input will control the panning itself the scrolling and we can with a vector 2 parameter control that in the particle system let's call this the dissolved speed with default values enabled in this case they are actually going to be zero and if you connect this to the offset we don't want to do this manually right we need to automate this so back to our Shader we have another node very famous among Shader editors which is the time variable and now it's all a matter of multiplying the time make sure you use a vector 2 with the dissolved speed parameter and then replace the connection to offset and that's it now in the inspector you have this soft speed for example a value of 0.4 or 0.2 something slow for the flames now wouldn't it be cool if we could control the scale as well after Varane we have this scale on the UV function but that's not what it will do as a matter of fact we can copy this Vector to parameter and call it the dissolve tiling this time the default values are going to be 1 for the X and Y and the trick comes from multiply this Vector to parameter with the UV input UV make sure it's multiplied with a vector 2. and here we go connect this to the UV input of the panning function and we have the dissolved tiling where we can say for example X is 0.25 and Y 0.2 and we get this really cool feeling and then we have the dissolve amount that we can control however we want there's a lot of things that I could show you but this is essentially it when it comes to panning text to control the tiling dissolving another text or controlling the color via the particle system and so on you can learn much more on my YouTube channel where I have plenty of Shader tutorials they are done in unity but you can easily convert them to godo or even to Unreal Engine now let's add a few more things I want to show you a couple more things we could indeed duplicate this but let's actually practice how to create a particle system from scratch so we'll right click in our VFX underscore fire zero two let's add the GPU particles 3D what do we need a process material new particle process material a draw pass what are we going to draw well equipped and then the material in Geometry material override new Shader material to terminology is kind of weird because we are not going to create a new one we are indeed going to reuse our fireshade tutorial I'm actually going to drop flame02 for the main text and then the war knife for the dissolve and well let's fix the gravity right away let's say something like something like five let's play with the scale like 0.75 for the minimum and 1.5 for the maximum so it's a little bit random oh let's actually create a curve for this scale curve curved text or yes where we add a key more or less around here first key goes to zero and last key goes also to zero so it grows a little bit and then shrinks looking good yeah let's increase the amount the rate up here to 20. all right increase the lifetime as well to 1.2 yeah there's a few parameters you can play with but let's use a different shape for this one let's use a sphere so they don't start at the same position with a radius of 0.2 for example it will add a little bit of Randomness to wear this belt and as you can see they have all the same rotation we can actually fix that down here in the angle let's say it's -360 and 360 for the maximum but as you can see nothing really changes and the interesting thing in godo this isn't a fix on the particle system it's a fix on the Shader once again in the vertex function but if you click on this drop down menu we have particles and as soon as we select it our particles indeed have rotation no yeah pretty cool now for the color I'm actually going to use a color that I have saved on my swatches it's pretty much a very similar color to the last one it's useful these swatches yeah I'm going to show you what damping does by the way it basically slows down the particle throughout its lifetime minimum of 0.5 and 1 yeah so let's start slowing down at the end right so that's it for these Flames let's rename it to flames because now let's use the Ctrl D to duplicate this one for the smoke I want to show you something when we duplicate particle systems if we go to the process material we have everything already set up right and if we start changing stuff for example the color let's set it to black as you can see it has also changed the Flames color yep which is weird if you ask me let me do a couple of Ctrl Z's here all right so the way we fix this is either help here on the particle process material this drop down arrow we can say it's make unique are down here in resource it's local to scene depending on the situation these may also help you and now if you change the color to Black for example another interesting thing that is happening is they are overlapping sometimes the smoke is in front sometimes the Flames is in the back down here in sorting we can say the offset is -1 and it will basically draw first the smoke and then the flames and so on let me push this a little bit up as well as the Flames so they don't intersect with this ground and now let's pick a few changes to the Smoke something quick for example we want them to live longer 2.5 for the lifetime we can also say they are bigger for example 1.5 and 2. maybe a little bit bigger 2.5 for the maximum cool let's increase the shape the sphere by the way the radius to 0.3 0.4 so they are around the Flames kinda but like another cool thing that I want to show you is the gradients there's also gradients here on color ramp you can create a new gradient and on this gradient we can say for example the first key click here to control the color it's white and the alpha is zero this last key you can push it more or less around here and for the last key click here and set the alpha is also zero and here we go we have fade in and Fade Out just gonna add a new key around here so it's visible for longer exactly another thing that I want to show you is another particle system for some floating particles there's an interesting trick that I want to show you so with right click in our VFX underscore fire I'm going to add the child node and use GPU particles 3D and rename it to particles floating we need remember a process material new particle process material a draw pass what are we going to draw in this case the quality gear and for the geometry a material override new Shader material but this time not the Shader that we have actually let's duplicate the Shader we have here the Shader tutorial the fire Shader tutorial Ctrl D and rename it to simple particles Shader tutorial for example we want something from this Shader which is already done and it's the basic setup of the main text so let's push it up here let's erase everything else this one this mix as well and connect this to multiply with input color and that's it let's go back to our particles floating and now in Shader of the material override we want to say quick load and select simple particle shadow tutorial it's basically a very basic Shader only for the main text let's drag the flare00 that also comes with a pack of textures for free that I've given you and yes they are all going down by default as usual in God so on the particle process material let's say the gravity is 4. and they are intersecting with the other particles let's actually take care of that let's say the Sorting down here is one so they go to the front of everything else and then let's start from the top here so 50 for the amount lifetime of well two seconds more or less we want some flying Amber some floating particles they need to live a little longer and then well the mission shape yes this one needs to be a sphere a bigger sphere radius like 0.6 so they are everywhere and for the scale something very tiny like 0.01 and zero Dot 12. yeah very specific value and now what I really want to show let me just select the color yeah yeah this one exactly what I will not show is the turbulence which is kind of a noise module we'll add a really nice motion to the particles you can do a few things a few interesting things with this let's say the noise scale is five and here we go particles floating everywhere we have a quick fire going on with custom Shader with also custom textures by the way once again if you want to learn more about Texas have plenty of tutorials watch them you will learn a bunch of stuff and then you can apply it here and go and yeah that's it I think I'm gonna do a few more tutorials with this if you guys are interested so yeah keep her well keep watching by the way if you want to support me on my patreon that would be awesome so I can keep on giving you this free education that will be super much appreciated I made this all available on my patrons Page by the way there's also an enormous library of visual effects on my patreon yeah so thank you for watching thank you to my patrons for supporting me last month and for keep the channel going and as usual a quick shout out to the top tier patrons which are admin lion car are Alberto sajero's Alexander brazy Alan Alstead Elfman ape on fire aviatobali Ryan planned cyber cradle Daniel Schmidt's Daya cook Diana simonyan diagrams total El Sheriff Eric Horner thanks Striker Frosty 40 George Michael Burke group lab he entering the Jackson Doyle Jared Billy gyc C Miller of top Leonard lutuli Matt Maurer mache rezniaski Mike Bell not seems Nikolai elnazov fights classy 98 Avan venkat pradeepsen radioactive bullfrog Revenant games Robert torting rvr the Gap year Tom Tom Travis McCall very Suitor real who's Will poulian Shan Dong markdown Ching Pion Ling and minjae game so that's it guys thanks for watching my first Kudo tutorial I hope you have enjoyed and I hope to see you in the next one thanks bye foreign [Music]

Channel: Gabriel Aguiar Prod.

Views: 27,586

Keywords: flame shader, fire shader, fire effect, fire tutorial, fire, stylized fire, stylized flames, tutorial, stylized, flames, vfx, godot tutorial, godot, godot effects, godot vfx, godot visual shader, godot visual shader tutorial, visual shader, godot shaders, godot flame effect, godot fire, godot fire shader, godot fire tutorial, visual shader fire, visual shader tutorial, godot stylized, godot stylized fire, godot particle system, particle system, godot flames, godot fire effect

Id: R3xMwfrlTI8

Length: 22min 24sec (1344 seconds)

Published: Tue Oct 03 2023