So I’m working on a new game, Relay. It’s a game about sending morse code during WW1. I originally made it during Ludum Dare, and I got some great responses to my game, so I decided to make a fuller, more polished version. While waiting for me to finish this newer version, you can play the Ludum Dare version now!



I’ve changed the art style a lot from the original LD version. It was just low fi 3D. But since I’m not great at 3D modelling, I decided to got for something different, a photo comp effect where everything is just made up of real world photos mashed together.

One of the elements I added recently was a mug of nice, hot coffee. I wanted to have a nice steam effect, but to fit the feel, it had to be fairly realistic.

I couldn’t really find much reference to how others have done this effect in the past, so while poking around with some old methods I knew about, I stumbled on a really simple trick that produces quite a realistic smoke effect with very little artistic talent or effort!

HOW I DID THE THING

First, making the steam image itself. What we want to end up with is a tiling steam image that we can then scroll the UV coordinates in Unity.

Open Photoshop, or what ever image editor you use, and create a new image, roughly 400x800 px in size

Next fill the background black so you can see whats going on.

On a new layer draw some squiggly lines using a 40px brush set to 0% hardness. It doesn’t matter if the lines are a bit rough, it’ll all work out in the end. I’m doing mine on a laptop with a trackpad, nothing fancy here.

Now to apply some blur and turn those squiggles into steam!

Then, you need to make the image tile, and make it more steam like. To do this, use the offset filter so you can edit the seam, and then use the smudge tool and swirl it around to make it much more natural looking.

Now just turn off the black background layer, and save off the image as a .png file.

Now, in Unity, after you’ve imported the image into your project, you want to apply the following import settings:

The key is to set the wrap mode to Repeat, this allows the texture to scroll nicely.

Now to set up the image itself. I’m doing this effect using the new UGUI system, but this would also work with just a 2D sprite. I use a raw image as I can modify the UV Rect, without having to mess with the material. Here I’ve just applied the sprite to the image and set a good width and height.

Then to do the animation, I just attach a small script to scroll the UV’s:

CODE:

using UnityEngine;

using UnityEngine.UI;

public class UVScroll : MonoBehaviour {

public float speed;

private RawImage _img;

void Start () {

_img = GetComponent<RawImage>();

}

void Update () {

Rect r = _img.uvRect;

r.y += speed;

_img.uvRect = r;

}

}

Then, to give the animation a nice fluid effect, I just duplicate the gameObject, remove the animation script, offset it a little and lower the opacity. When the animated sprite moves over the top of the duplicate gameObject, the transparency in the images blends nicely to give it the feeling that its a very fluid, complex effect.

And thats it! Nothing else is needed, no crazy shader effects or anything, just a simple, scrolling texture.