Unity Shader Graph - How to make a Fire and Flames Shader

okay so hello and welcome back to another unity shaders tutorial and this one we're gonna be covering how to make this fire effect and the way I've made it is slightly different to the original which I'm going to show you in a second obviously I've added some parameters that you can change so you can change how curved it is obviously done it that much and you can also change the colors and whatever you want to do of the shader and also the speed of the animation you can slow it right down if you want I'll see you probably want a bit more but anyway and the person that made this original shader is a andy bc here on the unity 3d subreddit i asked him for mission for permission to make a tutorial on his fire shader and he said so long as i a shout them out and linked to his twitter and that's okay so i'll do so in the description to this video why don't you let's get into making it so let's apply this new material listen your shader sorry and here we go so first things first let's make it transparent and that's so that we can actually like ignore above the flame the empty space where there is no flame to render rather than having it black we want it to be invisible no alpha so that's done and then the main thing that makes this effect work is the Veroni of rowan i don't know how you pronounce it Veroni yeah Veroni Veroni you know i Verona someone correct me on how I pronounce that I could look it up but anyway it basically gives a kind of like cell look like biology that kind of cell obviously even has cell density honor and if I save the thing and you go look at it now I don't you can see it down here in the preview window I mean I could bring that bigger and you see it just looks like cells on the ball this isn't what we want but this is the start of our this is the start of our shader and in here you can change the UV which is what we're going to be changing you're also going to be able to change the offset the the rotation of the actual things themselves so we set it to zero they are perfectly lined up obviously of wise they're offset I don't know what the default was actually 8 okay it doesn't really matter and then the density to know how many cells are inserting out of area so you can increase that or decrease that and then the default for that well we're gonna put it around six cuz obviously we've all these values you can tweak them to your heart's content what you want it to look like but for this I'll just use this phone and just like the last video we I want to offset these cells so we're gonna output to the UV from the tiling and offset which I use in the last video show you how we can move a texture around the object now in this one we're not moving a texture such week well this is kind of a texture but it's it's different rather than having an input an imported texture this is a kind of mathematical texture as such but it's the same with all the black white and gray this but anyway we also want to pass in like last time the offset the X&Y and since it's taking in a vector two and we're gonna be inputting two vector ones that means we need a combine node which we had last time so we output the vector two to the offset and then we'll up we need to input the RNG value for the X&Y so first of all we want to get one of the parts is the actual animation for the whole thing moving like the speed of it so time and multiply and this lets us pass in time I'll put it to here and we can also take in a value which will be like I called it animation speed and we'll set this to minus 0.5 the reason we do it negative is because as you see that it's kind of moving down whereas who want the flames to go up so we want it to be inverted and this lets you actually tweak the speed at which it goes up so for that type minus 0.1 it would be it's still going up would it be slow I like point four minus point four just make sure it's negative or wise you it'll look silly and then now we need the R value which is a lot more complicate so this is what's going to give us the kind of shape of the moving up at the moment is just a straight moving up but we need it to be offset to the side a bit of wise the flames will go directly upwards and it won't look great so what do we need now we need alert and if you know maths or a bit of coding you might use alert before lerp it takes a minimum a maximum and a time and the time you could kind of think of it as a percentage of the way between the two values so for example if the input a is 0 and this is 1 and we want to go to 50% which will be 0.5 that means we're halfway between these two values which is gray between white black and white whereas if I put it between 0 and 2 and this is 0.5 is halfway between 0 and 2 which is 1 so it's completely white and so on and this is what this is what the values mean so put us back to it I mean we're going to changing all these values anyway so we need the animation kind of that the shape to be animated itself so as always time is the way you do animation really and we need the sine of time but the way he does it is he uses time into a multiply into a sign in to multiply this isn't necessary but it does help in some cases because it gives you more flexibility for example in the last video I used a divide straight out of the time so I could bring it down to a sensible value and that's what this does really it's not necessary it just helped so if I do multiply bring that up here and I set this to a low value because if you notice and practically every animation you make the value that comes out of time is always too fast for most animations unless you do want it to be really fast having this here kind of just brings it down to a reasonable value before we then sign the value just like sign on your calculator and then we want to multiply that again and so now we're multiplying the output and well taken aback to one for a sign more león and I use the value of a 3.5 so that all work nicely oops and now if we change this value it will then change the curvature of the actual shape this is what's going to change how weather the weather the flames are going to go straight up or bend to the side or been to the site a lot and you can you can tweak that just to make it perfect for you anyway now we've got this value that's going to be moving forwards and backwards slowly and this is what changes how far to the right spent how far to the left and it will alternate with time because every so often this will change as you see right now it's changed and so on and then now we want again at and the reason we're getting an ad is so that we can output this output to be to make it look nicer we want this to be into the a of look and then we need swimming in B and something in D and B so we've already got the minimum value and now we need the maximum value and then we use it the way we can do that is we can get the UV now a UV is the thing on top of the mesh so a mesh is a shape and the UV is what goes around the shape to give it its look and this has a RGB a value their vector for output and we can split that so that we can now access the RGB and a value separately rather than just as a for we can get all the separate ones now for the lerp we want to output the r to the max it yes for the maximum and then now for the oh wait yeah I've already added that right sorry but we also want to add that to the to the ad now what that means is as you see here when I go when I change time we go between these two values now but it's actually moving on its own as you see because it's this is moving now I was going to set this back to 0 this still isn't going to do much if you see at the moment all it's doing is it's making it as it's moving up it's also moving to the left and then after a while when this changes its thing gonna start moving to the right so now it's already reached the peak of its left so it's gonna slowly start coming back to the right now as you see it's not spinning left as much now it's going quite directly up now it's kind of going to the right a bit it's going to try a bit more and now it's going to the right really fast so that's thus alternating between it and now the one other thing I need is to get the actual shape so we want to get a shape of a kind of curve so it kind of goes oh it like flickers up now because this is all nap space one really good way to get this curve we want is by using a power function here and the way this will work is if you imagine if you have your your graph here and you've got your values so at zero you're at zero if it's neck squared but one you're at one two you're at four this is just guessing at free you're at nine all the way up here so as you go across you will be increasing the gradient is increasing I guess that's a bad way of drawing on here but your gradient will be increasing our x squared rate so as you see in a second it'll give us a nice curve on here now I also want to increase this a bit he did to point a 12 do 2.8 see how it looks so now you'll see when it alternates sorry my throat's a bit dry you'll see the transition is actually curved if I could pause that you would see if you followed it along it would be increasing at the rate of an x squared graph oh sorry an X to the 2.8 graph to be precise but that's what gives us this nice kind of curved bending kind of shape which for a flame does look pretty good and the way he's made it is that like after every so often it then switches to go the other side but it's because it's a lope it smoothly transitions it doesn't just switch from one side to the other it smoothly goes between them which is nice and it gives it really cool effect now this is getting close to the final effect obviously doesn't look like it is because it's just these weird cells but we're very close to actually getting the final effect so now what you want to do is want to go to our only effect and we don't want to output it straight to the albedo we want to do some stuff of it first we want to multiply it multiplies all the most used things in this so we'll get the output but what we're going to multiply this by the moment we're just doubled it which is the default value in here we don't want that we want to get the UV again and we could just bring the nodes down from up at the top left but we if we make it here it's a lot neater and we want to split it up sorry not spare right why spoil it so that we can then access the rgba separately and then we want to invert it because if we didn't invert it well yes actually I'll just leave out the invert for now and you'll see why we do it so power put the Jiva not we want the g-value now if I put that down you'll see why we invert it basically as you know black is one sorry black is zero Y is 1 and we see the stuff that's white and we don't see the stuff that's black so the moment the black is at the bottom the whites at the top so we're going to see the top of the flames and not the bottom where it's actually the other way around we want the top of the mesh where there is no flames to not be rendered and the bottom to be rendered so to invert this so that black line at the bottom is actually at the top and it was reversed we will take this we'll do one minus and then we'll put it and now we get the opposite effect which is exactly what we want for this so 1 minus inverts our vector ones it's very useful anyway now over here we kind of get in there but this isn't the end effect we want we also want to add this effect over it now as you see we've got a lot of white at the bottom and it's getting less and less at the top and it goes to black that means that on our flames it'll be very visible and the higher we go up the more transparent it's gonna get but we don't really want it to be gradient we just want it to be completely like transparent or not transfer at all and a good way step because step either let's something free or it doesn't so if we output this to a step now we get the kind of effect but it's only there or or it isn't so if I put this on to albedo for example it's not done yet you get in there with the effect but it's not right just yet it's almost there now I want to change some value so this edge value want to reduce a bit so he uses 0.6 and then we get another step and we do like 27 and we input this now the difference between these is if you see as you increase the x-value there's less of the actual thing getting rendered on the thing so as this is 0.7 and that's point six there's more of this white than there is this white but it's the same texture just kind of moved up so this is how we get the this is how we get the border line effect it's a different for the other shaders I've used the subtract feature but the subtract this is too complicated on this too you subtract using the steps like this really helps so now if we get multiplied here and we get multiplied here now just for the sake of making it look better I'll put that into the B and now we need to take in two colors which I've see you don't have to you can just set the colors but I'll take a main color as yellow and then like edge color as an orange so now if I get the edge color up here so what's that's going to do is it's gonna take the background orange and we're going to get the yellow in here and we want to add them together and if we if you add something it's kind of like overlapping them so this orange we're gonna just lay it on top of the yellow and because it's less yellow than his orange as you see we get the orange outline border effect which is very helpful and this is actually our albedo so now it's kind of get in there look it's almost right but the problem is we've got this black at the top which is the part of the texture that we don't want to render anymore and we've made it transparent so we can actually alter that but if I just reduce the Alpha the problem is it's going to just get rid of the whole thing we want the Alpha to be changed just for the bits which should be black and white so if we use this step which we're not going to on the Alpha it's gonna get rid of the orange bit as well because it's gonna get every bit above all this black is gonna get not rendered but some of this white is in this black so if we actually output this instead then we get the orange but we don't get the black at the top and actually now it is done now if I save the shader and go back into the V the game view it's done now all we really have to do is click on the sphere and go into the material and just tweak the value so you know this might be right for your for how you want it as you see if you increase the same multiplier it curves it a lot more so it goes to the side more it's more exponential because this is the value that gets that determines the curvature of it so if I set this to zero it would go straight up one slight aside to free and the more you increase it the more to the side it goes and then the animation speed is literally just how fast to animate so if I set this to zero it's like very slow one you kind of want it between that but as you see now if I set it to a positive value so 0.5 the flames are actually moving downwards like you want it to move up so on minus 0.5 so it actually goes up sets it 2.9 well yeah yeah I'm not going to see her in tweak with values that's what you can do but anyway yeah so thanks to Andy BC or whatever his name is sorry forgot wrong then for letting me do a story on the shader I really like how it looks and I hope you guys do too this can be applied to sprites as well just I'm not going to bother setting up a sprite thing now but I'm sure you guys can figure out how to do it just making sure that well it's very simple if I click quad on here which isn't right but it's to date you see how it looks that's how the effect would be and you can tweak the values for your liking but yeah so here it is obviously I can't see everything on the screen at once you can't read all the values on it but that's what it looks like in here but it bites fear anyway yeah so if you want to see more shaders tutorials obviously subscribe like for more drop down in the comments what you want to see shaders of I've already got an idea for the next tutorial someone wants to see kind of water shaders you're quite limited because you can't change vertices in a shader graph but what you will be able to in the future I'll make a video on that but until then we can do a simple albedo and normal tile offset I'll think about how what else I can do to make it look better but I'll definitely do that video tomorrow but yet any other suggestions I'll gladly take subscribing and liking that would help a lot I'm nearly at 200 and I mean just that final push would be lovely but yeah so thanks for watching and good bye

Channel: Dapper Dino

Views: 14,078

Keywords: Shader, Unity, Shader graph, Tutorial, New, How to, Coding, Programming, Game, Fire, Design

Id: ecMbrOCbbH4

Length: 17min 42sec (1062 seconds)

Published: Sun Jun 03 2018