Drawing particle effect sprites

Particle effects like explosions, magic effects, water and smoke can bring any game to life. To get started with particle effects you will first need a sprite to use as a particle. Creating these sprites is can be easy using free software and minimal drawing skills. Let’s get started!

Recommended software

Any image editing software can be used to follow this guide but it’ll need to support basic shape creation, gradients and a (gaussian) blur effect. My recommendation for drawing particle sprites is GIMP, which is available for any operating system. Other options include Inkscape, Adobe Photoshop/Illustrator, Affinity Photo/Designer or Sketch.

Most game engines will expect your particle sprites to have either a solid black or a transparent background. Make sure you save as either one. It’s always best to also keep a separate source file, so you can always come back to your creation and edit it.

Creating sprites

Smoke

Smoke sprites can be created by arranging a bunch of dots in a circular shape. Start by creating four circles, each circle should have a different opacity. The first one is 80% opaque, the second 60%, the third 40% and the last 20%.

Make a few copies of the first circle and start placing them in the middle of the sprite. Keep them close to each other but also make sure there’s some randomness to it. Once done, take the second sprite (60% opaque) and create a circle around the center. Continue doing so until you’ve used all four circles.

After you’re done apply a gaussian blur effect on the sprite until it’s hard to make out each separate circle and it looks like a single cloud of smoke. You can randomize the scale of each circle for greater control over the final sprite.

Smoke sprites are perfect for creating all types of smoke and fog but when colored blue or red can also be used for water or blood.
Star

A star sprite can be used for all kinds of magic effects. Start by creating three circles. Stretch the first one horizontally, and the second vertically. Align the two stretched circles so they cross each other at the center of the sprite. Move the third circle to the center too, as shown in the image. You can optionally add a third ring around the center.

Apply a directional blur if your software allows for it. A horizontal blur for the horizontally stretched circle, and a vertical blur for the vertically stretched one. Then select the vertically stretched circle and also apply a blur, make sure it’s more blurred along the Y axis than the X axis.

Select the circle in the middle and apply a glow effect if available. You can also change the (optionally) added ring from a solid color to a circular gradient.

A star sprite like this is not only perfect for a wide variety of magic and healing effects, but can also be used as a power-up or coming from the thrusters of a spaceship.

Electricity

Creating spark particles is only half of the work, it mostly depends on which game engine you’re using and what features it has in regards to particles. For sparks and electricity like this you’ll usually want to add a noise pattern to the movement, and maybe even a trail.

Drawing the sprite for a spark particle is easy however, start by drawing a horizontal line.

Then add a slightly thinner line that randomly goes through the center line, make sure you start at the same height as you end. Add branches to the line in random directions, just like electricity would spread.

As a final touch you can add a glow effect. If your software doesn’t support glow effects, you can also duplicate the layer and blur the bottom layer for a similar effect.

Depending on which options your game engine provides you can create good lighting effects by randomizing the path of each particle (noise) and by giving each particle a trail.
Window

Sprites like these can serve more purposes than just particle effects. Light cookies (or cucoloris) allow you to add masks to spotlights which changes the lighting shape from round to a custom texture. Most game engines allow for light cookies and they’re great for creating lighting effects like sun rays shining through a window.

To create such a sprite arrange rectangles, circles or other basic shapes into the shape of the window you’d like to project. Add a small amount of blur (or glow) to soften the edges.

This effect can add a lot of atmosphere to your scenes. Draw several vertical bars to simulate a jail window, or add a bunch of random shapes to make it look like leaves while navigating through a forest.

Scratches

You’ll often see scratch particle effects during RPG battles, they can be great to visualize the attack of a wolfs or bears claws. Create three circles next to each other and stretch them vertically, then select them all and rotate 45 degrees (so they’re diagonal). You can optionally add a gradient from transparent to opaque.

You can make the outer scratches a bit smaller for a more dynamic effect. You can also play around with the arrangement of scratches to depict various types of animals.

Muzzle flares

Once you’ve created a few base sprites you can combine them to create new particle effects. Muzzle flares (for weapons) can easily be created by combining a few copies of the smoke sprites we have created earlier.

Place a copy of the smoke sprite just below the middle, about half as small as the original size. Copy that sprite and stretch it vertically. Create two more copies and rotate each 45 degrees in both the left and right directions. Finally, create another copy of the original sprite and place it, slightly larger, between the two rotated sprites.
Final words

Depending on the software you use (both the image editor and the game engine) certain effects might not be possible. Try to be creative with the tools you’re provided and keep the effects simple. Basic shapes, a few tricks and a lot of tinkering will get you pretty far!