Getting Started with Particle Effects in Cocos Creator 3.7.2

Particle effects can make a game more expressive and help draw the player’s attention. A particle system can be used to create explosions, magic, weather, and many other visual effects. This article explains how to use the particle system in Cocos Creator 3.7.2.

You can create an effect yourself, use one supplied by your art team, or obtain a suitable asset elsewhere. The example here uses an effect supplied by an artist.

Create a particle system

In the editor, select Create → 2D Object → ParticleSystem2D.

The editor now displays its built-in particle effect.

Next, replace it with your own effect.

Change the File property

Select the particle node and find File in the Inspector. This property points to the particle configuration, which uses the .plist format. Replace it with your own file.

The editor may now report an error and fail to display the expected effect. This happens when it cannot locate the particle texture referenced by the configuration.

Replace the texture

Enable Custom. The Sprite Frame field will turn red and display Missing Asset. Drag the required particle texture into that field.

The custom effect should now appear correctly.

Export the effect

Finally, export the current particle configuration and use the exported particle file in your project.

Exporting is important. Otherwise, the texture may not be found when the effect is loaded later.

Switch particle effects dynamically

A single node may need to display several effects, with only one active at a time—for example, one effect for victory and another for defeat. You can create one ParticleSystem2D node and replace its File asset as needed.

let parent = node; // Parent of the ParticleSystem2D node
parent.getChildByName("Particle2D").getComponent(ParticleSystem2D).stopSystem();

resources.load(`${FilePath}`, ParticleAsset, (err, particleAsset) => {
    if (err) {
        console.error('Failed to load file:', err);
        return;
    }
    parent.getChildByName("Particle2D").getComponent(ParticleSystem2D).file = particleAsset;
});

parent.getChildByName("Particle2D").getComponent(ParticleSystem2D).resetSystem();