More Fun With Cocos2d Particles 1

My latest attempt is to extend the Cocos2d particle system to include a variety of things, multiple particle sprites, animated sprites, flow fields, and eventually a boids algorithm implementation. Today I have a work in progress class that’s by no means ready for any kind of production. I though I’d share it anyway.

In it’s current form, it’s a class that uses a Texture Packer plist and spritesheet to import an animation into a particle system structure. It also uses a flow field to apply different velocities based on position. I’m trying to put together some environmental effects for a game I’m working on. I’d like to get some interesting birds and leaves flying around.

Here’s what it looks like:

It’s running a little slowly on the simulator, but on my iPad 2 it runs at 60fps. The system is defined as having 5000 particles, but I don’t think it actually has that many on screen at a time.

You may think that the particles are just being rotated and scaled, but they are actually distinct frames to give the appearance that the leaves are twirling around in the wind.

It also changes the flow field based on the angle of a dragged touch. You can see the particle movement changing as I drag the mouse cursor around.

I’m working on a subclass of CCParticleSystemQuad that will incorporate this functionality as well as my previous post on particle systems, but that’s not ready yet. You can download the hacked together code here if you are interested.

It’s full of bugs now, so no complaining . . . or just be ok if I ignore any complaining. For example, the touch input assumes that the orientation is portrait, so even though the view will rotate, the touch input in landscape affects the wrong cell.

Basically, the particle struct needs a couple new values, like the current rect index and the time til we switch to the next frame. That variable gets checked and updated each time step, until it’s time to rotate to the next animation frame when it’s reset.

The system class has a new array of CGRects that define the individual frames from the spritesheet. This is populated from the Texture Packer plist.

I also create an array of values that represents the flow field. A flow field is a grid of cells that correspond to a rectangular section on the screen. In the video the flow field is 16 x 16. Each cell has a float that represents an angle in radians. This angle is applied to the velocity of the particles in the cell each time step.

It’s populated by a perlin noise generator to begin with, then a method updates the values based on the touch input.

In all it’s not too complicated. The difficult part is yet to come, incorporating the changes into an elegant subclass of the original CC2D class.

One comment on “More Fun With Cocos2d Particles

  1. Reply capezzbr Jun 17,2012 11:18 pm

    Very interesting class! thanks for the idea 🙂

Leave a Reply