Top FIRE Shader Graphs for Unity - 2D Fire Shader Graphs

hey everyone today i've got a bit of a mega post i'm going to be showing you three different ways to set up a fire shader in 2d three shaders in 2d and then at the end i'm going to show you a couple little tricks to put those 2d shaders into a 3d scene to get some cheap fire in any kind of environment so first i'm going to set up a sprite based shader i've got a sprite like this that's going to be set up as a four frame sprite and in the shader i'm going to layer those frames on top of each other and then animate them independently second i'm going to do a totally procedural cartoon-based shader that'll look something like this and then thirdly i'm going to make a more realistic shader this is going to uh a bit more glowy and look more like some kind of real fire might and then at the very end once i've done those three shaders i'm gonna show you what it can look like to put them into a 3d scene and how you might set that up i'm game dev bill let's get started i've got a lot to cover today so one of the things that i do in several places in this video is i speed up my shader graph creation the recording of my shader graph i don't speed up the voice over because then you wouldn't understand what i was saying but the actual shader graph creation i speed it up to make things move a little quicker in this video but what that's going to mean is at times you're going to be seeing clips of the flyer and think that's moving way too fast and the reason is it is moving way too fast i've sped things up but i'm not too worried about it in general because these sorts of settings the speed and all the different parameters you can tweak in these shaders those are something you have to play with a ton to get the right look for your scene anyway in some scenes a slow fire might make more sense and some scenes a faster one as with all of my other videos there's a written version of this tutorial on my website gamedevbuild.com i'll link it in the description i will warn you that the written version is a little less detailed in this video just because there was so much to cover here but the written version has a lot of detail that you'll need and some great screenshots so you can see high detailed versions of the shader graphs in case it's kind of hard to pick out here on youtube so let's dive into the sprite shader in this shader i'm choosing to do a four frame sprite anim just to give it some depth and some layers i actually could do this with one frame but it's going to look better with multiple i will say this sprite i threw it together really quick it's programmer art it's not meant to look good and it's kind of the point that you can take a sprite that is adequate and once you animate it and layer it it'll look pretty good you get a real artist involved where they make a much better underlying sprite and this will look even better all right let's jump over here into unity i've got this four frame sprite as i mentioned it's pretty simple i'm just going to drag it into my scene to put the sprite in the scene then i'm going to create an unlit shader graph i want it to be unlit because this is just a simple cartoony sprite based effect i don't need any kind of lighting on it i'll call this sprite fire and then i can take it and make a material from it and then i drag that material onto my sprite what should happen is i end up with a quad that's gray but instead i end up with four flame shapes that are gray and that's not what i would have expected well the reason is unity has some efficiency built in if i switch over to wireframe mode here you can see that there's actually meshes set up for each individual frame that has to do with the setting on the sprite so i mentioned this because this is a thing that can really bite you when you're making kind of sprite based shader effects you have to be careful doing a pixel shader on a sprite where unity has done this optimization so if you select the sprite and look at its importer settings there's one very important drop down here called mesh type by default that's set to tight which means unity will look for anywhere with a zero alpha and shrink the mesh in around that instead what you want to set it to is full wrecked that'll make something that's just the size and shape of the image regardless of what alpha you have coming in with that we can go ahead and open up the shader graph in the master node here i'm going to choose to set it to be transparent i could do opaque and just use alpha clipping to give it a really hard edge i'm choosing to do transparency here and actually use the alpha of the image that gives me a little more flexibility but it can be adjusted depending on what you need opaque is going to be more efficient than transparent then i add the input called main text again that reference has to be set to underscore main text i've talked about this in a lot of my previous tutorials put that input in there use a sample texture node to get it and i now have a correct rendering of my sprite with that done i'm going to set it up now to just do one of the four frames so i use a tiling and offset node and set the tiling to 0.5 0.5 this makes it so that i only see one of the four frames and which of those four is set by the offset i can set either of the offset inputs to 0.5 and i'll move around my grid to animate this i'm just going to use heat haze i've already done a heat haze tutorial if you haven't watched it i've got a link up here i'll also have a link in the description be sure to check that out in it i show what's going on to create heat haze how that works and how to move it into a sub graph and that's what i'm going to use here so i can pull up the old heat haze effect you can see what it looked like most of the logic of it is in this one subgraph called haze core and that's where i'm doing the actual heat hazing effect now i'm going to tweak this a little bit because it's not quite right for my effect so i'm going to find that subgraph and copy it move it where i need it and then rename it his core sprite i'll add it to the subgraph as soon as i remember what i actually called it and and then i got to wire things up now i don't have the ability to use the tiling and offset yet so well that's one of the tweaks we're going to have to make in a little bit but first i got to wire up all these inputs so i'm going to create a whole bunch of inputs to this shader this is the same thing i've done in the previous tutorial so i'm going to kind of zip through this here it's what all these inputs do and what they're for and how they're used and why i have the defaults set to what they're defaulted to is all covered in that previous tutorial so be sure to check that out again if you haven't watched the heat haze one be sure to check that out with those set up we go towards the first problem i mentioned which is i can't feed in my tile and offset which is really important in this effect so i need to go into the sub graph and edit it in that sub graph i'm using uv nodes directly and there's actually two spots where i do that so i'm going to drag one of the uv nodes over feed it into a preview and feed that into the two places where i use the uvs and then i create an input and have that input drive the preview node now you'll notice i'm keeping the uv node in my graph even though it's not hooked up to anything the reason is at times you might want to preview what's going on in your graph in that sub graph using the little preview windows on the nodes and to do that you need the real uvs or it's not going to work so i keep that around there were a few times during development where i had to rewire it to see what was going on now we can look in the scene and see that i do have one flame just the one that i want but the shape of it isn't quite right the wiggling isn't quite right so i'm going to mess with some of these inputs getting these perfect right now isn't super important but i want to get at least in the right ballpark so that i can continue to play with it as we go with the basic heat haze setup i'm going to now set up my layering i want to have my four different frames layered on top of each other so i take the subgraph all the inputs and the tiling copy it four times here so what i'm going to do here is basically just normal alpha blending where you take the color that's on top and you multiply it by its alpha which means where it is has an alpha of one it'll be there and where it has an alpha of zero it'll be black and then you take the background layer and multiply it by the inverted alpha and then when you add those two together because black is just zero you end up with the the kind of blending you want so what that means is i want my color that's coming out of the subgraph the heat haze each flame i want it to be pre-multiplied by its alpha i'm going to go into this subgraph i'm going to add a pre-multiplying step so this color output is pre-multiplied by its alpha and then as i said i need to multiply the background the flame behind it by the inverted alpha so i'll go ahead and make that an output as well set it up to already have this subgraph export its inverted alpha with that i can take the flame the first flame which is on top and take the inverted alpha from that and multiply it by the color of the second flame so now we have that background set up and then i add those two together and i should have this okay i actually don't i set up the inputs wrong so i fixed that to be a zero go back into the scene view and you can see that they're layered on top of each other now they don't look super great right now because they still have that blur if you remember from the heat haze tutorial i added a blur to the heat effect at the very end i don't actually want that for this it sort of ruins the effect but we'll clean that up later so let's keep going on this layering for the bottom two flames i'm going to do the exact same thing as i did on the top two and then i have to merge them two together which again is going to be very similar except that i need the sum total of the alpha from the top two flames to be multiplied by the bottom two and to combine those alphas i multiply them so i multiply those alphas together and feed that into a similar multiply and add step there's still one input to this subgraph that we've never set we set it to 1 and left it alone and that's the activation the activation input is what controls where in this image are we actually doing the heat hazing so it's right now it's just set to 1 which means the whole sprite is being affected which i don't actually want i want to lock in the bottom and then have it only wobble the top so to do that i'm going to take a uv node feed that into a split so i can get the y value and then feed that into a smooth step set that to something like 0.1 0.3 what this means is below 0.1 it's going to be 0 which means no effect no heat haze then from 0.1 to 0.3 in my image from 10 to 30 percent up from the bottom it's going to ramp into being the full effect and then from about 30 percent to the top it's going to be the full effect now to fix the blur we're just removing something so that actually is nice and there's two benefits of this one it's an easy thing to change because again we're just deleting nodes but to do the blur we actually did three samples which means with the blur my four layers being three times blurred gave me 12 samples and sampling is kind of expensive you don't want to do it too much in a shade or if you can avoid it so by removing the blur i go from sampling 12 times down to sampling four times which is much more efficient much better for my shader performance looking at it now without the blur i'm starting to like the direction we're going uh there's one thing i don't like about the art again the art's just thrown together it's programmer art it's not meant to look perfect but i do wish it had a stroke to it the layers on top of each other they blur together too much so i'm going to take this sprite and i update it to have a black outline around each flame and with that updated art i like things a lot better especially if i turn off this black background and you can see what it would look like against any sort of scene i'm pretty happy with that look so far but we're not done yet there's one more big thing i'm going to do here and that is mess with time so right now the effect is very smooth and fluid which might be what you're looking for but i want it to be a little more cartoony so i'm going to go into my sub graph and expose time there's actually two reasons i'm going to do this but the main one is to make it a little more cartoony so there's two places here where i use time one i'm actually using time itself and the other one i'm using sine time which you can just recalculate by feeding time into sine so i make time and input feed that directly into one node and feed that into a sine and then directly into the other now i've got this output i'm going to tile these to a preview just to make the wiring a little bit easier and then i'm going to create a more cartoony jumpy kind of time to do this what we do is take my time i'm going to feed that into a multiply and have that multiply be driven by a vector a vector one and i do that because i'm going to reuse that so i feed the output of the multiply into a floor and then that into a divide and that divide is using the same vector so i'm taking my time multiplying it by some number running it through a floor and then dividing it by a number and if i feed the uvs in you can see what this looks like just to give a preview of what it is it's essentially causing a step function so i set this vector to something like two and i'm only getting two layers of color as i ramp that up i can get it to ratchet more so the bigger that vector one is the smoother the time is going to be and the smaller the number the more choppy the time is going to be and i actually want that you know if you're making a cartoon cartoons aren't drawn at 60 frames per second probably drawn more like eight so this gives you the ability to give it more like a hand drawn cartoony kind of animated effect next up i can show the second reason i expose this time input into the subgraph and that is because i want each subgraph to have a different time i can take the output of my divide and feed into three different add nodes and that'll give me the ability to just offset the time a little bit i'm keeping them all the same speed so i'm not multiplying the time but i'm using an add to give them a little bit of an offset all of them have some small fractional value because that'll get it to where it's actually significantly off from the stepped time that we have before beyond that there's a lot of things we could tweak i'm done for now the things i would mess with moving forward if i really had this in a game and needed to continue to tweak it as i'd probably change some of the inputs to each node i would have them use different cell densities or offsets or that sort of thing that wraps up the first way to make fire we're going to cover today and now on to version 2. this is going to be totally procedural and it's based on something i did in a challenge a few weeks ago the challenge was to recreate an effect from some game and i chose to try to recreate the fire that a dragon is breathing in cuphead so i was trying to do something totally procedural and generated in code in shader graph but something that looked like a hand-drawn fire effect this is what i wound up with uh it wasn't quite what i wanted but there's a time limit and that's what i got so today i'm going to walk through that but i'm going to actually tailor it more towards sort of a normal fire campfire kind of setting than fire breathing so to get going i am going to start with a sprite i have this one here created that's just giving me the shape of the fire i want basically i'm using this as data to tell me what do i want this uh do i what do i want the shape to be you could do this totally procedurally if you didn't want to use any art but i'm going to use this just to define my shape and that way you could feed in any other texture if you wanted it to be a slightly different shape so i'll create the shader i'll create the material and then when i put it on there i get what i would expect which is a gray square now in the shader i do my normal thing of a main text input naming that again the reference has to be underscore main text feed that into a sampler and feed that out i validate that this is giving me what i'd expect but again this isn't actually going to be my color output or my fire this is just going to give me a shape now i'm setting up some kind of framework pieces here so i'm going to start with this vironoi node that's going to be kind of the meat of our effect to give us that fire shape now i'm going to take my texture output and feed that into smooth steps so things are a little more abrupt in the blackboard you can set a default texture to your shader this is mainly useful for inside the shader to see be able to preview things so then i multiply that by the output of my voronoi node this is not going to look at all like fire yet but i'm just setting up the framework pieces some of the core pieces here so i use this multiply to shape it to control what part of the screen and what exact shape we're going to be working with and then i feed this also into a smooth step to be able to do some alpha clipping now i'm keeping this as opaque and using alpha clipping to turn things on and off because i feel like that works pretty well in a cartoony based effect if you're doing something more realistic which i will be doing later you're going to want transparency and again earlier i use transparency because i felt like it was right and more flexible in that context but here i want to stick with something opaque that's going to have hard edges now i've got to start making this look like fire so i'm going to control the inputs to my noise to make things a little more dynamic we want this vironoi node to be having the dots move upwards so to do that we're going to take uvs immediately split and combine and feed that into the uv input of the voronoi node and then take the y and i'm going to subtract time now i always feed time into a multiply here just that i can easily control it if i want to slow the effect down or speed it up but as you can see with just this we've got dots circle shapes moving upwards we're already off to a good start i don't want this to be a grayscale effect so i need to add some color i'm going to put two preview nodes in here between my multiply and my final result just because that's an easy point to inject things i use preview nodes a lot to kind of organize my graph and make things a lot easier to work with so i take the output of this i'm going to feed it into two different smooth steps one right now i'm going to set to 0.3 0.35 the other one set to something smaller like 0.05 and 0.1 what this is going to do is because the two inputs to the edges are close together you know 0.3 and 0.35 and 0.5 and 0 and just one it's going to be a pretty abrupt drop off so it's mostly going to be either white or black because the two smooth steps are set to different values i get different levels of the effect going on this gives me the ability to have sort of an inner layer and an outer layer so i'll take the output of both of these smooth steps and feed them into multiplies and with each i'm going to multiply those by a color i've already picked out a color this was actually based on the cuphead the colors that were used in cuphead one's a bit more yellow one's a bit more orange i multiply these and now i've got two different zones now what i want to do is i want to add them together but really to do that i need to only have the orange show up in the areas that aren't yellow so i take the output from the yellow smooth step into a one minus and multiply it by my by my orange and that gives me this kind of weird outline shape now when i add these two together i'm going to get an output that is yellow with kind of an orange stroke around it anywhere it's near an edge so it still doesn't look like fire but we're getting closer next up i want to make it so that the middle is stronger uh doesn't have the holes in it and then the holes are mostly on the outside so to do that i'm going to take my original color input shape and feed this into a multiply to kind of scale it down a little bit and then into an add i'm actually going to feed in a negative value to lower it down a bit and i'm going to take that and add it to my noise and what this does is it sort of raises up the middle so that even though the noise node is trying to drive circles into the middle of the shape the circles are covered there they're they're taken care of by this shaping function and only on the outside edges do you actually see the circle starting to show up i've been mentioning circles because well this shape looks very circly all the noise in it is very circly and i want to fix that so to do that i'm going to duplicate the varonoi node feed that into a multiply and then use that as my noise data i'm also going to copy the combine and subtract from the uv inputs and feed this in to this other node but with a time that's been multiplied in this case i'm multiplying the time by 0.7 which is going to make this second noise go a little bit slower and that way the circles don't line up and they kind of start to overlap each other and crisscross a bit if you look at this it's suddenly looking a lot more flame-like there's a few things i want to tweak here specifically the edges where the it goes from yellow to orange and then orange to transparent i want to make those a little bit more abrupt so i can move the smooth step edge a little bit in right now it was a 0.3 to 0.35 and i'm going to move that closer together to make it a little sharper and then i also want to mess with the outer edge now to do that i'm actually going to take advantage of this multiply node i have way at the beginning i can slow down time it helps me look at things and see what's going on so i slow down time to 0.1 go back to my final thing and this this last smooth step is what's controlling where the alpha clipping occurs if i had set this to be transparent then i would probably get a transparency here and it might actually work without adjusting this but since it's doing opaque with a hard alpha clipping i want to get this right and i need to crank this a bit up to get the kind of effect i want without that black stroke around it okay i like that a lot better feeling better about that next up i want again this is supposed to be kind of cartoony and look like it's hand drawn which means the time needs to be adjusted just like we did in the first shader graph where i was using sprites and this one i'm going to adjust the time and feed it into a multiply and then a floor and then a divide to make it kind of adjust the frame rate essentially in this case i'm going to set it to 10 because that feels about right for what i want to do here that's going to basically make it like it has 10 frames per second and i like the the choppiness of this it's starting to feel good and feel a bit like a cartoon i'm also going to go over here to these varroa noi nodes and make the angle offset much bigger with a low angle offset the circles are almost in a grid like if the angle offset is zero then they actually are literally in a complete square grid so i set this up something bigger to give them more of a random offset i can also play with the cell density to have some smaller dots and some bigger ones really depends again on what kind of effect you're looking for here exactly how you want this to play as it's being drawn this is a big area all these little values here the smooth steps the adds and multiplies this is something really important for you to tweak and play with as you're trying to get the fire to look right for your scene and for your game this as it is works pretty well to be a nice simple fire effect generated with the two-tone colors you can add in some more layers color or change things up but what i'm going to do is uh tweak it so that the fire isn't just going up but it's also going out this is what i needed to really sell the dragonfire effect because when the dragon was breathing fire out it needed to go like this as well so i'm going to take this uv node and split node and copy it to elsewhere in the screen feed that into a multiply and then a subtract and a sign and i realize i don't actually need to multiply at all that's totally a waste but whatever the point is at the middle of the screen i'm switching from negative to positive by feeding that into a sine node it's going to be negative one or one now i can take my irregular uv outputs where they were just feeding the x straight through feed that first into a an add node for each of those this is for both i have to double everything because i've got two noise nodes here that have slightly different things going on i feed time into two multiplies and feed that into add now at this point i haven't utilized the sine node yet i'm just feeding the time into x which is causing it all to go one way and actually this can be useful if you're ever doing a fire that's in a windy area especially if you have some grass moving or trees make the fire move too it can have its movement go one direction or another now for me i don't want it to be going one direction i want to be going both so instead of just multiplying time by this steady value i'm going to multiply it by the sign and then feed it into that constant value looks like i have things backwards because my noise nodes are both doing this so i need to multiply this by a negative 1. luckily i already have this multiplied by 2 that i didn't really need but now i can just change that to a negative 2 and problem solved things are now going outwards and i can get this flame to be looking like it's going up and out out from this middle this is particularly useful if the uh bottom is like emitting a flame so if this was set up on a campfire you're probably good with things just going up or the direction of the wind but if it's something like a flamethrower or a dragon or some sort of uh torch or something like that you might want it split outwards like this a few more tweaks i want to do though again this is based on the cuphead dragonfire so i'm just sort of modeling after that one of them is that i want it to not only go you know up and out but i want to stretch i want the circles instead of being circles to be kind of stretched especially in this sort of up and out direction to do that i'm going to need to multiply my x coordinate here a little bit and i do that by first adding one and then subtracting one in the middle doing a multiply and that way i that happened to make my math work out easier the way i was doing it in my head i'm not actually sure that i need those nodes in there but they're there so you know you guys can enjoy them i'll take the output of my shaping function because i only want to stretch it when it's near the middle when it first comes out i want it to stretch and then sort of unstretch as it gets towards the edges i take my noise output i feed it into a multiply to scale it down and then i add one because again i want that's how my math works out best and then i feed that into my multiply and things look totally wrong and i've realized it's actually because i didn't want to multiply the x i wanted to multiply the y so i need to rewire that a little bit and i'm going to copy this preview have the x go into there and have my y go there and now things are looking the way i want as you can see looking at the voronoi nodes the circles are kind of stretched in the middle but then become normal and if i take this over to my scene looking at the fire it looks like this looks a lot more stretched which happens to be what i wanted for my dragon effect here again we can come back to some of these earlier nodes and tweak how much are we shaping it how much are we making sure the middle's raised there's all sorts of little things we can play with in there i could also do some things like adding some more to the middle to make sure that line isn't there the more i add the less it's going to be visible so there's a lot of tweaking here we could do but for now i'm pretty happy with it i'm good with the way this looks let's go ahead and move on to the realistic effect with this one i'm actually going to use the cartoony effect as a starting point and then tweak it to make it look more realistic so i've made a copy of that i'm using the exact same sprite i've made a copy of it called realistic flame but it's the exact same shape i've got a material and a shader but they're all just copies of the cartoon effect so to get going i'll open up the shader graph and there's a few things i'm going to tweak first off i only want this to be one color i don't want the two tone i want it to be one color that's more of a gradient so i can go over here to where i've got the smooth steps that color things two different ways and just delete one of them i'm gonna get rid of the more orangey one it doesn't really matter which one that just happened to be the one that seemed convenient i end up with this final product which is just a smooth step being colored with that things look worse but we're going to keep powering through this the next change i want to make is the mode of the color you see right now the color that i'm multiplying is set to default mode i'm going to change that to hdr which is high dynamic range basically instead of the color being in the range 0 to 1 it's going to be 0 to whatever i can select my color do plus 2 which is just going to make it really really bright and then with that i've now got a color that's shining brighter than my original yellow now this is only looks this way because post-processing is on that bloom is set up in it and your camera is set up to use post-processing but with that we've got this bright shining kind of flame look for some of you this might be done i've got a lot more tweaks i'm going to make to it a lot more changes but already it's looking better just by brightening up the color with that brighter color i'm not also going to mess with the alpha so rather than feeding the smooth step value into multiply to color it and then splitting the values out and feeding down to smooth to get my alpha i'm just going to feed directly off of this smooth step output i'm then also going to change this node from being opaque to being transparent it's not going to actually make any effect immediately because the smooth step that's feeding into this alpha is has a very narrow range so things are basically 0 or 1 the whole time especially against this black background you're not really going to notice it but if i get the spread a little bit bigger so here i'm going to change it to something like 0.1 to 0.5 you can see in the preview there's a lot more gray in the scene again there's it's on a black background so you can't tell but if i turn that black background off uh it's a lot easier to tell what's going on you can see a little bit more of that transparency to compare i'll go ahead and turn transparency back off we should be able to see what that looks like okay i did that a little bit wrong that's not quite right i got to change this alpha clip back to something like 0.01 so we at least cut out the outside and now you can see i've got kind of a dark edge and a hard edge to this flame which is not what i want i want it to be soft and smoother so change that back to transparent that's looking better already now i'm going to go in and tweak some numbers and mess with this actual graph a lot of these things i'm going to be doing you could do on the cartoon effect it really depends on what you're after for this realistic effect i want a different a little bit of a different shape i want things a little bit to behave a little bit differently but depending on what you want there's no reason you couldn't do some of these things or all of these things on the cartoon effect so for one in a voronoi node you'll notice that the color is really bright in kind of straight ridges and dark in circular valleys and what i want is to highlight those ridges a little bit more so i'm going to multiply the output of this by something in this case 2 feed that into my graph and then i'm going to go over here to the smooth step and move it up to a little bit higher so i'm going to say i don't know 0.4 and 1. now with this it's going to make things really sparse uh i'll probably need to tweak things a little bit as we go there's going to be lots of points where things look worse before they look better it's a really sparse more dynamic shape next i want to adjust the way that voronoi is moving so i'm going to take my time output feed that into a multiply and then feed that into an add and i want this add to be something big like 50 because this is going to go into the angle offset an angle offset if you remember when it's down near zero is basically a square grid and the higher you get it gets different kinds of wiggly shapes so starting at something big like 50 so that's nowhere near zero ever and then just keep growing it and what this will do is it'll make the circles in the node kind of swirl and dance which is what we want in a fire and this is actually a good example of something that i probably should have done in the cartoon effect here looking at it you can see that uh there's a lot more swirl and dance to it and we put this into the fire again there's a little bit too sparse at this point i probably need to tweak this smooth step so i'm going to set it back down for now to like 0.6 just to kind of thicken things up a little bit but you can see a lot more swirl and dance here going on this is looking pretty good again i like where we're headed i'm going to make another change i'm going to replace one of the varroanoy nodes with a different kind of noise this is just to add a little bit of variety and a different kind of shape to it just to give a different look again i'm not saying necessarily i like one over the other but i want to show you what these different things can do so that when you're making your fire you can tweak it as you wish so in my case i'm going to replace one of them with a gradient noise i'm keeping the other one in place because that gives me that right kind of swirl but i'm replacing the second one with a gradient noise so just feed in the same uvs this is just going to go straight up there's no real swirl to this and i feed that into the multiply on this gradient noise i'm going to set the scale to something like 4 to make it pretty big and blobby that's going to give the look i want one of the things i really can't emphasize enough here is that there's a lot of back and forth a lot of playing with numbers a lot in many cases it makes sense to expose these that you can mess with them from the material i like to have them in the shader graph a lot of times because early on i don't necessarily know what i want to tweak and sometimes it's easier to tweak it in the graph than outside i'm gonna come back here to the time up it to two depending on what kind of fire you're going for if it's a more calming effect or something more intense you can adjust the time and the speed of things i like fire to be intense i also like camping to be intense so i'm going to make this a little bit faster now i'm going to come to my kind of post noise function after i'm out of the noise into this shaping area going back to this smooth step now remember the way smooth steps work is the closer the edges are the more abrupt the change is going to be so if i set this to something like 0.4 to 0.41 it's basically black or white all the time this had been 0.4 to 0.6 which had a little bit of grading in there but i'm going to go ahead and change it to a 1. it gives me a lot more variance in there with that set up that way i'm now going to come over here to the multiplying shape node and that was really rigid if i soften that a little bit then i'm going to get more subtlety i'm going to get a little more control over it so now with the current settings this is fairly candle flame like i come over here to where i'm adding my shape and i currently have that set as a multiply of one before i add it into the color if i set it to something like 0.5 now there's a lot more kind of sputtering and noise to it so something like a campfire would benefit from this sputtering kind of fire and something like a candle flame would benefit from something that's much stronger in the middle with just a lot of noise on the outside so it depends on your use depends on what you're going for again just like the cartoony effect there's a ton more i could tweak on this i could mess with more noise nodes or changing up what's going on with the noise nodes i could mess with the shaping functions all sorts of things i can do but i want to show you what this looks like in a 3d scene and how to set that up so i've got here this kind of campfire scene and i'm going to add fire to it so i've got my same sprite and shaders in this project i drag the sprite in i'm going to position it and shape it the way i want and i've put this i've put this sprite inside of an empty game object and i duplicate it i'm going to move one a little bit more forward one little back and then i'm going to add this correct material on it to actually make it do fire but first i'm going to copy that material because i want the one in the front and the one in the back to have a slightly different material and i'll get to why in just a moment with the fire on there i probably should have put the fire on there first and then my positioning and shaping and sizing but i didn't so now i've got to tweak it a little bit more get them positioned the way i want and then the parent game object i've put a script on it called camera look there's two things i want to call out within the update function for one i'm using the cameras forward not the camera's position uh you're gonna that's gonna be the same if you're looking directly at the fire but if you're in a situation where you have a few fires spread out to the side i don't actually want them to billboard billboard means they always point at the camera which you can have and that can look okay but if something's you know there's a handful of them next to each other and they're all billboarded then you end up with this sort of weird uh staggered lattice kind of look instead what i want is i want them to point towards the plane that the camera is on which is using the cameras forward the other thing i've done is i'm excluding the y from the cameras forward and that's because if i'm well up above the fire i don't want it tilted back i want to be kind of looking down on it now if you're directly above that'll look a little bit weird i still think that looks better that's what breath of the wild actually does that zelda game does this kind of 2d fire staggered a few times in their in their fireplaces and they're turning to match the camera and then when you go above you can see that they're just planes headed back into unity i can show i can hit play here and see that this is actually following the camera as the camera moves around the fireplace this is giving the look that i want now i'm going to come back to something i did earlier if you remember i made two copies of this material to two layers i want to make the front and back different first off i'm going to come to this color node and say convert to property this will expose it and i can make the one in back a slightly different color in this case i'll choose just a slightly darker orange the other thing i want to adjust here is i'm going to add a new input called time offset this is just going to add to the time at the very beginning here feed this into an add node and now each graph can have a slightly offset time this keeps them from being totally in sync as they're wiggling to being offset from each other now looking at it head-on i am reminded that i currently have this setup in the shape that i described to you would be good for a candle flame not for the fire pit kind of look so i'm going to change that to be more sputtery and noisy by setting this value to be 0.5 and you can see that does actually look better and more fire pit like the last thing i'm going to do in this scene is just add more fire i create a handful of copies of my material i can see that as the camera moves around this looks a lot more like the fire that i'm after i'm pretty happy with it i like how it looks in this scene and this is a really cheap way to get fire for those of you that have seen more than one of my videos you probably have noticed that a lot of them end with dragons i don't actually do that on purpose i don't know why that happened but just to keep up that tradition i'm gonna have this one end with a dragon breathing fire i've got both my photo realistic effect in here and the cartoony one alternating so you can see what both might look like the cartoony one's a little silly in a realistic looking scene but hey you gotta have fun with your games so thank you everyone for watching please subscribe click the little bell icon i've got a playlist available of other shader graph tutorials also tons more on my website gamedevbill.com

Channel: GameDevBill

Views: 9,236

Keywords: fire shader graph, fire shader urp, fire shader hdrp, fire shader lwrp, 2d fire shader graph, fire shader Unity, fire shader graph unity, 2d fire shader unity, fire unity, fire urp, fire hdrp, fire lwrp, cartoon fire shader, cartoon fire shader graph, realistic fire shader, realistic fire shader graph, cartoon fire shader urp, cartoon fire shader lwrp, cartoon fire shader hdrp, cartoon fire shader unity, realistic fire shader unity, fire shader, 2d fire unity

Id: 8sJQvFA6GEI

Length: 40min 14sec (2414 seconds)

Published: Mon Nov 16 2020