cocos-particle

Cocos Creator 3.8 particle system

Task objectives

This Skill is used to: master creating effects with the Cocos Creator particle system
Capabilities include: 2D particles, 3D particles, particle editor, effects creation
Trigger conditions: creating game effects such as fire, smoke, explosions, etc.

Overview

The particle system is the foundation of effect rendering in game engines. It can be used to simulate natural phenomena such as fire, smoke, water, clouds, snow, and falling leaves, and can also be used to simulate abstract visual effects such as glowing trails and speed lines. Cocos Creator supports both 2D and 3D particle systems.

Particle components

ParticleSystem2D (2D particles)

import { ParticleSystem2D } from 'cc';

const particle = node.addComponent(ParticleSystem2D); particle.file = particleAsset; // Plist format particle.emitRate = 100; particle.duration = -1; // continuous emission particle.autoRemoveOnFinish = false;


### ParticleSystem（3D 粒子）
```typescript
import { ParticleSystem } from 'cc';

const particle = node.addComponent(ParticleSystem);
particle.mesh = meshAsset; // 可选，自定义形状
particle.particleCount = 200;
particle.startSize = 0.5;
particle.startSpeed = 5;

Particle properties

Emission properties

duration: duration (-1 permanent)
emissionRate: emission rate
loop: whether to loop
playOnLoad: play on load

Lifetime

startLifetime: initial lifetime
startDelay: start delay

Spatial properties

startPosition: initial position
startRotation: initial rotation
startSize: initial size

Motion properties

startSpeed: initial velocity
velocityModifier: velocity modifier
gravityModifier: gravity modifier

Appearance properties

startColor: initial color
endColor: end color
startOpacity: initial opacity
endOpacity: end opacity
startScale: initial scale
endScale: end scale

Color gradient

const colorOverLifetime = particle.colorOverLifetime;
colorOverLifetime.enabled = true;
colorOverLifetime.color = new Gradient();

const gradient = new Gradient();
gradient.addColorStop(0, new Color(255, 255, 255, 255));
gradient.addColorStop(1, new Color(255, 255, 255, 0));
colorOverLifetime.color.colorKeyframes = [
    { time: 0, value: new Color(255, 255, 255, 255) },
    { time: 1, value: new Color(255, 255, 255, 0) }
];

Shape module

Sphere/hemisphere shape

import { ShapeModule } from 'cc';

const shapeModule = particle.shape;
shapeModule.enabled = true;
shapeModule.shapeType = ShapeModule.Type.Sphere;
shapeModule.radius = 2;
shapeModule.arcSpeed = 30;

Cone emission

shapeModule.shapeType = ShapeModule.Type.Cone;
shapeModule.angle = 30;
shapeModule.emitFrom = ShapeModule.EmitLocation.Base;

Emitter module

Curve editing

import { CurveRange } from 'cc';

particle.startSize.mode = CurveRange.Mode.Curve;
particle.startSize.curve = new Curve();
particle.startSize.curve.addKey(0, 1);
particle.startSize.curve.addKey(0.5, 2);
particle.startSize.curve.addKey(1, 0.5);

Script control

Playback control

// 播放
particle.play();

// 暂停
particle.pause();

// 停止
particle.stop();

// 清除
particle.clear();

Dynamic modification

// 修改发射速率
particle.emissionRate = 50;

// 修改速度
particle.startSpeed = 10;

// 修改颜色
particle.startColor = new Color(255, 0, 0, 255);

About this skill