Particles, Particles Everywhere

   One of my tasks in the past week was to add particles when a player finds a piece of gold. The final result can be found here: Bomb Diggity. My team decided that adding these particle effects is important; showing the player that they received gold and making them feel good about it at the same time.

   To achieve the particle effects that I got I used three different tools. I used Starling Particle Systems which can be downloaded here: Particle System. The tool I used to make my own particle effects was this particle editor. There you could export a .pex file which Starling utilizes. To achieve the particles moving from one spot to another I used the Tweenlite library. Now let's get to the code!


   First thing I did was embedding the particle effect.

[Embed(source="../media/particles/GoldRevealParticle.pex", mimeType="application/octet-stream")]

public static var GoldRevealParticle:Class;

   
   With the particle now embedded, I am able to use the particle in the program. I have made a method that initializes the particle effect and adds the particle to the screen when the method is called.

private function goldReveal(xPosition:int, yPosition:int):void

{

goldRevealParticle = new PDParticleSystem(XML(new                                AssetsParticles.GoldRevealParticle()), Texture.fromBitmap(new AssetsParticles.ParticleTexture()));

Starling.juggler.add(goldRevealParticle);

goldRevealParticle.x = xPosition;

goldRevealParticle.y = yPosition;

goldRevealParticle.scaleX = 0.09;

goldRevealParticle.scaleY = 0.09;

goldRevealParticle.start(0.5);

addChild(goldRevealParticle);

}

   After the particle is initialized, I use Starling's juggler in order to animate the particle when the particle is added on screen.  Then I position the particle with the parameters passed through, which would be the location of the gold. Next thing I do is scale the scale the particle to be the size of the gold. After this, I start the particle and give it half second duration on screen. At the end of the method I add the particle to the screen when the method is called.


   Now that I have shown an example on how to spawn a particle. I am going to show how move a particle from one place to another. This is where TweenLite is used.

goldTrail(map[row][column].positionX, map[row][column].positionY);

TweenLite.to(goldTrailParticle, 2.5,{x:goldMoveX , y:goldMoveY , delay:1});

 
   The first thing I did was call the method that spawns the particle I am going to move. This method is very similar to the example I used above. Then using TweenLite, I use the 'to' call which moves an object from point 'a' to point 'b'. The parameters that are being pass are the object that is going to be moved. Second, how long it takes to get to point 'b'.  And third, you passing where location 'b' is. Doing all this will move the starting location of the particle to the location where the gold counter is, showing the player that they have collected gold.