4
\$\begingroup\$

I want to create an effect of fire and be able to give it a variable amount of "wind" to make it blow to the side. I don't want the particles to just curve off to the side, but to flow through the air semi-realistically, similar to the effect of the fire in this video.

Snippet from linked video showing blowing fire particles

I'm assuming this would involve using trigonometric functions to achieve a "wavy" pattern?

My engine is completely from scratch and built on top of Slick2D / LWJGL. I already have a particle system in place that I implemented for everything from simple blood splatter effects to projectiles.

Simple effects like a "spray" or blood splatter are easy, but I don't know how to make something more complicated. I'm not really sure how to make this look like anything but a random burst of small squares or poorly drawn fire sprites.

Improve this question
\$\endgroup\$
2
  • 1
    \$\begingroup\$ I wager that most modern game engines (Unreal, Unity, Lumberyard, etc...) come with a big selection of particle effects built in. The best tutorial of creating better particles of your own will be to examine those samples and tear them apart to see how they work. All of the stand-alone tutorials I know of are purely technical and reveal nothing of the Art of creating a beautiful effect and wouldn't help you. \$\endgroup\$
    – Patrick Hughes
    Feb 13, 2019 at 22:08
  • \$\begingroup\$ Earlier you'd mentioned finding tutorials about making these kinds of effects in Unity or other tools. Have you tried breaking those guides down into steps, and replicating each individual step with an equivalent in your custom engine? Along the way, was there a specific step in the tutorial you got stuck on, that you don't know how to implement in your own code? \$\endgroup\$
    – DMGregory ♦
    Feb 14, 2019 at 3:47

1 Answer 1

Reset to default
4
\$\begingroup\$

An effect like the one you show is actually pretty simple to code.

Create a class Ember that sits at one (x,y) position and randomly spawns 1-pixel particles that move upward (either accelerate upward or move at constant speed as your image). Push each particle into ember.particleList to be used for updates / ticks. Give a 50% chance to spawn new particle each tick.

Next step is moving these particles that are spawned. Every frame (again), make sure that a particle moves one pixel upward and reduces its alpha by some fixed amount. You should now see the particles emerging from the baseline and moving straight up (y), fading alpha, then disappearing.

Next step is wind. You'll need to impart some sideways velocity (x) to all particles already in the air, i.e. all those in ember.list. You have a wind velocity that is a simple float, either positive or negative. Every frame you adjust it by some amount depending on the wind direction shift between -1.0 and +1.0. Say windspeed currently equals -1.0, and your currently calculated windshift is 0.2. -1.0 + 0.2 = -0.8. The windshift should not change too suddenly, by the way, or it will not look good. In nature, wind accelerates and decelerates, like a car. Notice how, because a particle can only shift up to a max of 1.0 pixels left or right in a frame, those particles nearest the top of the flame (the eldest), are those that can have shifted the most.

Now just set up multiple embers running across the screen, and you've got a flame field.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ The only thing I need to work on is generating a decent wind shift value, then. That's the part that I couldn't quite figure out how to do right. Also, my fire looks too uniform... is it that the embers themselves are supposed to have a 50% chance to spawn another ember? Or the "emitter" area? \$\endgroup\$
    – Darin Beaudreau
    Feb 14, 2019 at 13:22
  • \$\begingroup\$ The embers are supposed to have a 50% chance of spawning a new particle vs spawning nothing. Embers are maybe more like coals, you might say - they sit at the baseline of the fire, and you array them in increasing x. You may wish to change this fraction, play with it for denser or sparser flame. You could even make it emit a stream for so many ticks, stop for some time, then emit another stream, short or long. All depends on the look you want to go for. \$\endgroup\$
    – Engineer
    Feb 14, 2019 at 14:56
  • \$\begingroup\$ @DarinBeaudreau About the windshift, look into acceleration and velocity formulas if you don't know them already. That's why I mentioned cars. Your acceleration will be constant, you can flick it left or right, but lets say its always either -0.1 or +0.1 pixel per tick per tick acceleration. This means every tick, your velocity will change by that amount, until the acceleration flips again from positive to negative or vice versa. When the acceleration changes can be based on another chance, say only 5% chance to change wind acceleration direction per tick. Clamp velocity to -1.0 +1.0 range. \$\endgroup\$
    – Engineer
    Feb 14, 2019 at 14:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .