Creating 2D Particle Effects in Unity3D

Hello, my name is David Finseth and I am a Technical Artist at Synapse Games. I work across multiple games to create visuals that require some technical and artistic components. A big part of my job is working on particle effects for our mobile games. I am very passionate about this work and wanted to share my process and some tips for creating these effects with you.

Particle effects are a unique tool that can add interactivity and responsiveness to your games. They excel at creating a lot of movement and impact. Particle effects can be used to create magical fireballs, swirling dimensional portals, or for directing the player's attention to a glowing treasure chest.

First, I am going to break down the process that I go through when I make particle effects in Unity. Later I will go over some technical tips and tricks. Most of these examples are from work that I did on the games Spellstone and Animation Throwdown.

The Process

Breaking down the requirements:

The first thing I do when I start to make a particle effect is ask questions to define the requirements for the effect. The answers to these questions act as a restriction and give guidance to how the effect should look and feel.

Sketch the concept:

Next I concept what the effect might look like as a whole. I focus on the look and feel of the entire effect, and I am not worried about how I will actually make the thing. If the effect involves a lot of movement this might look more like a storyboard. If the effect is static, like a glowing aura around a magical wand, then a simple sketch usually does the job.

Construct the concept using multiple components:

Most effects are created by layering several components on top of each other. This is where I start to actually play around in Unity. I find it helpful to start with the largest element of the effect and then work to the smallest, or, if it's a sequential effect, I will work from beginning to end.

Testing

Effects are usually tied to technical elements of the game, so it is important to test the effects and iterate on them based on how they look while playing the game. I often will change the timing of an effect, the scale, and the pacing in order to get it to look just right when it is triggered. We want our effects to feel responsive! After I have verified that everything looks correct in the game the process is complete.

Now let's walk through this process using a few examples from Spellstone and Animation Throwdown.

Rarity Card Glows in Animation Throwdown

Breaking down the requirements:

Sketch the concepts:

Construct the concept using multiple components:

The particle system is made up of several different components that are layered.

Testing:

While testing these glows we discovered that the effect was too large and could clip into other cards in your hand. To fix this I ended up simplifying the effect to make it fit on all the screens and popups. This is an example of why testing is so important when working on effects.

Spellstone Frostbite Raid

The final frost beam effect from Spellstone’s Frostbite Raid.

Breaking down the requirements:

Sketch the concept:

This particle system really needs to convince the player that this two-headed dragon is a fierce opponent. I wanted the frost breath to be a physical beam of ice and snow. I tried to keep these particles more opaque as opposed to a breathy or transparent effect, which might have less of an impact when the dragon blasts the guild castle.

Construct the concept using components:

Multiple components are layered to create the final frost beam effect.

I use a 2D beam texture that scales across the screen to create the base beam effect. Particle effects are then added to break up the straight line of the beam and to give it a directional flow.

Triangular projectiles are added on top. These sort of give the feel of icicles being shot out of a dragon's mouth.

The beam gets an end particle burst to hide the edge of the beam plane and also show where the impact is happening on the castle.

Testing

This effect worked great in game and there were no significant problems getting it to work with the rest of the animations in this scene.

Tips and Tricks:

Ready to make your own 2D particle effects in Unity3D? Here are some useful tips that will make the process a little easier for you.

Shape

The most useful shapes for 2D are going to be Box, Circle and Edge. When using the Box shape I turn the Z dimension to 0 to eliminate depth. The circle shape is useful when you want to shoot particles out radially from a center point.

Rotation, Scale, Gravity, and Force over Lifetime are the main components I use to add motion to 2D effects. Gravity is fantastic for moving the effects along the Y axis, and Force over Lifetime is what I usually use to move particles on the X axis.

Render Mode: Stretched Billboard

Using the Stretched Billboard render mode can give particles the ability to grow or shrink along an axis if you have the Speed Scale set. This can be used to create some really interesting effects and to get more range out of your static textures.

A simple circular texture like this one becomes explosive lines when using Stretched Billboard.

A triangle particle can squash and stretch to show speed when using stretched particles.

Emission by Distance

Changing the particle emission component to distance makes the emitter shoot particles when it has been translated in space. I often use this for projectiles, but it can also be useful if you want to animate particles along a path.

Spellstone’s Imbue skill uses distance particles to outline the card.

Texture Sheet Animation

The Texture Sheet Animation component can be used when you want to mix sprite sheet animations with particle effects. I use this component when I want to create more stylized 2D effects.

Texture Sheet Animation on a particle system that scales over time to create an explosion.

The texture used for the particle system.

Further Reading

If you want to learn more about effects and Unity’s particle system, check out these helpful resources.