Star Field Optimized

June 1st, 2008

This sort of method is very useful for creating a star field. With a lot of stars. I thought of this method when reading through the book “Macromedia Flash Professional 8 Game Development” by Glen Rhodes. In his book he provides an example of creating a star field with a effect called “parallax”. A parallax effect is created by multiple objects moving at different speeds. For example, a small ball in the distance would move very slowing and a large ball would move more quickly. Both the balls are on the same level/depth, but the appearance of the different sizes and speeds give it the effect. Parallax effect is highly used to create a 3D environment.

The script below is not from book mentioned, but is very similar:

[as]
function rand(min:Number, max:Number):Number {
return Math.round(Math.random() * (max – min)) + min;
}
for(var i:Number = 0; i < 1000; i++) { var mc:MovieClip = attachMovie("Star", "star_" + i, i); mc._x = rand(0,Stage.width); mc._y = rand(0,Stage.height); mc.dist = rand(10,200); mc._xscale = (1000 / mc.dist); mc._yscale = (1000 / mc.dist); mc.speed = (20 / mc.dist); mc.onEnterFrame = function() { this._x += this.speed; if(this._x > Stage.width) {
this._x = 0;
}
}
}
[/as]

1 – 3. A simple random number function to bring back a number between two desired minimum and maximum values. Behaves exactly like PHP’s rand() function
4. Begin the for loop, creating 1000 stars
5. Declare a variable mc, holding, and adding, the movie clip from the Library to the stage
6 – 7. Random position on the stage
8. Giving the star a random distance (“dist” for short)
9 – 10. Setting the _xscale and _yscale of the star to fit the stars distance (so if the stars distance is high, the _xscale and _yscale will be smaller and vice versa)
11. Set the correct speed with the star. Again, if the stars distance is high, the speed will be slow, etc.
12. Declare onEnterFrame function to loop the animation
13 – 16. Move the star from left to right. Once the star gets to the edge, move it back to the beginning
18. End the for loop

Here is the result:

A very nice and effective effect. However, how can we optimize this script? It is already doing 1000 “onEnterFrame” loops. But what if we wanted to add the hero star ship, the enemy star ships, the bullets, explosions, etc. That is going to easily add up more onEnterFrame loops and possibly slow down the flash player. We could of course add less stars, but having a lot of stars makes it look prettier ;) . So my idea of the star field is to add all the stars inside of a empty movie clip and just animate that. So instead of moving 1000 stars, you would only be moving 1. Here is the final version of my star field parallax effect:

What I have done is created 3 empty movie clips to hold the stars (I called them backgrounds in my scripts), and have placed 2000 stars in each one, and I still get the same speed performance. If not, even better. Now let me show you through code:

[as]
function rand(min:Number, max:Number):Number {
return Math.round(Math.random() * (max – min)) + min;
}
var bg_count:Number = 3;
var star_count:Number = 1000;
for(var i:Number = 0; i < bg_count; i++) { var bg:MovieClip = createEmptyMovieClip("bg_" + i, i); bg.speed = (i + 1); for(var j:Number = 0; j < (star_count * 2); j++) { var mc:MovieClip = bg.attachMovie("Star", "star_" + j, j); if(j >= star_count) {
mc._x = bg[“star_” + (j – star_count)]._x – Stage.width;
mc._y = bg[“star_” + (j – star_count)]._y;
mc._xscale = bg[“star_” + (j – star_count)]._xscale;
mc._yscale = bg[“star_” + (j – star_count)]._yscale;
} else {
mc._x = rand(0,Stage.width);
mc._y = rand(0,Stage.height);
mc.dist = rand(10,200);
mc._xscale = (1000 / mc.dist);
mc._yscale = (1000 / mc.dist);
}
}
bg.onEnterFrame = function() {
this._x += this.speed;
if(this._x > Stage.width) {
this._x = (0 + this.speed);
}
}
}
[/as]

1 – 3. The same random number function as described before
4 – 5. Declare the variables bg_count and star_count
6. Begin looping through the desired number of backgrounds declared
7. Declare a variable bg, holding, and creating an empty movie clip to the stage. This will hold the stars
8. Set the speed of the background movie clip, adding 1 to the value so the background moves quicker, giving it the parallax effect
9. Begin looping through the desired number of stars declared times 2! This is very important
10. Declare a variable mc, holding, and adding the movie clip from the Library to the stage
11 – 22. This is the big gotcha. When it loops through creating the declared number of stars (times 2!) it will place the first 1000 randomly on stage. Then once it reaches the number of declared stars we want, it will copy one of the already placed stars in the background and make it self a twin of that star. We do have to make sure that we have that twin star be exactly the same position as the original star, but the _x position be subtracted from Stage.width. This is for obvious reasons of when we move the background back and forth, it will look seemingly
24. Declare onEnterFrame function to loop the animation
25 – 29. Move the background containing the stars left to right. Once the background gets to the edge, move it back to the beginning
30. End the first for i loop

Here are the files used:
sfo-independent.fla
sfo-background.fla

AS2 > Flash

Comments are closed.