Pixel Art Class - Animating Fire!

we're telling stories right little stories about little fire particles and their lives so this one was born made his way out and then he got oh eaten up and now he's part of that [Music] particle hey pals welcome to a new video today we're going to be covering the uh process of animating fire i'm going to be teaching you a little bit about how fire works and showing you how to animate it in pixel art we've got a very special new overlay so this is kind of like a demo test for uh basically all of the videos that i'll be reducing in 2021 using the little suite of features that i've built in this overlay to be producing stuff with youtube videos so uh the first thing is chapters and uh i can set the first one now okay so let's talk about the anatomy of fire this is a pretty uh straightforward concept once you understand the basics i like to think about fire in the same way that they get created in video games and that's as particle systems fire is basically a bunch of mass a bunch of stuff that behaves a certain way in the environment that it's put into and when we animate it we're actually simulating that process as you can see fire is shaped differently depending on the scale so it doesn't behave the same way at every scale at the very very most basic level we have our humble candle and starts a little bit thinner it gets fattest in the middle and then tapers off if we were to like sort of add more combustion to this the tongue of fire would scale up away from the wick if we go to this bonfire here you can see individual tongues of fire like the candle but as we scale up and add distance between the sources of the flame they start to break up so you can see here there are very clear spots where the fire is separated and what that means is basically that this you can kind of think of like a like a space of influence right where all the fire will almost stick to itself but once you put enough distance between the two they split so all of the fire that is here on this side of the wedge we'll go towards this flame and on this side of the wedge it'll go towards this flame i'm going to show you a process of how to think about this stuff that's very easy to animate and effectively what it comes down to is simulating particle systems when you animate your pixel art okay so particle systems are pretty straightforward basically they are a kind of system that you see a lot in video game engines and special effects engines they have the following properties there is an emitter right it's like a space where particles are born from the particles themselves spawn inside of the emitter they carry out their behavior over their life cycle and as they age they change until the point where they die and with fire this could be described as a flame particle you know being created getting bigger as it gets smaller and ages it will change into a less opaque color maybe it'll go a bit more red it'll start white and then when it's at its oldest it disappears we can look at this and we can kind of imagine these particles making up this fire across their lifespan even at this level here as a candle but the same can be said kind of at all scales so you can see at the base of the fire all of these particles that are here are much much brighter partly because they're together but as we thin out the particles become darker and smaller and they start to break up so what we do when we animate is basically emulate that same process so when we think we'll be doing the same thing particle systems can be used to describe more than just fire it's pretty much anything that is either a liquid or a chemical volume so water would be the same thing you know you have your flow coming down the water is physical so it will bounce off of rocks it'll splash out there are lots of different rules that would apply so that's the basic model we think about particles being born having a life cycle and then dying and then we follow that process for each of them across the uh across the animation so let's cover animating a fire particle alright so here we are in a sprite the first thing that i always do when i come into a sprite is i decide how big my sprite is going to be fire obviously can be lots of different shapes and sizes so we need to know in advance what kind of fire we're creating is this a bonfire is it a bush fire or is it a candle or something in between in this case we're going to be creating a bonfire so something that's you might see in a fireplace or while camping reasonably sized but not out of control and we're going to be using a 64 by 64 canvas for this just to keep things a little bit low-fi and to show you the principles at their most sort of core but this can be scaled up to a lot of different sizes i've done you know much larger versions of the same technique and much smaller ones and they all behave much the same way the first thing we want to do is outline our silhouette i'm going to take a layer here and call it like maybe silhouette or background let's first block in the shape of the fire and when we block this in what we're doing is thinking about the fire as an entire thing that is a snapshot of a bunch of particles all the way through at different stages of their life cycles all at once right so there are some particles that are about to about to die up here there are some particles just being born and we're sort of drawing a snapshot of that we're going to think about maybe there's a couple of tons of fire maybe there's like a central pillar and like little bits coming off the side and you can take your time with this you don't have to rush into the animation process but we're going to be animating very quickly with this one that's looking pretty good so we can even if we really really want we can have some logs or something here as well we can shade those really quickly those are our logs we can put them underneath the background and that's our basic fire silhouette so i'm going to click link for both of these layers so that when we create new frames the contents of these frames will be the same across all of them and i'm also going to make a new layer and this is going to be the first particle that we create what i like to do is just give myself a bunch of empty frames to work with this isn't the entire length of the animation this isn't the entire length of the animation this is just going to be a bit of a space for me to animate i probably won't use 10 frames what i'll do is i'm not going to think about the particles as you know pixel sized i'm going to think of them as sort of larger globs of particles you can break this down as much as you want but the way i'm showing you at the moment is probably going to be the most efficient way of doing it but you can get super high fidelity if you really want to spend a lot of time on it so what i'll do is i will take the brush maybe about this big and i'll just draw sort of one what i think is one bunch of that fire that's going to that's going to like move together across its life cycle this would be sort of one of these pillars right that's what i'm sort of drawing now what i'll do is i'll just draw it at its first frame and then very quickly i'll just sort of draw lots of different points across its life cycle right it doesn't have to be perfect it's just something that's moving okay as it's moving it's getting smaller and sometimes i like to make it move faster as it goes to the top so we can actually delete some of these frames maybe this one here let's also do like a bit of a darker background here so that we can see a bit better so that's a reasonable fire particle notice that i wasn't very careful with the shape mostly just the size changing there are a couple of rules for the shape generally speaking because fire is a particle system and it's moving in a direction it has what you could call a flow right the same thing as water and when water flows generally what it does is it follows the path of least resistance it follows the course that the environment allows it to follow and when it does that it forms a stream and you can think of this stream as being if we just take a section of water made up of lots of little lines and maybe you know there are sort of wrinkles it's almost like a fabric that's how i think about the fire as well so if i'm drawing a fire what i'll do is i'll just think about like something like this right it's like a piece of fabric that's kind of torn and it's torn vertically so if i'm giving it any kind of shape that's the shape that i'm giving it right something that looks like fabric that's torn it has a grain almost you know has a flow a direction that it wants to go in it won't go this way it's mostly vertical because it's moving vertically it's flowing vertically as i'm drawing this that's the only thing that i'm really thinking about is maybe on some of these frames you know if i'm cutting into it i'm just giving it some vertical you know tears if anything okay so that's the first particle that was seven frames i think seven is fine so we can delete these two extra frames and what i'm gonna do is just add another layer and when i start this particle i'm not going to start at the bottom now you can start at the bottom and then offset the frames but this way is a little faster so i'm just going to pick you know we've got this piece here that's separate to this one so i'm going to take this piece and start somewhere up halfway through its life cycle finish it and then start it again over that seven frames so it's here and then it's here and then here and then here and then we come maybe maybe one more and then on the next frame we start at the bottom again and then we start here and we can follow that now so now we have two particles and i don't love how this moved so what i'll do is i'll actually make this a lot smaller on this frame so we see just the beginnings of it and i want to almost draw like in my mind you can draw this physically on on a layer if you want but in my mind i'm imagining a path for it to follow and as it flows along that path it it's sort of again like water takes the shape of the path so here maybe we'll have this part here and then like this that's a bit better so already we've got something that feels like it's alive almost right we've got some a couple of particles and we're filling out this space and we're going to be continuing to fill out this space until we have a really good idea of where you know maybe four or five particles or you know groups of particles are across the entire space of the fire and across the entire life cycle so right now i would say these are a pretty good distance apart we might need maybe just one more to follow and then we can have some intermediate particles that sort of just describe you know bits and pieces in the middle and then we'll move on to the next stage so this one i'm going to start closer to the end of its life cycle and it's really important that we think of this as something that loops because our animation in it's most definitely going to be playing over time and we don't want to have to animate you know infinite particles here so the point of this is that us creating these lots of different particles that are offset over time as long as each lane follows the entire life cycle of a particle from some arbitrary point back to that point again then the entire flame will loop i really like this technique of starting somewhere in the middle curving out and then coming back in it feels accurate even if it's not exactly how fire works it feels right so what i'm going to do now is just track this without the base silhouette and just see if there's anywhere that we can maybe fill in some extra little bits and pieces maybe here we could have a little something that it starts small because it's on the outside and ends small that's looking really good hopefully now you're at a point where you have a pretty good approximation of the fire across lots of different layers and across lots of frames so from this point on we're going to work on filling out the layers this process will take you almost the rest of the way there as far as getting this to look like a real fire that's animating what you do is you take another layer that's underneath your particles this is going to be like the animated version of your silhouette so we're gonna erase the silhouette after this but for now just take a color that's going to be different from the colors that you've used so far and it's visible so i'm just going to use blue for now and fill out the bottom of your fire this is like the part of the fire that on every single frame is definitely going to be there no matter what it's at least going to be you know at least this much is going to be alive and lit and you know burning so we're going to take that and we're going to animate it over every frame and you don't have to be consistent because fire is quite noisy right there's no real consistency frame to frame because it's it dances so violently so i'll just fill this out doesn't have to be perfect just has to live inside the space it can extend outside of it for a bit or shrink doesn't really matter so there we go nice and burning looks good and then what we want to do is you can do this on the same layer or on a new layer if you want think about it as if this blue piece wants to touch the particles and just sort of like extend out into that space right it can cover it it can it can chase after it it does get a bit thinner just before it breaks and i might go a bit further even here and so this is sort of like the second level of the flame if the particles are the hottest brightest parts of the flame what we're doing now is like the next level down i think it would be right if we made this particle a lot bigger and you can see like where the body of the fire and this particle are separating it gets quite thin like this and you can even show some of those tears we were talking about and remember fire wants to follow the path of least resistance and it doesn't really want to stretch out horizontally this way if there's a pillar of flame here and a pillar of flame here the fact that you know these are moving like vertically like this means that they probably won't get bridged this way that kind of doesn't look right they really only bridge vertically i think i want to see another particle live throughout this space here so maybe what we'll do is from here we'll just create another one there we go so now let's go back to our second level and fill this out and again you can be super rough with this the point isn't to be perfect the point is just to get that body right it's to fill it out and then we can iron it out later if we remove our original silhouette and then just look at this this will show us really clearly what's missing so you can see like right around here there's a little bit of just like empty space we can add another particle that sort of flows this way or maybe like right around here we could add a very small particle that comes up you don't want to fill the space too much because frames like this really give it character but frames like this kind of don't really work that well looks like the flame was almost dying here so what i'll do is almost you know we can either do a new particle or just figure it out aesthetically what we want so maybe just like here and sometimes you know maybe this this particle gets absorbed up into that one so that this here sort of lives there and then gets sucked up into this one and continues vertically we're telling stories right little stories about little fire particles and their lives so this one was born made his way out and then he got oh eaten up and now he's part of that particle happy little fire flames okay so i still think right around here we could really go for something a lot taller so in this process what we really want to do is make sure that when we watch these particles move the edges are also moving so like this bottom edge on the next frame shouldn't be lower than it was on the current frame so on this frame we should be able to watch it move upwards so that our eye can track what's happening the exception to that rule is basically just the base of this fire here can do whatever it wants every frame and whenever you see something that's on one frame that disappears in the next frame that's when i know that i need to continue that story a little bit longer so this one here can't just disappear the next frame it needs to live on a little longer and you can see i'm sort of ditching the particles themselves uh and just focusing on the overall story of the the fire at this like level two level this blue point here and we're just trying to like watch basically for anything that's jarring like this point here is there anything i can do here that that gives me some kind of can i tell a story of a particle that occupies this space maybe this point here can make its way up and then come up this way and then up a little bit and then live here not quite better we're seeing a lot of uh just like stuff appearing let's just track that a little closer and see if we can be more explicit about what happens here to the fire and then maybe we just show some remnants so i'm looking at this point here i'm saying what happens to this it kind of this is my process i see like what looks like two pieces and i think about okay well then next frame this one should go up and then maybe there's a little bit of an off an offshoot out here so it's sort of split into two and then because this one is bigger than this one on the next frame we can just have one left and there's a frame here that i don't like it's this one so what's happening to the fire let's watch so first error you can see here there's a big blob here that then shrinks very un unfire like so we either need to continue this up and bring this down or yeah try something else so the volume of it should be pretty consistent this looks like it needs to move and die out this one here definitely needs to go a lot higher up we've got this like really what looks like a really ridiculous acceleration from here to here to here to there so this is needs to be a lot lower and also this one let's bring it down so the goal always in any animation is to start with nothing animate with some process that gives you something onto the canvas and then fix that thing until it looks like what you want that's every animation video i've ever produced on this channel has always started with how do we just get something on the screen so that we can review it and then the next step is always how do we shape this now into something that looks like exactly what we want how do we make design choices right the first thing is let's just approximate second thing is now let's be you know explicit i mean like it was only 20 or so minutes ago that we had nothing on the canvas and we were just blocking in some stuff you know so the goal is always to get from that point to this point as soon as possible and i'm really through this process not thinking about the timeline at all i'm just watching individual pieces of the fire and i'm just skipping through the frames you know left and right i don't know when the animation ends i don't know what frame one is i'm not thinking about that stuff at all i'm just looking at this and saying what happens on the frame after this and i'm pressing the right arrow to go to the next frame and that's it and maybe it would be nice to actually follow the curves of the wood so we'll just fill this in a little bit more frequently so we can see it's sort of seeping down into the wood where it starts and it shouldn't look too stable it should always be flickering so these pixels here where we see the same thing a few pixels in a row a few frames in a row we want to get rid of that so even if it's just to raise it or offset it or something there we go that's looking great so now we want to start thinking about color and light let's replace the color with something that's much more close to what we want and we can do this a bunch of different ways this is an iterative process so effectively we can add more layers by just you know drawing over the top but what i like to do is to take the space and then maybe grab like a selection and just draw where we think the next step would be right as far as like the brightest flames would be somewhere inside of here alright so once we have that selection we press shift r we take that color and we go to the next brightest color and we're going to do the same thing again if we remember to drag across all of the frames before we do that so we have all of the frames and we replace the color that will now be the same across every frame okay what's important about this is obviously this is static right now it doesn't look like it's alive but it's correct from like a scientific or like physical way right if they if the light source is strongest here it's going to stay about here if it's less strong here it's going to stay this level right this line will waver and we'll obviously like make it glow and follow the shape of the flames a lot more but as a starting point this is really useful we can go one step further by doing the actual outer ring and then if we invert the selection we're now selecting everything that's outside of this notice that i'm using a kind of a exponential increase here so like this uh second circle is a little bit bigger than this one this next circle is a lot bigger than that one and then the next circle is like the rest of the canvas so we're sort of increasing by like multiples of two or something you know so again we grab all of the frames we take this color and we're gonna go down now to the next so just like that we've actually got a really good head start on the whole shading process so what i do is i bring out the old shade brush so shading i pick two colors that i want and then i start shading in the edges the tops as like a little bit darker and the reason why i like to do that is if you think of the fire as a physical object now the bit that faces the light source is the bottom that's how i think about it so now we can start tearing into this and adding some noise to those circles that we just created and if we play this back it's starting to look really good there are a few little bits and pieces i don't love like this got a bit overzealous there now we can take the brighter color and the second brightest and grab those two and start eating into this too and just creating some noise really just making it not so perfect so i'm wearing it down and now i'm going to build it up as well and then again for the brightest color there we go i also like to see if i can add some areas where if the fire is really concentrated just some bits where we see that lighter color again for the next step up at every level so in this case right here there's quite a lot of fire concentrated so i'm just gonna like yeah create a little bit of an extension there maybe here as well and then sort of break it out do these little teardrop shapes maybe here as well just so that it looks like it's kind of more physically accurate there we go fire so the next thing which is kind of optional but uh if you're doing a fire that is quite large scale there'll also be smoke and this process can be done i'll give us some extra space here uh it's totally optional if it's a much smaller fire and it can be done after the fact it's not the most important thing but all we do is we take another color that's darker we can go for something that's more gray or blue if we want and we make a new layer underneath the fire and we almost are this is basically a different particle system from the fire itself behaves in similar ways but uh instead of thinking of it more like a chemical or water this is more like smoke or clouds well it's literally smoke so it's more like uh something that expands as it gets bigger and it's going to get eaten from the inside so each particle is going to be doing something that looks a little bit like this so smoke tends to if this is our little particle emitter a smoke particle it gets a lot bigger a lot bigger a lot bigger a lot bigger and as it gets bigger it gets thinner so imagine i like to imagine something coming up from underneath it like the the air beneath it coming in and eating into the space that it takes up so then as it gets even bigger it starts thinning out kind of hard to visualize without doing it in pixel art but you can see it here and i'm just literally making these giant blobs you could do the silhouette process for this as well if you want where you just take the basic shape and then you fill it out over all the frames and then from here we're doing the same thing we're sort of telling stories but i'm going to just do that along the edge so i'm going to pick a spot and i'm going to follow something along so maybe we want to cut this away and it can't be it can't be so it shouldn't be so random that you can't follow it at all and smoke moves a lot slower than fire actually so generally speaking you act you actually are best off filling out these particles in a really really slow way and when i was talking about the fire the the smoke sort of getting eaten from underneath what that looks like is you sort of come under it and erase away so this here would still be going up but now we'd be taking away most of it like that and you would do that quite slowly so that's probably too fast there if i take this and bring it down further and i really like animating stuff like this because it's it's so fun to go so messy you get to see the results really quickly and you don't have to spend lots and lots and lots of time being perfectly accurate i really like effects like that so i'm just i'm just taking the time to look at little areas where i've got some motion but it doesn't really seem justified so like here this is looking pretty good that motion sort of coming up like that but then we'll fill it out a little bit so it's a bit slower it really start it's starting to look like something we can follow with our eyes isn't it and so i've been thinking about where the smoke is but now look let's look at where the smoke isn't so there's a cutaway here here but then it jumps up quite a lot so i'll fill it out there and then it disappears so i want to bring that back and it would probably be a bit higher so this is like the gap where the smoke no longer is if you can follow that with your eyes it's really satisfying to look at cool so i'll leave this here and i'll just move on to shading the smoke so this process is very similar to shading the fire we basically want to take our frame or our layer where the smoke is we want to pick the color that we want to be like the darkest color so in this case i might just go for like a black and then i'm going to take the next color up go to my shade brush and what i'm going to do is light this from below because the fire is a light source we're not really going to think about the sun lighting the smoke although you could do that but it's easier to just go from below so i'm just going to take all of this and think about depth a little bit but just give it some something like that right and we can do the thing that we were doing before we we take the entire section and we just say well that's where the light's going to be and then just fill that in but it's because smoke is so simple you can just treat this as if it's actually the same process as if i'm shading clouds so what i do is i'll just fill this all in and then i'll think about if these are all spheres which parts of the sphere will be facing the light right like that see how like you can almost imagine a circle here like a ball and this bottom part of the ball can see the fire that's how i think about it and it's best to just do this iteratively so just pick let's go like the body for now just grab all of this all of this or this okay now we have something and then we can just focus on getting those shapes to be nice and consistent and we could have done those particles for this as well like we did with the fire but again it's not something that it's just one of those things where once you have a really good idea of what your animating looks like you tend at least i tend to be able to just visualize it and then skip a lot of those steps if you're in the later elements if you're a beginner you might find it useful to continue doing those steps for every layer of the animation so like the smoke and the fire so we got some smoke that's layer one of the smoke you can then come and go a lot brighter underneath and follow that too and because it's so noisy you really don't have to think too hard about this there we go now if you want to be if you want to be really smart what you can do is actually take one of the darker tones of the fire and shade the smoke in those tones so like almost like a reflection off of the smoke and it has this really sinister look when you do that i really like what it looks like there we go that's looking great okay the next thing i want to show you is the last step and that is drawing sparks so on a layer at the very very top i just want to take a really bright color this process is we take a single pixel line and we just draw it like this right and we're just going to have our finger hovering over the forward key so that we can skip through the frames really quickly and we're just going to draw some lines that follow one after each other so you can do this on new layers for every spark or just on the one layer it doesn't really matter we can just wait a little bit and then just throw another one out that's probably a bit too long and it's just sort of winding around the flame getting caught up in all the air now if you want to be very very careful what you can do is you can actually shade these as well so you can come through with like a shade tool and you can go on later frames and just darken them so that the sparks kind of die out so like here we can go this is going to be orange and then it's going to be red fire there you go this will probably be my last upload for 2020. it's been a crazy year and we've seen a lot of growth from this channel this video was a little bit of a test to play around with some of those features that i'm looking to add to my videos and my stream moving into 2021 and i'm really looking to diversify my content as well so if you have any comments about what you saw today as far as the presentation values and the layout and any other suggestions for things that you'd like to see me give some tips about whether it's pixel art or even stuff about unity happy to think about making some videos about those too see you in the next one hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my gamedev project insignia to find out more click the links in the description below and if you like this video tell youtube by clicking the like button and then youtube will tell me and then i'll make more videos that's nice thanks again and until next time

Channel: AdamCYounis

Views: 51,895

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, animation, fire, tutorial

Id: b0iyDxpECJE

Length: 40min 52sec (2452 seconds)

Published: Tue Dec 29 2020