How to Make a Stylized Fire Effect in UE4 - Niagara Tutorial

hello and welcome to another Niagra tutorial in my last couple videos we covered the basics of Niagara's so if you don't know how to use Niagara I highly recommend you go look at those videos they're a little bit long but you can put them on two times speed and they're well worth watching you know you can start off there and you will learn the basics of Niagara pretty quickly and feel pretty confident to move on to making a particle system in Niagara in this video we are not going to be covering all those basics we will be introducing some new things that we didn't do in this tutorial videos but we're mainly going to be focused on a particle system creating a specific effect and the effect that we're working on in this video is a fire effect we're looking to make a campfire style effect it's not going to be super realistic we're trying to make a stylized kind of fire effect here something that you might see in more of an indie kind of game like fire watch or something like that so you know if if you wanted to do a realistic fire effect this is not the tutorial for that there are doubtlessly some tutorials out there that exist for that and this one we're just going to go for a simple fire effect we're going to combine a couple different emitters to do this effect the main emitter is going to be a mash of matter which we have not used yet in the series and then we're also going to apply an effect that I just learned about yesterday which is super cool it's a distortion effect and it's going to give a nice little heat distortion around the campfire so we're gonna start off as we always do I have a project here and we need to enable Niagara because it is in beta and it is not automatically enable to go to plugins effects click enabled click yes and then restart it'll restart and then we'll come right back in and we're back so now we are going to create a folder called particle systems since this is a fresh fresh project so particle systems we're going to create a folder called campfire so in this folder we are going to create our first matter we are going to use a upward mesh burst and we're going to call this P and campfire flames so this is going to be the core effect core emitter for this effect so we're gonna open this open in a different window for some reason we're gonna drag it in the main window so you can see what this basic emitter is doing is it's just spawning this this arrow mesh in sort of an upward cone and it's flying up and then disappearing we don't necessarily want that cone so we're actually going to delete that and we're gonna replace it with an ADD velocity so just add velocity we're gonna change those numbers later I just want to put that in there for now and we are going to change the mesh to just a sphere because we want a sphere for this so you might actually have to go to view option since this is a new a new project I haven't unable to see yet I can't see the spheres from the engine content so what you need to do is go and this little eye here and go to show engine content and click that so we go sphere what we go sphere and there are a bunch of spheres I want one in particular because of the size of it eventually though for an effect like this you might want to make a sphere that's a little bit has less mert's this one has quite a few zuv you if you look at it it's like 560 you can make something smaller for an effect like this we're just going with us for the simplicity of it so we've got our sphere now what we want to do is we want to make a material to go on the sphere so I made my material in Photoshop and I'll just quickly go over how I did that I just drew it and it looks not super great but you'll see once it's mapped onto a sphere that it looks a lot better artists are probably cringing at this but really it doesn't need to be super great obviously the more work you put in the finer the details will be but this works pretty well for what we want you noticed pretty simple I have this other version of it that I had made that was a lot more complex and the thing I noticed is that the simpler you go with these little flame tongues the better you don't want it to be able really complex otherwise the effect starts to look messy other things here so we wanted on a black background because we're gonna do an additive effect we're not going for translucent so we don't really care about opacity we just want the background to be black we want a little bit of variation so that you kind of have variations in brightness and that's pretty much the important stuff I exported it as and it might not actually show this oh that's okay I export it as a PNG 128 by 128 pretty small I mean you don't really need a super-high resolution texture for this you will not notice the fact that it's kind of pixelated or kind of rough around the edges so got that there actually I should probably just export that again because I don't think I have that's exported say yeah we're just gonna call that fireball PNG save it and then I'm going to drag and drop that into the project so now have fireball PNG we're gonna open that up we're going to change texture group to effects and we're going to compress without alpha I exported it without alpha so shouldn't be there but just in case it'll it'll get rid of it save that so we're gonna go back and we're gonna right click on it and go to create material and we're gonna call this M flames so we're gonna go in here and a couple things we're gonna do we're gonna all click to disconnect this we're gonna click on the material inputs and we're going to go unlit and additive so additive for the blend mode unlit for the shading model unlit because this is a because it's cheaper performance-wise and be because this is a fire and it's actually gonna be emissive so you don't need it to receive lighting it's actually going to give off light additive because the way that additive works and why it's different than translucent is that instead of just relying on opacity which it can also use a pasty but what it does is for every pixel that is not completely transparent if you're using opacity for every pixel it's going to add that value to what's behind it so for blacks it's adding zero so no effect so that's essentially like translucency or transparency and then for whites it's adding one to all RGB values so that's that's pretty useful for us so essentially what that's going to do is if we spawn a bunch of particles on top of each other they're gonna add up and create a much brighter more emissive material that gives you a little bit of bloom so so we're gonna wind up plugging this into emissive but what we want to do first is to get a particle color because we don't want this to just be white we actually we actually want the particle to be driving the color of the flames so we're going to multiply well that was the wrong thing just em click much easier okay we're gonna multiply and any of the channels is fine since just greyscale and then we're gonna plug that into a missive color and so you'll notice it's on here it looks transparent but what it's really doing is just adding that value to the stuff behind it and you can see now that we've wrapped it onto an orb it kind of looks like flames looking up and once we we had a lot of these particles together and they're random rotations and moving it'll look like flames you know sort of licking around and things like that so so that should be good for now that's all we need it's super super simple texture so main things you want to remember are additive and unlit you could do two-sided we're not gonna do it here it doesn't really doesn't really matter all that much for us so we're gonna save that then we're gonna go back to our particle emitter and we're gonna go looking for flames and material we're gonna add that so you can see for whatever reason that did not compile so give it a second there we go so you can see now I've got this weird little shape here with the material on it it's not quite a sphere because the the the stuff and the template emitter has a specific scale and we'll fix that in a minute first thing we want to do though is we want to change things like spawn rate so we actually want to have things spawning fairly constantly but not necessarily consistently so what we're gonna do is we're going to change the spawn rate to arranged float and we're gonna make that 30 50 and then we also do want to do some bursts and we're gonna do all this range too because it's it's fire and we want it to be a little little random feel a little bit more dynamic most of the things that we do in here gonna have range just it to drive that dynamism so we're gonna do arranged int and we'll say between 5 and 10 5 for minimum 10 for max and same with the spawn time we're going to do a range and what this is essentially going to do is it's gonna say spawn the burst at a random time during the life cycle and so we also need to go into the life cycle here put that to 3 and we're gonna put the max loop count to zero because we don't actually want to cap the number of loops so now you can see we're spawning a lot of particles on top of each other I've got a really weird kind of cool effect not exactly what we want so we're gonna keep scrolling down here and see what we can do to make this look a little bit more like fire so the first thing we're gonna do is going to velocity here and we're gonna once again make this arrange so range defector and we want it to be zero on the X&Y and really like you could you could impart a little velocity there but I find that um that's weird rotation looks a little strange I don't know why did that you uh you could impart a little velocity on the X and the y however I don't really like the way that manifests itself in the fire I actually like to change where the particles are spawning to get a little bit of fluidity into the motion of the planes so I'll show you that in a minute but right now we're just going to give a range to the Z value which is fifty to a hundred so you can see automatically they're moving a little bit how it doesn't look like they're moving that much because of the scale that is automatically added in here and this template what we're gonna do bring up that arrange as well if you have more ranges so the minimum 0.2 0.2 0.2 0.3 0.3 0.3 for the max and now you can see we're starting to get something but maybe could look like fire it's obviously not there yet because we don't have rotation so what we want to do is add a random initial rotation to all of these to make it a little bit more interesting looking so we're going to type in initial rotation initial mass rotation once again we are going to make every last one of these ranged just grind through this uniform range flow uniform range float and uniform ranged flow and so what we're gonna do here is we're gonna say negative 360 to 360 for all of them so that it can basically just have the full range of orientations and already this is starting to look a lot more like fire you can see looks way nicer than they did a second ago and every little little change like this we make that adds a little bit of randomness into the system it's going to make this effect look better so the next thing that we want to do to make it look even more like fire is to give it a box location we don't want that much you can see that almost kind of looks like fire coming off the surface but we want it to really be more like almost coming out of a small area just because this would be like a campfire on top of some log so you're not really gonna have a huge area in there we also I put that in the wrong box sorry about that here you want to change the box size we're gonna go with five five and five that kind of gives us a small range you can see there's a little bit of something there it's not quite where we want it just yet but you can see there's there's a little bit more variability to the column of the fire so that it actually looks like there's some motion in there some fluidity but we still have some stuff to do here to make this look a little bit better so we're gonna go into color in the particle update now so this is no longer just the the spawning parameters but what's happening over the life so we're gonna change this from make linear color from vector and flow to didn't take too color from curve so this node basically lets you change lets you plot out color over life and then alpha over life on the bottom so we're gonna start off by right-clicking and adding wow it really doesn't want to work right okay adding key to all curves it's gonna start off it's going to be fully well maybe not actually we're probably change this a little bit blue be 0.75 won't be fully opaque at the start it'll it'll kind of be it'll kind of come into existence a little bit so it doesn't pop in so it'll eventually we'll add something over here that'll be one so it'll just kind of fade into existence and fade back out to zero over time so actually we can just do that now we'll add a key here I will put it at 1 whoa I put q1 that's not a it's not a opacity that you can use Q is not right so we'll have one at point and zero at one so basically you can see it doesn't appear to be doing that I think I probably need to change a lifetime here actually that not doesn't make sense why is that doing that you can see they're popping out for some reason and they probably should not be oh okay what I did here is uh I didn't use opacity and that's that's one of the gotchas of not using a pasties that you might you might try and use it down here when you're not supposed to so we're just gonna remove all those because they're not actually doing anything they're not plugged into anything so what we actually need to do here is make this black at the end so so now you can see because we have an additive material they're actually fading out because they're adding zero to what's behind it so again that's something you got to keep in mind is additive does not use the Alpha Channel and in fact you can still send alpha information from particle system to an additive material you could still use it it's actually kind of useful because you can use that as a parameter that you're already sending back so you can change it down here over life and then you can send it back and you can use this as a scalar parameter for things so that's that's something pretty useful that you can do since you're not using it and that was a great way for me to turn my brain fired into a teachable moment so now getting back to this what we want is we want to start off a pretty pretty bright color and what we're gonna do here is we're gonna have it's sort of look white ish but off whites a little bit yellow so we're gonna go 10.95 zero well that's a little bit too yellow sorry I meant to not be 0.5 fours well I should go for so now you can see a little yellowish off-white is where it's gonna start off at and then we're gonna put this at point three second it's actually 0.1 seconds 0.1 seconds we're gonna change that color and this one is gonna be a lot more yellow so we're gonna have initially like a very bright core to the fire and then we're gonna change that color over the life of the particle so that it gets more yellowish and then more orangish as it fades out so what we want we want one point six seven zero so I felt out all these all these colors ahead of time it's a good idea to kind of go through and just fiddle with numbers when you're doing something like this you're not gonna have the colors right off the bat you're gonna want to figure it out you're gonna base it on what your game's gonna look like but here I have all these sort of figured out so we're gonna go point four here and then we're gonna go to choose color we're gonna go one 0.025 and zero so now you can see it starts off pretty bright gets yellowish and then gets orangish over life if we turn off this background we can see a little bit better so you can see there's this little bright core in there gets yellowish and then gets orangish and then fades out into nothing so if we can actually drag this out a little bit more so you can see a little bit more of that color over life there we go that looks pretty good so just just kind of tweak the numbers until you get something that you like but yeah so now we've got color over life the next thing we want to do is we want to scale the size of our life so this already has a size of her life in here so we're gonna look at this we're actually going to change all these values we don't like any of them so this is just a scalar that's gonna scale all the axes at the same rate so it's basically gonna take all three factor directions that we already have which are random independent of each other so those can be kind of stretched but it's going to keep those at the same ratio over life so we're going to put this at zero and we're gonna say a point 0.25 for the first one we're gonna go say 0.3 and 1 the second one and then at the very end time one we're gonna go zero so now we've got sort of sort of a nice little teardrop shape where the flames are kind of small to begin with get bigger around the the center around the middle of the particles life and then fade off to something small as they kind of become translucent or or add no color information to the scene actually I might just now that I have the the shape worked out right I might just put these back I think that I think that uh had worked out these colors after I had I had done the shape yeah now you can see the white is pretty prominent or the the lighter color is pretty prominent and it fades off nicely into this nice little color gradient here so now that we've done the mesh size we want to do a rotation rate so that these particles aren't just always at the same rotation over their life so on particle update we're gonna click and we're gonna go to rotation so we're going to go to mesh rotation rate and we're gonna do this ranged however just know that when you do this this way it is actually changing the rotation rate every frame so instead of having a constant rate here that you define when you set it an update like this it's picking a different rate every frame for that individual particle so if you really wanted to do a random like constant rate you would go up here into a spawn and then you would add a new variable so you could create a new vary will you do a vector you do flow however you want to do it where you defined a initial rate that is ranged and then you come down here into mass rotation rate and you feed those in individually so that it's constant for each particle every frame the way that we're doing it now we're doing the fire so it's not really that big of a deal you're not really gonna see whether or not each particle is rotating it at the same rate over life and kind of erratic behavior works for fire any oh that was wrong that was the wrong thing don't want to put 180 into the rotation rate because that's a little crazy but it's a little bit too much but yeah you you don't really see the rate of the individual particles instead you just get sort of erratic behavior that works for fire so now you can see they're rotating you can tell the rotating you can't really tell if it's static or not or if it's a static rate or not but it works for our effect another thing to note because I tried this if you put negative 180 into here and 180 on the maximum so one negative 180 on the minimum and 180 on the maximum since it's random it's sort of gonna cancel out so you're gonna get your particles chittering back and forth a little bit you don't really want that it would be sort of nice for this effect to to have things rotating in either direction but you can't really tell looking at this that they're only rotating in one direction so it's it's fine for our purposes but again just keep in mind they're they're a bunch of gotchas associated with this if you're trying to do a random rotation rate for each particle you have to keep a lot of things in mind because this is doing it every every frame and the fact that it's gonna pick a random number can really bite you especially if you do a negative to a positive because then you could be cancelling out what you're attempting to do so keep all that in mind but now you can see we have a pretty good core for our fire effect here we have these flames that look pretty nice so what we're gonna do is we're now gonna create a particle system out of this and we're gonna name it PSN campfire we're gonna drag it out here of course it's not updating so we gotta we gotta open it see it's here and now we can go into the world take a look at it okay so you can see a pretty nice little stylized fire effect you know this if you're if you're looking at it from far away this is this is probably gonna do the job on its own you don't really need to add too much this you could have this as a torch campfire some sort of spell with a little fireball you can do a bunch of different things with that but if you get you get close to this there are a few things we could add to this that would make this a little bit nicer so we're going to move on to the next part where we had another emitter this particle system that's gonna give it a little bit more life so what we're gonna do here is add a new emitter we're gonna do a fountain for this one and we're gonna call this P in campfire embers we're and open that up so we're gonna collapse the headers so we can see what we got here we don't want to calculate the size by mass so we're gonna get rid of that we don't want gravity or drag force on these essentially what we're gonna do is we're going to be spawning little particles that are like embers and they're floating upwards on the you know the forget what the the the updraft I think is the term from the heat of the fire so they're gonna be floating upwards so we don't really want to give them gravity they're not gonna live long enough to fall to the ground they're just gonna kind of fly upward and disappear so now that we've deleted those things we want to change the spawn rate because obviously we're getting way too many particles here so we want this to once again be arranged then we're going to change the range to 0 to 5 so now this already kind of almost looks like embers because you're getting just a random effusive spray upwards of tiny particles there's still a lot we got to do to this but it's already looking much better than it was a second ago so now we're gonna go to set variables here we're gonna give the life time a bit of a range here so we want to go from 0.5 to 2 so some of these are gonna fade out a lot quicker than others some of them looking a little bit longer we actually want to change the mass here because this this affects the forces and velocity calculations and we're gonna do some interesting forces to make these torille a little bit so we want to make them have a pretty low mass so we're gonna minimum of point zero two and maximum point zero five and you can already see as a result of making these a lot lighter they're just shooting off so we're definitely gonna have to change the velocities quite a bit to make this not look ridiculous so we are going to go let's say negative negative point five it's probably good negative 0.5 two then we're gonna go point five point five five so you can see now they're just kind of kind of spawning and coming up at a reasonable clip you don't want to go too fast we're gonna go back up here now that things are moving in a reasonable clip remove the sprite rotation and we're gonna add a size sprite size so we're set sprite size here we don't know well so this is one thing to note if you go up here where you have set variables already happening and spawn and you click to set a variable it will give you another window we're not gonna do that here we're gonna go and click on this little arrow and go to add variable and then you can do it in the same little box it doesn't make a huge difference but it keeps looking a little nicer so we're gonna do sprite size do like we did in the last couple of videos vector 2d from float so this float is going to drive the same values or the both the X and the y values since this is a sprite we don't want it to stretch so then we're also gonna do a uniform range so that we get a range between 0.5 and a 1.5 mm hmm so now you can't even see him anymore and so we gotta zoom in pretty far boy they're pretty small let's add them to a campfire and you'll be able to see them a lot better here since they're already I've already done all the numbers to scale them appropriately so now you can see got these little particles coming up already looking pretty decent actually but we're gonna we're gonna add a little bit to this to make it look more interesting so we've got all of our initial variables here worked out we've got our velocity we want to change the spawn location ever so slightly just to fit our fire better so we're gonna give the the sphere location a radius of 10 now we are gonna step down into the update and here's we're gonna add some nice forces to give some interesting motion of these particles so the first one we're gonna do is we're going to add a curl force curl noise force sorry and the way I understand how this works is that it's basically a field of like a field of vectors and so the they're generating a random field of vectors based off a noise and so the way that it's gonna work is when a particle goes through that field vectors each frame whatever vector is closest to it or whatever part of the field it's in it's going to use that vector to act as a force on the particle so these are all pointing in different directions since it's a noise so as the particle goes through it's going to be affected randomly which kind of works for undulations in the fire and also wind that can sort of blow these particles around so we're going to leave the initial values the same here because they they work for us and then we're gonna add another force here which is gonna be a vortex well went away why did that go away vortex force so we're gonna open that up once again we got to drag it above solve forces and velocity said it'll be taken into account we want to move this down to 50 for the vortex force amounts it's not overpowering we also want to give some origin pole so these particles are swirling around the vortexes axis so now let's just save that and take a look at what this looks like so now you can see the particles kind of have a little bit of a random twirl to them they they don't just go straight up along whatever their predetermined velocity was they kind of curl around some of them go straight up some of them curl around they do a lot of interesting things gives it a little bit nicer more realistic looking behavior so now that we've got movement we like and you can kind of tweak those numbers if you want to if you want to have it move slightly different but I think that looks pretty good we're gonna move now to color and you can see what this is doing is it's essentially giving us just white to black opaque to transparent over time we want to change this little bit because we want it to have a little bit of a little bit of color to it so that's gonna start off this will be a 1 that's fine this is not the same material that we use before this is not additive or it might be but it's got translucency to it so we're actually gonna take advantage of that here and what we're gonna do is we're gonna make a super bright emissive color so that these really pop out so we're gonna go ten two point five and zero think yeah ten two point five and zero which will give us really bright color and then over time we're gonna decrease that color so we're just gonna go one point two five and zero this is the same color it's this orangish color this this color curve doesn't once you increase the numbers over one it kind of glitches out and doesn't show you exactly what the color is going to look like because it's a missive so this is what the color is gonna look like and it'll be less gloomy emissive right so that's how it's gonna work over time it's gonna get dimmer and it's also gonna become more transparent and that should do it for this so pretty simple emitter but it's gonna add interesting effect in here and I'm wondering not seeing the color I just did so I saved this just want to make sure ya save that so let's look at embers here and let's look at the color and he's doing it supposedly looking like what I think it should look like though let me just delete this and riad it just in case it's coming up glitching out there yeah there you go so for whatever reason it was not updating even though it said it was it had the correct color over here but that was not showing in the viewport so now you can see there orangish they're just kind of coming up and then randomly swirling around and then fading out and they've got arrange their life so they're you know they're starting off and then some of them are going in half a second some of them are taking two full seconds kind of gives you that ember feeling that you see in real campfire you get a bunch shooting out it's not really consistent spawn rate they just sort of happen and then some of them just kind of fall because they're smaller and died immediately some of them have a longer life for whatever reason so that looks pretty cool so now we got a pretty pretty basic fire effect here with embers gives a little bit something different you can kind of see it from a distance it's not super overpowering you get up close it gives you a little bit more nice detail looks pretty good and there's just one more thing I want to add here it's not super necessary certainly this is not something you'll want to add if you're seeing only from a distance like this is an effect that you're really only going to get really gonna get the benefit of when you're up close but it's pretty cool effect just learn how to do it so I wanted to share with y'all so what we're gonna do here is we're gonna add a new set of sprites that's gonna add heat distortion to our fire effect so first thing we're gonna do is we're gonna make a material we're gonna call this M fire distortion so we're gonna open this and what we're gonna want to do here is we are going to want to make this translucent and unlit unlit because it's more performant and like I said for the other material and translucent because it's gonna be just a heat distortion effect we just want to use refraction to make it look interesting and what we're gonna do here is we're just gonna trial this out so I'm gonna hit one and click to get a scalar parameter and put that at two just to show you what value looks like and something to note here is that generally in translucent you don't have a normal going on here but if you put refraction and suddenly the normal pops up and we're gonna use that minute but for now just plug in a scalar float into a fraction it's two so it's gonna be a pretty strong effect and then we are going to drag a plane into the world here and we're gonna rotate this and I actually I got this trick from we're going to throw this on here and one thing I forgot to do is to put another scalar parameter here and we want opacity to be zero so this is totally transparent so we see straight through it all we want is the refraction effect but as I was saying I got this I got this effect from an unreal live stream from 2015 and I will include a link in the description and I'm basically gonna explain this in a very similar way to what they did so if you want to see more about it you can go there but this is going to basically cover all the basics of it so you can see if you look at this straight on you don't see any refraction and the way that sprite particles work is unless you tell it not to face the camera it's gonna face the camera so if we just put this material onto a sprite put it in our particle system we wouldn't see any refraction at all because there are constantly going to be facing the camera we want them we want to actually be able to see this refraction which you can only do by getting a name and sorry an angle to the normal of the surface so if you're looking at it straight on and almost coming straight out at you you're getting no refraction so you can see not ideal for what we want automatically so what we want to do is we want to give this some normals so that so that we have something to refract the light coming through or you know this is not actually refracting light this is just probably putting some displacement on other pixels but it's giving us the effect of light being refracted so we're gonna hold down T and click to get a texture sample we're gonna come in here and we're gonna type in sphere and I think we want the sphere render normals map see that our sphere normal smooth normal sphere but we're gonna go with this one I think this is the one we wanted and we're gonna plug that in to normal and we're gonna take a look and see if that was the one we wanted I hope it was yeah I think so so you can see now we've got a sphere so even if we're looking dead-on into this thing we're actually getting refraction so that's cool you notice we're also getting other refraction if we're at an angle but we're not gonna be at an angle so we'll just get the sphere when we've got these camera facing sprites but we don't just want it to be a circle because that looks a little strange that's not quite what we're looking for and this is also kind of hard edge so we're gonna fix that as well so we're gonna go back to fire distortion we're gonna pull another texture sample out here and we want to get another engine content normal texture and what we're going for here is this water normal so if we open this up you can see it's got this nice little wavy fluid texture to it and that's gonna be perfect for a fire distortion effect another thing to notice I didn't mention this but if you look at us this texture is 512 by 512 same with this one which is probably a little bit of overkill for what we want to do not gonna worry about it for this tutorial but if you're trying to optimize is effect one of the first things you want to do is probably get this texture size down because your plastering this on a bunch of particles so you know we use 128 by 128 for the other texture that we're using and I think that's probably good for here so you can you can just duplicate these and I think if you change if you hit this arrow here under compression and change the maximum texture size to 128 you'll see that that changes up here and it changes the resource size so you don't want to do that on the engine content you want to duplicate this and then change it but that could that could optimize this effect a little bit more than what we're going to be doing in this tutorial so if you're looking to optimize it keep that in mind we're gonna come back here so what we want to do is we want to add these two textures together so you add both them together you plug them in normals and we're gonna save it and take a look at that so now you see we've got both sets of normals here we have a sphere and we have the texture over it unfortunately it's it's displaying what's outside the sphere and we don't want that we actually want this to only display inside the sphere so we wanted to have spherical normals and also this water normal but nothing on the outside of that so what we're gonna do is we are gonna lurk and we're gonna lurk this value so we're gonna lurk from 1 to that value because 1 is essentially no refraction if you go below 1 you get refraction in the other direction so just keep that in mind we're gonna plug that in a refraction and then we're gonna get a that was not Oh holding that R and clicking does not get you a radial gradient exponential which is what we want so you're gonna search for that plug that in alpha and essentially what this is gonna do is just fade off the effect away from the center of the sprite which is exactly what we want because we also don't really want a hard edge to this distortion it's nicer if there's a little bit of a fade to it so that that'll mask it for us nicely and we'll take a look and see what that looks like so now you can see we get nothing at the outside then we get the spherical refraction and we get this distortion effect from the water normals and you'll also notice that like as you look at it as you go in the circle because we're using that radial gradient the refraction gets larger until it gets to the center and then it fades off to the other side so that's that's why that radial gradient exponential is good here you could also use the spherical mask but then keep in mind you'll just get a hard edge between where you have refraction where you don't which could lead to some visual artifacts so I think this is a nicer effect and just threw my tinkering it didn't look like doing a sphere mask versus doing this radial gradient exponential had any difference in instructions some of the instructions might be more computationally heavy who knows this works it's not super awful performance wise so we're just gonna be happy with that however we are gonna change this value to 1.0 for instead of 2 I just had a super high value just to show off what it looks like we don't want it that high because we want it to be a fairly subtle effect so we're gonna save that you would also parameterize this and drive this value through the particle system so that you could have you know the refraction fade in and fade out but this is such a subtle refraction effect and there's so much going on in this of this particle system that you're not really going to notice it popping them out so now if you look at it like I said pretty subtle you can't really see it too much here we'll actually see it better in the particle system so now we've got that saved and so what we're gonna do here is super simple it's not the most performant way to do this but it is the quickest so if you want something more performant you probably want to create a different particle system that's spawning fewer particles but just for the sake of time here I'm just gonna add a sprite renderer and essentially what this is gonna do are we have mesh renderer here I'm adding sprites at the same locations all this is already calculated through all these variables I have up here the only things that aren't calculated are things that are specific to sprites as opposed to meshes so like scale rotation things like that are not being calculated for these particles so we're actually gonna have to change the scale ourselves and size for the particles but the position and velocity and all that kind of stuff is making it n2 here which is great we're not actually driving the color of this material this distortion material that we're gonna add so it doesn't matter that it's receiving color over life it's not important make sure this is compiled usually have issues with that and Niagra for some reason so now you can see it looks a little strange here it's not gonna look this way it's not going to distort the fire itself when we have the particle system in the game it only does that in the editor for some reason I'm not really sure why but right off the bat it's basically distorting wherever we have these mashed particles which is nice it's a little expensive you want to optimize you might want to make a particle system outside of this because we're having 30 particles per second but for just having one one fire particle system in a scene it's probably not that big a deal x' respawning a bunch of these you might want to consider optimizing a lot more but we're just gonna go pretty simple here we only need to do a couple things to make this really fit I guess we could take a look at this just to see what it looks like in the world delete this and we're gonna go back over to our fire particle systems you can already notice it's it's already working pretty well the size is not matching up the way I want it to you can tweak these numbers however you like but I'm just gonna go in I have some numbers that I liked I'm gonna add a sprite size we're gonna call this 25 by 25 so it's a little bit smaller than what we had before and then I'm going to add size scale so size scale sprite size scale so we want this to be a curve and we're basically gonna follow what we did with the mesh size curve so we're gonna use the same time we're gonna use different values because the sizes are different and also the the mesh size size curve was using a float as a scalar this is actually just the X and the y values to keep that in mind you can have to change both values so we're gonna change this to 0.8 at time 0 we're gonna add a key and value to all curves we actually want this to be at 0.33 and the reason why I change those separately is because if you select both them it does not let you change time for whatever reason which is a little a little annoying but it's fine it's fine and put that value at 1.3 so it gets a little bit bigger just like the the mesh particles do and then at time 1 we're just gonna leave it at zero so it's it's fading out just like the other particles so not only are these particles spawning in the same place the same velocity as the the fire particles are the flame particles it's also scaling over time at the same rate and then we're gonna select all these and also right click and make these Auto so that we get a nice curved interpolated the smooth interpolated transition between these key frames and we're gonna save them and now we're going to look at this in the world and you can see much subtler it's not it's not like curving the world around the fire it's more just in effect when you look through the flames so this is pretty subtle you can make it a little bit bigger if you wanted to so if you really want it to - give it a little bit of a rim you could just bump up where it says here I'll just say maybe 40 that might be too macho now say yeah you can see you can you can give it a little bit more heat distortion around it that becomes much more obvious so we're gonna bump that back down to 30 which is probably a good value so you can see there's a little bit on the outside if you really if you really want to have that edge distortion as well you really only see it really well when you look through it and if you really look through there it looks pretty cool you get that fluid like distortion from the water normals and you get kind of a wavy much more pronounced distortion from the spherical normals that we added in there so you have to see both of those effects in there and also since we're you know spawning a bunch of these particles at the same time it's actually you know we have a couple of them overlain it's actually modulating that even more so that it you know you get almost this wavy effect with the fire where the refraction isn't always constant it's it's refracting different amounts depending on how many particles are popping up right there and then so we can just walk around this take a look at it it looks pretty neat you can see distorting my guy a little bit here so he's receiving the refraction as well and it just looks pretty cool it you know it's not it's not meant to be realistic but it does actually kind of look a little bit like a fire distortion in real life and it's it's a neat little subtle effect that you don't have to do a lot of work for like I said you probably do a lot of optimising on this this is not the most performant if I back out of this and go down to shader complexity you can notice this is not not the most performant shader in the world you can also look at overdraw I mean we've got a bunch of a bunch of mesh particles here that are all additive so you've got a bunch of overdraw going on not the most performant thing in the world if we look at it we go here and we turn off the the heat distortion effect it does look better that doesn't look better that did not turn off the heat distortion effect sometimes these things don't take so you have to go and do it directly in the particle system for some reason don't ask me why it's supposed to remember it but it just doesn't so we're gonna go on the particle system and turn it off to take a look at us so now you can see it's off and now we're gonna look again and that shader complexity you can see this is not as complex it's still not the most performant thing in the world because there are a lot of mesh particles they overlapping each other here but it looks better same with same with the overdraw you can see it's not as bad it's still not great so definitely there is overhead to that heat distortion but it looks really cool so that's that's just something to to keep in mind when you do an effect like that as more particles with with their own materials that you're jamming in there it's gonna gonna add some complexity to the shaders and the overdraw and all that stuff and so that's something to keep in mind performance wise although I think if you if you know a bunch of these in scene it's not gonna be super proud we can look at the frame rate right now so all over the place but it's not awful I mean it's not taking a huge toll on performance if I had a bunch of these in the scene it might be a little worse so just keep that in mind also we can do things like optimize particle counts [Music] change the texture size things like that so there are a bunch of different ways we can optimize this you could also if you wanted to have a higher fidelity effect you could add more particles and you could you could make the the fire look a little bit because you know here if you if you look really closely at it you can kind of see through it it doesn't it's not the most full effect because I've already kind of cranked the particle counts down with respect to the mesh particles just because you know the more of those you have the more complex the effects going to be so you know there's a lot we can do with that but I think this is a good place for this video we've got we've got our flames we've got got these in fact I can make this look a little bit nicer there we go we got our flames we got embers coming off of them and we've got a heat distortion effect and so there you go you got had a very basic fire particle system that would be a cool effect in a stylized game not really good in a realistic game you know the color doesn't work well the level of detail doesn't work well honestly if you were gonna do a realistic game of fire you probably want to do something with with a sprite sheet with like a fluid simulation and sub UV so that you get a real realistic motion effect with more detail and we don't have all that here this is you know this is for your indie game so hopefully hopefully that's helpful for somebody I'm gonna be making more of these videos of focusing on single effects like this this one is a pretty pretty broad use thing a lot of a lot of games that fire I'll probably be doing some more specific use cases like I think the next one I'm gonna do is a portal effect not like portal the game but just an interdimensional portal kind of thing so I'll be I'll be covering a bunch of different a bunch of different types of effects in the coming weeks here on the channel and I hope you stick around for it if you want to if you want to see those videos just subscribe and I'll be putting them out soon if you got any questions about this effect here just comment in the comments below ask away I'll try and answer any and all questions as best I can if you have any specific effects that you'd like to see me try and tackle here so that you can also learn it just butt that in the comments as well and I'll see if I can if I can make those happen anyway uh thanks for watching and I hope you learned something have a nice day

Channel: Split Hare Games

Views: 8,955

Keywords: UE4, Unreal Engine 4, particle systems, Niagara, indie game development, game development, tutorial, how to make games, how to make particle systems, VFX, cascade, basics, learn, getting started, unreal, engine, epic, effect, how to, material, real, time, 3d, video, game, fire, flame, heat, distortion, embers, stylized

Id: mQen2jrxrgg

Length: 56min 3sec (3363 seconds)

Published: Sat Jan 12 2019