Critique => Pixel Art => Topic started by: Ryumaru on January 13, 2015, 03:18:15 am

Title: Fundamentals of fire?
Post by: Ryumaru on January 13, 2015, 03:18:15 am
I've always struggled with fire; I can't act it out like I can for character animation, nor do I know of any fundamentals to make it move fluidly and logically. Do you guys have any forumulas or helpful tutorials? inspirational gifs? Tips/ tricks or knowledge to share on the behavior of it's movement?

The torch is oh too common in games and it's whats giving me trouble today:

Title: Re: Fundamentals of fire?
Post by: NowvaB on January 13, 2015, 04:34:16 am
Fire Animation?
I always used this as reference. It's more... controlled? then a lot of fire I see.

If its hard to follow just watch the 'x' marks

http://www.quaife.us/blog/uploaded_images/Fire_Quaife_MummyTorch-773332.jpg (http://www.quaife.us/blog/uploaded_images/Fire_Quaife_MummyTorch-773332.jpg)
Title: Re: Fundamentals of fire?
Post by: Mr. Fahrenheit on January 13, 2015, 11:44:57 am


I think yours looks pretty good so far. Nice job!
Title: Re: Fundamentals of fire?
Post by: HarveyDentMustDie on January 13, 2015, 12:31:43 pm
I like this animated monument torch. It was recently made by Johan Vinet.  :)

https://twitter.com/johanvinet/status/537257294757912577 (https://twitter.com/johanvinet/status/537257294757912577)
Title: Re: Fundamentals of fire?
Post by: Ryumaru on January 14, 2015, 12:46:33 am
Thanks a lot for all the reference guys! One common trend seems to be the upwards movement of a mass that gets separated from the main body and fades as it ascends, and is looped. I revised mine to try and capture a bit of this. I think it's better; of course a good way's away from the great examples posted here. Keep them coming or feel free to edit or talk about fire in general  :lol:

Title: Re: Fundamentals of fire?
Post by: Conzeit on January 14, 2015, 02:59:25 pm
EDIT: changed my mind a bit about this explanation, a bit too much emphasis on being able to follow every speck of fire from bottom to top. making some edits :p

that is looking very good ryu!

yeah, fire is basically a wavy form which constantly has gusts of fuel coming from bottom to top, that then get torn to shreds which shrink more and more as they go towards the top. Those are the basics (unless it's a candle, if it's candle there's no shreds). You have good things going, your fire is wavy at the botton pointy at the top, you have sort gusts of fuel to the top where it separates and becomes little speckles that disappear.

if you want to make a cool memorable fire it's all about the ways you elaborate on that basic spewing motion, that's basically the only thing that separates different fire animations, just variations on the rythm, the stability and the shape, and the scale of the fire.

Try to start simple and make one or two bubbles of fuel that you can follow from bottom to top and become clear speckles when they start to detach from the fire.

Once you have that try enlarging one side of the flame you think will make it look more interesting, it should always be a little asymetric and unstable, how unstable is up to you. Fires with different origins, different scales and for different enviroments should have different characters.

You basically always have gusts of fuel coming from the bottom that get sort of torn into shreds as they start to detach from the body. You can just have something more candle like where the main body doesnt really get shredded, it just spews up little specks of fire, or you can shred the main
body to make those speckles at the top.

Small fires, candles basically just have the main body and the gusts of fuel, sometimes so little they only change height a little. The bigger it gets usually the bigger, more asymetric and more unstable the gusts get, also when they get shredded they make for more and more specks the bigger they get, you could almost say a candle is just one speck. The totally huge fires are more like an explosion and the overall shape of the fire takes on much more emphasis than the specks it gets shredded into when it disappears.

But always make sure you dont just add some crazy looking shape and then remove it in the next frame, have continuity and try to have a reason for everythng you add.

[EDIT: Space reserved for the fire gifs is now filled :p]
AIGHT. These are some picks of most representative fires out of my collection over the years. Lots of stuff from KOF (King of Fire...Fighters :p), I've analyzed aeons ago but never made a writeup...so brace youeselves :p.

(https://i.imgur.com/WIcISkP.gif)This one is a real fire giffed, that base was probably added in afterwards. I just put it here because it's remarkably well giffed and looped in a pixelart-ish size.

Since this one isnt hand drawn it just doesnt have the shredding thing going on at the top it doesnt work on anything but black. But I love the sort of velvety quality of the fire. This one makes you feel like the fire is composed of translucent shining seaths that get torn apart when they separate from the body at the top, and well that's what fire looks like most of the time, right?

(https://i.imgur.com/0cEFe5S.gif)Now this is a torch from Metal Slug.

I love it because it's a good deconstruction of that velvety quality of fire, does the same thing with clearer shapes and wanes back and forth gracefully

(https://i.imgur.com/Fnmg5oz.gif)This one from KOF is a bit more of an abstract fire. fitting since it's magic purple fire.

See how the big focus is the botton part with waves of fuel alternating from side to side to make the fire dance from side to side? makes for a really beautiful sillouethe. The way the fire gets torn to shreds is also really beautiful but it isnt the focus, takes place in much smaller space.

PS:I think there's a lot of phtoshoppy tricks on this fire
if you look closely you can see it's basically 3 fire sillouethes with a gradient applied on top to make for the shading. I think SNK has been doing something like Indigo's PS indexed painting for yeaars
(btw Ptoing recently showed me that to some extent pro motion and those old pixel programs have done index painting-ish things anyway)

(https://i.imgur.com/rowG27K.gif)This enemy from Earth Worm Jim isnt even technically fire, still works really well as one.

This one's got really beautiful gusts of fuel that you can follow, and it gets decomposed in very well drawn specks of fire. I think there's two layers of fire going on here...an outer one that  has the gusts of fuel and is the body of the spectre, and an inner one that is like rocket fire propulsing him, they're just overlaid without diferentiating them to make a subtle looking multi layer fire.

(https://i.imgur.com/QdyouaU.gif) I called it thief fire slash, I think it's from one of the Capcom Dungeons n Dragons games

This one's sorta shabby, but it's a good show of what happens when fire moves (basically the point of origin is like the top and where the fire is now becomes the body) and how to do a fire that in it's first frame is a slash.
it's a bright white slash until it explodes into fire and sorta disappears, the part closest to the tip disappears last, but the disappearing of the fire isnt from the starting point to the bottom, all of the fire sort of disappears at the same time, except for the tip that disappears a bit slower.

(https://i.imgur.com/bGDirfA.gif)Garou:Mark of the Wolves. Sort of a KOF spinoff. SNK fighters and their fire weilders.

This one's pretty interesting on it's own but I'll also talk a bit about how it's used ingame.
The source of the fire is the middle, but the source is sorta suffocated and escapes to the sides, since it's magical blue fire it gets away with weird stuff, so the way it escapes being suffocated is forming that energy arc, kinda like the aura effects on akuma and many anime characters.

That energy arc moves to the top and gets shredded like it usually happens with fire.
There's also two candle like flames on each side of the arc. The left one grows below the arc of fire, then when the arc gets shredded grows bigger than the arc and gets shredded itself. The right one remains at the base of the arc, only overpasses it a little bit before the arc gets shredded, it's basically just adding a tiny bit of eye candy.

The result is pretty mesmerizing IMO =)

Now you see how it's used ingame and why the source is sorta exhausted ( and also a stray fire frame popping in at the top right corner...ignore it I must've placed it aeons ago when I first broke down this fire =/ ), the source is the palm of his hands but he closed them, so it escapes to the sides
What's interesting to me is that the same fire gets two tweaked timings and has the beggining frames offset a little...and it almost convinces you it's two different fire animations for each hand ( I certainly thought so when I first saw this :p)

(https://i.imgur.com/MPiQdvK.gif) Kof again. some evil clone dude.
This one is just the best pixelart version I know of of fire actually burning something. in pixelart fire is often smokeless and doesnt actually visibly carbonize anything, also since it extends over the material it makes interesting waves of fire, looks pretty wild.

I edited this one to de-colorize the jacket he wears, it normally was the same color as the fire before it burnt. The beggining frames have a sort of energy ball almost exploding outwards, then they project downwards until on frame 10 they engulf all of his face and his arms, they also round the flaps of his coat, making a rim of fire.
At this point there is a *bit* of smoke coming out of his shoulder, and the flaps can be seen sorta carbonizing from inside. Those are the details I really love about this one.

From there to frame 13 the flame just engulfs everything and the clouds of smoke become a bit bigger, from there on the fire just loses the fuel (the fuckin coat disappeared! :p) and all of the fire very quickly gets sort of wiped away by small dark clouds of smoke. That ending is underwhelmingly un-smokey :p

KOF again. This is a super from the evil form of the respective envious sidekick, Iori. Think KOF's vegeta possesed by Magin Boo moment. This was mostly to show the more huge explosiony fires, where the general shape is more important than the single specks. I'm not getting into the geisery nature of this one :p

PS:sorry I havent commented in your other topic, but honestly I've been feeling like redrawing an animation too much before you've seen it in engine is a bit wasteful, you should just try to get them to a point where they're functional so that you're going forward and you can finish whole character movesets. You can always tweak once you've seen them acting in engine and the tweaks will likely be a lot more functional.

I think your character animations there are quite functional, remind me a lot of Star ocean Blue sphere, which is always good. if anything the female run looks a bit unclear, but it'll probably be fine
Title: Re: Fundamentals of fire?
Post by: Ryumaru on January 20, 2015, 09:14:08 am
thanks for the write up conceit  ;D This has been a super helpful thread. Please don't forget about those gifs!

Here's what I have for the final. I think I lost a bit in transition, but also gained some cool stuff so I'm happy with it as my first super serious attempt at a torch. It can only get better from here!

As for Castle Fade stuff, no worries on not replying; we're all busy! Actually I am able to see everything in engine these days since I have one of those rare programming creatures. They all seem to be pretty dang functional, and not eye- sore ish so they may last through a demo or two :] Man, I never would have seen any blue sphere in them but I'll take the compliment! Thank you!
Title: Re: Fundamentals of fire?
Post by: Mr. Fahrenheit on January 20, 2015, 08:18:47 pm
Looks good, if a little slow fuzzy and green. I think the a more orangeish color would help the most to make it more torch like.
Title: Re: Fundamentals of fire?
Post by: Conzeit on January 22, 2015, 04:22:16 am
I think it's passable but for my taste it's a bit too pillowshady. I can get it if you're going for that sort of fire that glows from the center but there's better ways to do it.

hm. I think I might've led you astray a bit with the last post, it looks a bit too focused on each speck. try to emphasize the gusts of fire that slowly go from bottom to top, that makes it look more premeditated, less finicky

PS: I edited the last post and added some gifs, and a writeup for each. not entirely sure it's useful...hope so!
I feel a bit weird putting so much into this O_o ryu just hit a topic that I've obsessed on for quite a while but never wrote about O.o
I have a ton more but I wont be doing writeups right now. but here are some imgur albums for em. The ones I picked for that post are from these albums so there'll be repeats

picks for last post

Capcom Arcade gifs.

Real Fire gifs. just 3 :p

KOF and MOTW. so many it has it's own album. huge and lots of interesting stuff going on. Dracula's fireball from Castlevania Rondo of blood somehow slipped in there C.c

Metal Slug. a few, but perhaps not as many as you'd imagine. fires are too busy and explosiony for my taste.
Bonus: the sheet of the stage which originated my favorite torch. Smaller torches there you may learn from ryu. https://i.imgur.com/ZaUNMKj.png

Samurai Shodown and some other random arcade games not by capcom :p.
Title: Re: Fundamentals of fire?
Post by: Ryumaru on January 23, 2015, 04:28:07 am
Yeah it does seem I botched it a bit. I took another take at rendering it from the earlier wip. Don't really know how to do it without pillow shading to some extent. Whenever I try and break it up too much it doesn't like it. This one might even be more on the pillow shaded side, but I think it does a better job of keeping the movement intact. I think the rendering of the earlier one messed with the shapes a bit too much.

All those gifs are freaking sweet. Thanks for posting  :D

I also tried to take out any green that might have been in there.

Title: Re: Fundamentals of fire?
Post by: Mr. Fahrenheit on January 23, 2015, 08:36:25 pm
I guess not really green, but more I think it needs to get to orange a bit quicker than you are making it currently. It really depends on how realistic you are trying to make the fire. Totally look at the colors from the gifs conciet posted.
Title: Re: Fundamentals of fire?
Post by: Ryumaru on January 24, 2015, 04:58:34 am
I guess not really green, but more I think it needs to get to orange a bit quicker than you are making it currently. It really depends on how realistic you are trying to make the fire. Totally look at the colors from the gifs conciet posted.

It's not supposed to be insanely realistic, but it's also not supposed to look wrong. Could you make an edit? Partial red/green color blindness means I'm not going to see any issue with what I have.
Title: Re: Fundamentals of fire?
Post by: Mr. Fahrenheit on January 24, 2015, 05:44:49 am
Here's a pretty quick edit on only the fires colors.

Title: Re: Fundamentals of fire?
Post by: yaomon17 on January 24, 2015, 05:52:06 am
The green could work well in a crypt setting or a graveyard of some sort.
Title: Re: Fundamentals of fire?
Post by: Ryumaru on January 24, 2015, 11:41:32 am
The green could work well in a crypt setting or a graveyard of some sort.

The problem being the green is not on purpose.
Title: Re: Fundamentals of fire?
Post by: Gil on January 25, 2015, 07:28:51 am
It's not green, it just looks green in comparison to the yellow. If you buffer a saturated color with a desaturated one, the desaturated color tends to look like it's pushing away from the saturated one, in this case giving the optical illusion of being green.

Check out this piece by iLKke:

The description explains it.
Title: Re: Fundamentals of fire?
Post by: Kazuya Mochu on February 15, 2015, 10:36:30 pm
This is one of my favorite representations of fire, mostly because of how simple it is in color. I remember it being faster, which I think helped. People tend to make fire very slow.


Also, the fact that the fire is plain yellow is because of color range. they made everything else bright enough that they had to make the fire fullbright
Title: Re: Fundamentals of fire?
Post by: Conzeit on February 17, 2015, 02:09:20 am
honestly ryu...I think I gave you plenty of examples of differently shaded fires...? just pick one and dissect a still frame. you should be fine. for the size of fire you got, I would go to the metal slug level sheet I posted and use the small torch that is there as a model. that's probably pretty great.

That's just because I love trying to communicate the volume of fire, as futile as that is when we've got 3d fluid simulation...they pretty much do that "velvety" thing as the default effect for shitty commercial slides now =/.

but the fullbright thing Kazuya suggested should work pretty well for your game. if you did that you could pretty much just keep the fire flat and ask your programmer to overlay an alpha enabled blur on it and call it a day. I always liked that look, it reminds me of 80's anime and american action movie sfx
Title: Re: Fundamentals of fire?
Post by: Ryumaru on February 22, 2015, 10:07:42 pm
This torch wasn't done for any of my games but rather some freelance stuff. They were pleased with the version I sent them so I won't be doing any more work on this one; but I definitely enjoy all the discussion to inspire future stuff!
Title: Re: Fundamentals of fire?
Post by: HarveyDentMustDie on April 07, 2015, 01:05:53 am
I know this topic is old but I think that this video belongs to it as a bonus to some new readers along with all those nice examples. :)

This is the process of animating fire by Alex Redfish https://vimeo.com/user12223385 (https://vimeo.com/user12223385)

Video ;D:
https://vimeo.com/90560450 (https://vimeo.com/90560450)
Title: Re: Fundamentals of fire?
Post by: CelioHogane on May 12, 2015, 12:24:53 pm
kind of old yeah, but if we are going to put some examples of fire i have some:

Im still impressed of how good looked even if it was my first time doing fire and animating.

but i think is a good example of fire, right?
Title: Re: Fundamentals of fire?
Post by: jams0988 on May 16, 2015, 06:46:24 am
but i think is a good example of fire, right?
It's okay, but it's very slow for a cannon's shot.
Title: Re: Fundamentals of fire?
Post by: CelioHogane on May 17, 2015, 08:10:24 pm
but i think is a good example of fire, right?
It's okay, but it's very slow for a cannon's shot.

well, it was old school disney style animation, so is kind of on purpose.