Unity: Particle System 2D Sparks
Particle System is a great addition to your Unity toolkit, it can drastically improve Look and feel of your game. Some of you have asked me about this effect from Zen Jigsaw that is used when puzzle pieces are joined:
And I’ve decided to conduct a small tutorial into Particle System in Unity. This article will have lots of images and no coding at all.
Prerequisites
I am using Unity 2019.3 and Adobe Photoshop CC 2015 for image creation. While technically you don’t need to make an image on your own as something appropriate can be found on free images stocks, for such simple cases I prefer to make graphics myself. You don’t need to be a professional artist or designer to do this, believe me.
As always, project sources are available at GitHub, find the link is at the end of the page.
There are two parts: image making in Photoshop and effect creation using Particle System in Unity.
Part 1. Making Spark image
Please, don’t be scared of Photoshop — it is extremely easy to create a simple graphics there.
First, create a new canvas 500x500 pixels
Select Custom Shape Tool
And choose a shape of your likeness
I’m using standard shape called “Starburst” (8th in the bottom row)
It will be easier to adjust color directly in Unity, therefore select white color for Fill and Stroke
Press on the canvas to open “Create Custom Shape” window, set Width and Height accordingly
Adjust the position of the shape on the canvas
Save as type PNG to keep transparency.
That’s it, Spark image is done!
Part 2. Particle System
For this tutorial we will be using single sprite with Particle System attached to a child object. It will have “Play on Awake” set to true, so the effect will be triggered on a game startup.
Let’s start by creating a material that will be a base sprite for the effect. Click Create>Material, select the “Particles/Standard Unlit” shader with “Additive” rendering mode and “Multiply” color mode.
In order to select the Spark image click on the small circle next to Albedo under the Maps section and find the sprite in the pop-up window.
Note! Materials and shaders are two separate big’n’scary topics which I deliberately kept aside from this tutorial. But I encourage each of you to look through the official Unity Manual of Standard Particle Shaders.
Now it is time to build the effect itself! Navigate to the Spark child object and add the Particle System component on it. Next thing, drag and drop newly created material on the Renderer>Material field
If you now have particle effect selected in Hierarchy and it is not paused, you will see sparks flying all over:
Looks cool already, but not exactly what we wanted to achieve, let’s tweak it further.
First, we should adjust the Main section (it has the same name as the game object it is attached to). Here we should set Duration to 2, Start Delay to 0, Start Lifetime to 3, Start Speed to 0, Start Size to Random between 0.55 and 0.75, Simulation Speed to 5 and Max Particles to 50. Refer to the following image:
Next, since the effect should appear around the puzzle piece a proper Shape, Donut in this case, should be chosen. Set Radius to 1.1 and Donut Radius to 0.2 and keep other values by default:
Now, let’s get the particles moving with the help of Velocity over Lifetime. Here, we set Speed Modifier to 2 and keep the rest as-is:
To have a nice fading out effect we will enable Color over Lifetime and use Gradient with the second color Alpha set to 0:
As the very last step we will add a little bit of life into the effect with Rotation over Lifetime and its Angular Velocity field set to 45:
The final result looks like this:
Afterwards
Well done finishing the tutorial! Please, play around with the settings to achieve best looking results for your project!
Should you have any questions please leave them in the comments section below.
The project source files can be found at this GitHub repository.
The game I was referring to is available here Zen Jigsaw.
Support
If you like the content you read and want to support the author — thank you very much!
Here is my Ethereum wallet for tips:
0xB34C2BcE674104a7ca1ECEbF76d21fE1099132F0
