Fire is tricky. On the one hand you have static loops, which can feel a bit limp and unresponsive.  On the other you have cool particle effects which are more expensive to draw and render and difficult to program in a realistic feeling way.

Fire in action

I've been trying out a new hybrid approach which is relatively cheap computationally while still being randomised and responsive.  So far it's off to an OK start.

It uses a series of static animations layered on top of each other in a slightly non trivial way, so it's easy enough to program and render while still being able to change state dynamically.

One example - here's a switch between a more and less intense flame:

Since I'm determined to have the environment respond to the player character as much as possible, it also moves away from you as you get near (this makes slightly more sense in the context of the story):

How it works

The basic idea is to illustrate a series of short flame sprites, then crucially separate each colour out into its own layer.

You lay a bunch of randomly generated flames on top of each other and then draw all of the reds together, followed by all of the oranges, followed by all of the yellows.

This kind of colour separation leads to an effect that feels a lot more intricate and cleverly programmed than it actually is. I'm not too happy with the look just yet, but I think that's due to the individual flame sprites being a bit small and without enough frames, so the fire feels more disjointed than it should.

Other uses

This technique doesn't just apply to fire effects.  I'm pretty sure Celeste is using the same trick to merge scenery together without outlines overlapping, and it's probably been used in a whole bunch other places as well. I'm looking forwards to playing around more with it!