Reza Ghobadinic

Particles

Reza Ghobadinic

Cocos2d-x allows us to have particles effects in our game using its internal particle system classes.

There are two ways to create and adjust particles in your scene.

Create Particles By Code

To create a particle emitter you need an instance of either of these classes.

ParticleSystemQuad inherits from ParticleSystem, but also has its own unique features including:

There are eleven particle preset nodes to start your particles with. These make it easy to create a particle system that looks close to what we want and then adjust them later.

Here is a simple example to create a particle system using these presets.

ParticleSystem* emitter = ParticleFire::create();
this->addChild(emitter);

As you see, it is basically super simple to add a particle system to your scene.

I have made a collection of the look of these particle system presets to compare.

Fire
Sun
Fireworks
Explosion
Galaxy
Meteor
Flower
Spiral
Smoke
Snow
Rain

Download Source

As I mentioned, you can change the parameters of these particles in your code. We will get to that in a bit…

We can also start creating our own particle system by setting all the properties from scratch. The properties of the particle system classes let us alter the result of the presets and also define our particle system when we make our own using code.

When you are designing your own particle look, keep in mind that there are two modes to choose from. The Gravity and the Radius modes!

Gravity Mode (Mode A) properties:

Radius Mode (Mode B) properties:

Properties common to all modes:

Enough talking now! Lets give this a go and create our own custom particle system from scratch. I will explain the code after.

bool ParticlesScene::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Scene::init() )
    {
        return false;
    }

    auto visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    float x = origin.x + visibleSize.width * 0.5;
    float y = origin.y + visibleSize.height * 0.5;
    
    Image *image = new Image();
    image->initWithImageFile("circle.png");
    
    Texture2D *texture = new Texture2D();
    texture->initWithImage(image);
        
    ParticleSystemQuad* emitter = ParticleSystemQuad::create();
    
    emitter->setTexture(texture);
    emitter->setBlendFunc(BlendFunc::ADDITIVE);

    // Common Properties
    
    emitter->setPosition(x, y);
    emitter->setVisible(true);
    emitter->setEmissionRate(50.0);
    emitter->setDuration(ParticleSystem::DURATION_INFINITY);
    
    emitter->setLife(3.0);
    emitter->setLifeVar(1.0);
    
    emitter->setStartSpin(1.0);
    emitter->setStartSpinVar(0.2);
    emitter->setEndSpin(1.0);
    emitter->setEndSpinVar(0.2);
    
    emitter->setStartSize(10.0);
    emitter->setStartSizeVar(5.0);
    emitter->setEndSize(1.0);
    emitter->setEndSizeVar(0.1);
    
    emitter->setStartColor(Color4F(1.0, 1.0, 1.0, 1.0));
    emitter->setStartColorVar(Color4F(1.0, 1.0, 1.0, 1.0));
    emitter->setEndColor(Color4F(1.0, 1.0, 1.0, 1.0));
    emitter->setEndColorVar(Color4F(1.0, 1.0, 1.0, 1.0));
    
    // Mode: Gravity

    emitter->setEmitterMode(ParticleSystem::Mode::GRAVITY);
    emitter->setGravity(Vec2(0, 9.8));
    emitter->setSpeed(10.0);
    emitter->setSpeedVar(2.0);
    emitter->setTangentialAccel(100.0);
    emitter->setTangentialAccelVar(50.0);
    emitter->setRadialAccel(20.0);
    emitter->setRadialAccelVar(5.0);

    // Mode: Radial
    /*
    emitter->setEmitterMode(ParticleSystem::Mode::RADIUS);
    emitter->setStartRadius(10.0);
    emitter->setStartRadiusVar(5.0);
    emitter->setEndRadius(150.0);
    emitter->setEndRadiusVar(20.0);
    emitter->setRotatePerSecond(90.0);
    emitter->setRotatePerSecondVar(20.0);
    */
    this->addChild(emitter);

    return true;
}

The first part of the code is just finding the center of the screen for our particle system position on the screen.

Then we create an Image that we feed to a Texture! That is because particle system needs to show a Texture on each particle for it to be visible.

We create an instance of the ParticleSystemQuad (or ParticleSystem) and then set its parameters. The most important ones are the texture and image blending mode.

The other properties are quite self explanatory! Things like visibility, duration, emitting rate, gravity, spin angles, start and end colors, start and end sizes, etc…

I recommend to spend some time and play with those values to see what they do and get a hang of it before moving on.

Download Source

Create Particles By Using Particle Designer

Designing particle systems in code can be a bit difficult as you don’t get an instant visual feedback of how your particle looks by changing its properties. Particle Designer lets you develop a particle system in real time and save the emitter as a .plist file that you can load into Cocos2d-x. It makes creating particles easier and much more fun.

Here I have chosen a preset from the pre-made particles as an example to bring into XCode.

If you press the button that I put a red rectangle around, you will get these four pages of particle settings to change the look of your particle.

Lets say we like what we see and we don’t want to change anything. Now we can export this to use in our project.

First we select the particle layer that is called untitled, press Cmd+S to rename it and then save the project. I called it “Funky”! Set the export settings to .plist and press the big export button, specify the folder and voila!

The export will save you a Funky.plist in the Resources folder. But, you need to also copy a texture Funky.png in that folder for it to work. I just copy the circle texture from the previous custom example in here and rename it for now.

We just add it to our XCode project and write the code to load it this way:

    auto visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    
    float x = origin.x + visibleSize.width * 0.5;
    float y = origin.y + visibleSize.height * 0.5;
    
    ParticleSystemQuad* emitter = ParticleSystemQuad::create("Funky.plist");
    emitter->setPosition(x, y);
    this->addChild(emitter);

Download Source

Exit mobile version