How to make 2D cel shaded and outlined smoke

The end result – Cel shaded and outlined smoke in 2D

Here’s a short tutorial on how to achieve this pretty cool effect using Unity, that we’re currently trying out in our game Space Chef which is based on hand drawn 2D graphics. Follow us on @bluegoogames to see more cool stuff from the game.

Just to be clear, I didn’t quite invent this, but mostly put it together based on this tutorial and added a toon lit shader. You can download the full source for the outline effect from this github repo at and read a lot if you want to get into the nitty gritty details of how it works. This guide is basically just how to hack this together like I did..

I will assume you start from the project above.

1) Create the Toon shader

First download the Toon Lit Stencil Shader from here: ToonlitStencil.shader. It appears to be from Unity’s standard assets. Create a new material “Dark” that uses this shader. Set the Ramp Strength to 0.4

2) Load your 2D graphics into the scene

Now load your hand drawn background into the scene as a sprite. In my case, the outlines are drawn at 6px.

3) Create a particle system

Then create a new particle system and set it up something like this. The important part here is the Renderer module, where you use a Sphere mesh which is the actual particles, that will be toon shaded.
Also, size over lifetime might look better than alpha due to the outlines don’t work well with alpha.

How to set up the renderer on the particles

Basic particle system setup

Just tweak the emission to your likings

Size over lifetime curve, tweak it!

4) The Camera Post processing

To get the outline of the particles, there is a post processing effect “Post process outline” where you can set the Scale of the outlines. I’m using 3, and I’m on a Retina mac, so you might need to double this to get the correct outline.

Camera setup with Postprocessing layer

Camera post processing

You can control the outline width here.

5) Directional Light

The directional light controls how the shadow on the spheres look

Setup the light where you want the shadows to be.

6) Conclusion

I think this should be it! I’m sorry if the tutorial wasn’t very detailed, but for all you people out there that are lazy like me, here’s a repo to get it all, and then you can play with it.

Also I haven’t figured out if it’s possible to change the line width, depending on the camera zoom, as the outlines stay the same, so that’s a problem…

Please Tweet me on @bluegoogames and tell me if you tried it, and to see more cool stuff from our game Space Chef.