Making smoke or steam?

Broadly speaking, I think most of the examples you'll find will be based on the same principle: creating little images (of little blobs, wisps, or clouds), randomising them a little bit, and subtly modifying them over time. The more things you randomise and/or modify over time, the more satisfying the effect will be. It's one of those times when the maxim less is more definitely does not apply. The more simultaneous (but subtle) changes you can apply to your shapes, the harder it will be for the player's brain to decipher the mechanics of the movements, and therefore the more organic the animation will appear.

It also means that you can get a very nice looking and ultimately quite complex animation using quite simple building blocks that you can easily add one by one if you have the patience. For starters, randomise how often you create these little images. Then randomise their starting angle, alpha, Xscale, Yscale, and RGB tint. Every time you create an image, you also set up some randomised parameters that you'll use to modify that specific instance over its lifetime. Then you continually modify the xScale/yScale/alpha of each image according to its own parameters. This will result in some images spinning clockwise and growing, while others spin anti-clockwise and shrink, for example. Of course, you need to keep the parameters within sensible bounds (squashing an image to xScale=1.2 & yScale=0.95 will look good, while xScale=1.2 & yScale=0.05 will look terrible).

You can modify certain attributes in a linear way (eg. add n to angle each frame, to make it constantly rotate) or using sine (eg. set angle to sin(timer)*20, to make it smoothly pivot on a 20° angle ). Or a bit of both.

When you set up each image, you also give it a unique "lifespan" altVal, and you fade in, fade out (and eventually destroy) each image according to its own 'lifespan', so that some images remain longer than others.

Now, you can achieve quite a lot using just a single still image that you duplicate and manipulate in all the ways mentioned above. But you can of course get an even better effect if you use actual hand-baked animations that you've made. I believe this is what's happening in Plate Up. If you look closely, you'll start to notice similar patterns of movements in some of the steam objects. Their alpha/scale/angle/etc. is randomised, but they also seem to have a nice swirly organic motion to some of the elements, and if you look long enough you can spot these swirly animations repeating on different plates. You'll need to use an animation program to hand-make a similar animation (or create them frame by frame in a graphics program).

Please login to see this picture.

Above is a snippet of some fog in one of my worlds that's created using the sorts of methods described above. Each fog element is a bouncing ball object that will loop across the gameworld infinitely, and contains a still image randomly chosen from the following 4 images:

Please login to see this picture.

At the start of the level, I create a bunch of them and randomise their speed, alpha, scale, etc. I then use some of these randomised parameters to continually modify their angle/scale/etc. while the game is running.

Please login to see this picture.

thank you.

is it possible to post the png of fog please?

Quote from fredetmumu

thank you.

is it possible to post the png of fog please?

Sure. Here you go.

May I ask if you can send it MFA instance? Thank you

That looks awesome! 🤘 Volnaiskra

Volnaiskra , very impressive !

Of course, another good way to make smoke is to go 180° and take away the programmatic element almost entirely, and simply animate it all by hand. This is probably the best approach if you want the result to have a cartoony aesthetic.

Please login to see this picture.

I highly recommend the book Please login to see this link. by Joseph Gilland for animation tips.

And Stylus Rumble on youtube has some particularly good tutorials on how to hand-animate FX which I have benefitted from. For example: Please login to see this media element.