as you might expect, I have got a game in development, including a main character—fortunately…

This character is on the one hand represented by a bunch of Box2D bodies and on the other hand, graphically, by a bunch of SVG-Elements. The character is a floating one, a kind of Hovercraft, basically based on this tutorial, but more sophisticated all in all.

The character can jump, too. To visualize the impulse, which gives the »jump-power« some fire blow out of its very ass straight ahead, what should be animated, during its short visible time.

Question: How to animate that bespoken fire? I could use plain css, or JavaScript, or even SVG-Animation Tags themself, BUT I would like to ask for the preferred weapon of choice, faced to the fact that time is running out (less than 3 days) AND flexibility needed for the customer?

Intentionally I am not posting any code, since I can imagine a solution based on each one of the methods mentioned above, this question is meant to issue the pros and cons, due to time and flexibility.

In this case, all graphics (world, fire, ass, character) are given in SVG and are meant to be displayed as that, whereby the connection between physics and graphics is established by the use of R.U.B.E. I am searching for the most painless way of realization for the ass on fire.

Thanks for reading and kind regards to the community!


This sounds like a good use for a particle effect.

When the fire is on, spawn multiple, small dots each frame. Assign a slightly different angle (generally facing downward) and slightly different velocity to each particle. Gradually change the color of each particle from yellow to dark-red over the course of its lifetime and remove it when it has reached the final color.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.