Dev Blog: Quick and Easy Particle Sprites

Hey Devs,

Today we're going to have a look at how to create particle sprites. There are a great many different kinds of sprites that one can paint however I’ll go through my basic technique here. It is really fast, and easy to get a lot of variation out of.

Starting in Photoshop, I create a new document of 256x256. This is a huge sprite to make; most sprites we use get down-scaled to 64x64 or maybe 128x128. However I like to author my image large enough for the resolution to never become a problem.

With our blank image I use the gradient tool, set to radial from white to black. With the ruler tool I can start the gradient in the very center and drag it out to just before the edge of the document. This is the base that we paint our sprite details onto.

Smoke:

For a smokey particle, I create a new layer and use the Cloud filter. With adjustments from the levels tool I can blend this cloud layer with multiply to make the white base we started with become much more wispy.

The sprite however is now too circular, this can become quite noticeable in particle systems with few particles, to clean this up we can paint black into the base layer, this has the effect of essentially erasing the particle.

Fire:

For a flame effect, you need to know what kind of fire it will be and how your particle effect is going to function. Often you can get away with the same particles you use for your smoke, but if you you want to go the extra mile utilize an eraser with a hard falloff and use the chalk brush preset to give some harder edges to the flame sprite. For added effect you can apply the liquify tool and drag out tendrils of the flame, however this can quickly become messy and look nothing like fire.

Tips:

• You can generate an alpha by pasting the final image into the alpha channel, or if you are working in Unity, you can simply tag the "import Alpha from greyscale" in the texture import options.
• Setting the opacity of the sprite in Photoshop to 60 - 90% will give it a softer feel.
• You could generate a series of these to create a sprite sheet, tweaking them via the warp tool, liquify, etc.
• Be wary of dragging out long tendrils, these will make the sprite much more recognizable in engine.

Applying these techniques can quickly get you a variety of particles and often sprites designed for one thing work surprisingly well for another. Don’t be afraid to use the same sprite again and again but be careful how big and obvious those sprites become as players will pick up on the repetitive nature of them. Really, they are so easy and quick to make that unless you need to cull textures from the project, you may as well make another.

 Cheers guys, I hope this helps out for some quick particles. Timothy