Improving the Particle System

[ LiB ]

So far I've only scratched the surface of what ActionScript can do. When designing a particle system, let your imagination run wild. Get a pen and pad and start writing down attributes of the system you want to imitate.

Let's start our snowing demo for example. I must admit it does look cool, but it gets boring quickly because the snow is coming straight down. It seems as though wind doesn't exist in that world.

How on earth would you do this? It's not like you could just blow on your monitor and make the snow sway to one side. Remember that whole concept of OOP? Welllet's use it. Let's add the WindPush property to each snowflake . This property will hold the direction and velocity (referred to as a vector quantity , but I'll discuss that later) of the wind forces.

Once you have this set up, all you have to do is apply these forces to each snowflake horizontally. Apply the force by adding it to its _x property. And that's it.

Now let's stop chatting and whip out the snow demo and modify it. I saved it as GDA_PROG6.4.fla. I modified the code just as I said here. Go ahead and play the file GDA_PROG6.4.swf. It looks much more interesting, and all I did was add wind. Go figure.

Here is the new listing:

 onClipEvent(load) {   // Initialize   // Math.random returns a number from   // 0 to 1. By multiplying a number,   // you can get it to return a certain   // range of numbers.   this._x = Math.random()*320; // Returns 0-319   this._y = Math.random()*240; // Returns 0-239   speed = Math.floor(Math.random()*3)+6;   // **** NEW LINE ****   WindPush = 2; } onClipEvent(enterFrame) {   // Moving code is here =)   this._y += this.speed;   // **** NEW LINE ****   this._x += this.WindPush;   if (this._y > 240) this._y = 0;   // **** NEW LINE ****   if (this._x > 320) this._x = 0; } 

I have added three new lines that made a world of a difference. I commented over them so you can spot them easily.

The following line is the first that I added in the onClipEvent(load) handler inside the Movie Clip that will be duplicated :

 // **** NEW LINE **** WindPush = 2; 

This will cause all additional clips to contain similar code. As a matter of fact, it's the exact same code that produces different results thanks to that Math.random method.

Just like the speed attribute that we added earlier, I added the WindPush property and initialized it to 2. Now that we have a new property, it's time to do something with it.

The next line I added was in the onClipEvent(enterFrame) handler which is also in the Movie Clip that will be duplicated. Here it is:

 // **** NEW LINE **** this._x += this.WindPush; 

As WindPush is 2 for all the duplicated Movie Clips, they will all move two pixels to the right on each frame. This is where the wind effect is achieved. But what do you do when a snowflake Movie Clip reaches the end of the screen? Simplejust wrap it around the left side. This is the code that I wrote for that:

 // **** NEW LINE **** if (this._x > 320) this._x = 0; 

All it is saying is that if _x is past 320 pixels to the right, wrap the Movie Clip back to 0.

Go ahead and play with the example. Make sure you understand everything that is going on. If you don't, go back to the beginning of this chapter where I explained how the rest of the code works. When you understand that fully, try adding your own properties.

Before I finish up this chapter, I want to show you that a creative mind is never finished with its work. In our world, nothing is perfect. Nothing in nature is uniform. Let's be realisticthe wind should not push our snowflakes at the same rate. As we are defying that concept in our demo, I decided to write some code that would give the snowflakes different velocities by using our random number-generating friend. Check out GDA_PROG6.5.swf for the playable demo and GDA_PROG6.5.fla for the project file.

Observe the following listing. Here you will see the last tweak of the chapter. It can be tweaked even moreit's up to your observation of the real world and your imagination.

 onClipEvent(load) {   // Initialize   // Math.random returns a number from   // 0 to 1. By multiplying a number,   // you can get it to return a certain   // range of numbers.   this._x = Math.random()*320; // Returns 0-319   this._y = Math.random()*240; // Returns 0-239   speed = Math.floor(Math.random()*3)+6;   // **** NEW LINE ****   WindPush = Math.floor(Math.random()*6)+1; } onClipEvent(enterFrame) {   // Moving code is here =)   this._y += this.speed;   // **** NEW LINE ****   this._x += this.WindPush;   if (this._y > 240) this._y = 0;    // **** NEW LINE ****   if (this._x > 320) this._x = 0; } 

As you can see, one little line does make a difference. The line that I'm talking about is the line where the WindPush property is being initialized. Take a look:

 WindPush = Math.floor(Math.random()*6)+1; 

This calculation is assigning a value in between the range of 16. I'll break it down piece by piece for you. The random method returns a number from 0 to almost 1 and when multiplied by 6 it will yield a number from 0 to almost 6. When you apply the floor method, it will restrict the values to whole numbers from 0 to 5. I added 1 to make the range 16. This is the possible range of WindPush values for each snowflake.

NOTE

NOTE

Doesn't it seem as if there are a lot more snowflakes in this demo than in the first one? Well, there are more flakes. I amped up the number to 100 from the original 50.This value can be changed in the code that's on the main Timeline within the first frame.The name of the variable that controls this is numPart .

Now that you get the idea, you're ready to move on to some newer topics. Before you do, go ahead and review what you learned and try the chapter exercise.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net