Developers Manual > Cocos2d-x > Advanced Features > Particles

Particle System


The term particle system refers to a computer graphics technique that uses a large number of very small sprites or other graphic objects to simulate certain kinds of “fuzzy” phenomena, which are otherwise very hard to reproduce with conventional rendering techniques - usually highly chaotic systems, natural phenomena, and/or processes caused by chemical reactions.

Point vs Quad

In early versions of Cocos2d-x, there were two types of particle system in cocos2d-x: Quad and Point particle system:

  • CCParticleSystemQuad

  • CCParticleSystemPoint

The CCParticleSystemQuad has these additional features that CCParticleSystemPoint doesn’t support:

  • Spinning particles: particles can rotate around its axis. CCParticleSystemPoint ignores this property.

  • Particles can have any size. In CCParticleSystemPoint if the size is bigger than 64, it will be treated as 64.

  • The whole system can be scaled using the scale property.

Because CCParticleSystemPoint does not support CCParticleBatchNode, it has been removed from cocos2d-x particle system.


A CCParticleBatchNode can reference one and only one texture (one image file, one texture atlas). Only the CCParticleSystems that are contained in that texture can be added to the CCSpriteBatchNode. All CCParticleSystems added to a CCSpriteBatchNode are drawn in one OpenGL ES draw call. If the CCParticleSystems are not added to a CCParticleBatchNodethen an OpenGL ES draw call will be needed for each one, which is less efficient.

Creating a Quad Particle System

    CCParticleSystemQuad* m_emitter = newCCParticleSystemQuad();
    m_emitter = CCParticleFire::create();

Gravity vs Radius mode

Gravity Mode

Gravity Mode lets particles fly toward or away from a center point. Its strength is that it allows very dynamic, organic effects. You can set gravity mode with this line:

    // Gravity Mode
    this->m_nEmitterMode = kCCParticleModeGravity;

    // Gravity Mode: gravity
    this->modeA.gravity = ccp(0,-90);

These properties are only valid in Gravity Mode:

  • gravity (a CGPoint). The gravity of the particle system

  • speed (a float). The speed at which the particles are emitted

  • speedVar (a float). The speed variance.

  • tangencialAccel (a float). The tangential acceleration of the particles.

  • tangencialAccelVar (a float). The tangential acceleration variance.

  • radialAccel (a float). The radial acceleration of the particles.

  • radialAccelVar (a float). The radial acceleration variance.

Radius Mode

Radius Mode causes particles to rotate in a circle. It also allows you to create spiral effects with particles either rushing inward or orating outward. You set radius mode with this line:

    // Radius Mode
    this->m_nEmitterMode = kCCParticleModeRadius;

    // Radius Mode: startRadius
    this->modeB.startRadius = 0;
    this->modeB.startRadiusVar = 0;//ccp(0,0);

These properties are only valid in Radius Mode:

  • startRadius (a float). The starting radius of the particles

  • startRadiusVar (a float). The starting radius variance

  • endRadius (a float). The ending radius of the particles.

  • endRadiusVar (a float). The ending radius variance

  • rotatePerSecond (a float). Number of degress to rotate a particle around the source pos per second.

  • rotatePerSecondVar (a float). Number of degrees variance.

Properties common to all modes

Common properties of the particles:

  • startSize: Start size of the particles in pixels

  • startSizeVar

  • endSize: Use kCCParticleStartSizeEqualToEndSize if you want that the start size == end size.

  • endSizeVar

  • startColor (a ccColor4F)

  • startColorVar (a ccColor4F)

  • endColor (a ccColor4F)

  • endColorVar (a ccColor4F)

  • startSpin. Only used in ParticleSystemQuad

  • startSpinVar. Only used in ParticleSystemQuad

  • endSpin. Only used in ParticleSystemQuad

  • endSpinVar. Only used in ParticleSystemQuad

  • life: time to live of the particles in seconds

  • lifeVar:

  • angle: (a float). Starting degrees of the particle

  • angleVar

  • positon: (a Point)

  • posVar

  • centerOfGravity (a Point)

Common properties of the system:

  • emissionRate (a float). How many particle are emitted per second

  • duration (a float). How many seconds does the particle system (different than the life property) lives. Use kCCParticleDurationInfinity for infity.

  • blendFunc (a ccBlendFunc). The OpenGL blending function used for the system

  • positionType (a tCCPositionType). Use kCCPositionTypeFree (default one) for moving particles freely. Or use kCCPositionTypeGrouped to move them in a group.

  • texture (a Texture2D). The texture used for the particles


cocos2d-x comes with some predefined particles that can be customized in runtime. List of predefined particles:

  • ParticleFire: Point particle system. Uses Gravity mode.
  • ParticleFireworks: Point particle system. Uses Gravity mode.
  • ParticleSun: Point particle system. Uses Gravity mode.
  • ParticleGalaxy: Point particle system. Uses Gravity mode.
  • ParticleFlower: Point particle system. Uses Gravity mode.
  • ParticleMeteor: Point particle system. Uses Gravity mode.
  • ParticleSpiral: Point particle system. Uses Gravity mode.
  • ParticleExplosion: Point particle system. Uses Gravity mode.
  • ParticleSmoke: Point particle system. Uses Gravity mode.
  • ParticleSnow: Point particle system. Uses Gravity mode.
  • ParticleRain: Point particle system. Uses Gravity mode.


Particle System in cocos2d

Gravity_mode.png (112.7 kB) iven, 2013-01-17 08:41

Redius_mode.png (106.4 kB) iven, 2013-01-17 08:41

particle_graph.png (54.7 kB) iven, 2013-01-17 08:50

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.