"Building Asteroids MX 1.0 By Aaron E. Silvers
-1-
Table of Contents Introduction Performance Goals Building the Game: I. Draw an Asteroid II. Make an Asteroid move III. Draw a spaceship IV. Control the spaceship’s movement V. Make the spaceship fire lasers VI. Get the collision detection working VII. Create a control panel for your game VIII. Scoring points IX. Controlling lives X. Vary difficulty with levels Extending the Game Code Appendix Biography
-2-
Introduction When Macromedia released Flash MX, I couldn’t wait to play with it. With its new drawing features, and the ability to create movie clips in ActionScript, I was all aglow with accomplishing “the impossible” – making Asteroids, the old arcade classic, completely with code, just like Atari did it 20+ years ago. Within a very short timeframe I was able to accomplish this small feat, and I’m going to explain to you how I did it (actually, explaining it takes me far longer than it does to build it). Feel free to explore this tutorial no matter how comfortable you think you are with ActionScript, but you should know that I’m assuming you’re familiar with the fundamentals of programming. If you’re unfamiliar with programming basics (e.g., arrays, functions, assigning values to variables) and/or some basic elements of ActionScript (e.g., dot-syntax, assigning _x and _y positions, the onEnterFrame method) then you’ll probably be more comfortable copy-and-pasting the blocks of code into Flash. Hopefully, I’ve organized this tutorial so you can access specific parts of this quickly and easily, especially if you have a question about how a certain part of this game works. You can use this tutorial in its entirety to rebuild the game, or access individual parts and extract them to help you with another project with similar functionality. All the code will be entered into the first frame in the movie, with no other code anywhere else. And you won’t have to do any old-fashioned-style flashing – no importing graphics, no making symbols. This is an exercise in programming. Have fun, and good coding to you! -a-
-3-
Performance Goals I was a middle school math teacher in a previous career. It’s good to have goals. Also a hard habit for me to break ☺ When you finish this tutorial you should be able to accomplish the following with ActionScript: I. II. III. IV. V. VI. Create an instance of an empty movie clip with ActionScript. Animate a movie clip by using the onEnterFrame method. Draw simple shapes using ActionScript. Display text boxes dynamically with aliased text. Facilitate simple interactions between movie clip instances by developing a model for collision detection without using hitTest. Implement a simple game engine to manage lives, scoring and difficulty.
-4-
Specifications for Asteroids MX: • • • • • • • • • • • • • • Movie size = 600 x 400 Background color = #990000 Ship color = #FFFFFF Asteroid color = #00FF00 Ship must be able to go forward, turn right and left. All objects must wrap inside the screen, horizontally and vertically The game starts with three lives. If an Asteroid comes in contact with the ship, a life is lost. Ship must be able to fire lasers in the direction of it’s flight. If a laser hits an Asteroid the first time, it will break into two smaller Asteroids. If a laser hits a smaller Asteroid, it will break into two tiny Asteroids. If a laser hits a tiny Asteroid, it does not break up into anything else. Each Asteroid hit is worth 200 points. When a level is cleared, another Asteroid is added to the next level.
-5-
Building the Game: I - Draw an Asteroid Lesson objective: By the time you’re done with this lesson, you will be able to draw a simple shape with code and make it a movie clip instance. We’re going to create a new movie in Flash MX. In the Properties palette (on the bottom of the screen), set the size of the stage to 600 x 400 and set your frame rate to 30 fps. Set the background color to #990000. Save this file as “Asteroids.” This now sets up the environment in which we’ll create the game. Once you’ve entered the code as shown on the right (or you’ve downloaded the lesson_1.fla), read on as we break down what’s all going on. createAsteroid is a function, or a procedure that we’re going to call on every time we want to make an Asteroid in this game. Rather than enter this same code every single time we want to generate an Asteroid, we’ll call the function to do it for us. We’re going to modify this particular function throughout this tutorial, but let’s publish it to see what you get. You should see the bottom half of a hexagon in the upper-left-hand corner of your preview window. Congratulations! You just created an Asteroid (alright, it’s a hexagon). Let’s go over how this happens. The first line of our createAsteroid function creates an object reference to a brand new blank movie clip with an instance name of “Asteroid.” I could simply use the instance name “Asteroid” in assigning all the actions to come, but I created an object reference to shorten the amount of my typing here. That object reference is rock. The var is a reserved command in Flash to create a variable. In this case, we’re calling the variable rock. A variable needs to have a value, so we assign it:
this.createEmptyMovieClip("Asteroid", 0);
-6-
and it means that in this we’re going to “create an empty movie clip” with an instance name of “Asteroid” in level 0. “this” is a relative description – in our example, since we’re on the main timeline, “this” refers to the “_root.” It could just as easily refer to “this” movie clip or “this” object – when used properly, relative locators offer a lot of flexibility. All the commands that have a moveTo or a lineTo, as well as everything in the movie that works with an _x and _y makes use of an x- and y-position. Imagine the stage in Flash (and each movie clip) as a coordinate-plane, or coordinate-grid (ah, Geometry…). A coordinate-plane is a set of two number lines going on infinitely – one going on forever horizontally (the x-axis), and the other going on forever vertically (the y-axis). In every movie clip, the origin is located where these two number lines intersect. That location is (0,0), which is the upper-left-hand corner of the main stage, or the crosshairs in any movie clip. From the origin of the movie clip, the values of x increase as you go to the right of the origin. As you move down from the origin, the values of y increase, too. I want you to imagine that there is a pen in our “Asteroid” located at (0,0) – the crosshairs in case you’re still a little lost.
rock.lineStyle(3.5, 0x00ff00, 100); rock.moveTo(45, -45); rock.lineTo(90, -15); rock.lineTo(90, 15); rock.lineTo(45, 45); rock.lineTo(0, 15); rock.lineTo(0, -15); rock.lineTo(45, -45);
lineStyle describes what kind of line we’re going to draw. In this case, we’re drawing a line that is 3.5 pixels wide, has a hex-color of 00FF00 and has an alpha (transparency) level of 100%. moveTo picks up the pen and moves it to another location, putting it down without drawing anything. In this case, we’re picking up the pen and “moving it to” 45 pixes right of the origin, and 45 pixels up from the origin. Remember that if positive numbers go to the right or down from the origin, then negative numbers move left or go up from the origin. lineTo tells Flash that we’re going to draw a “line” TO a certain location. In our Asteroids movie clip, we’re starting at (45, -45) and we’re drawing a “line to” (90, -15). -7-
From here, we’re drawing lines all the way to certain points inside the movie clip, While we define the function inside of the brackets {}, by itself it wouldn’t do anything until we called it, or instantiated the function. When we entered createAsteroid();, that called the function, which is why Flash drew something.
-8-
lesson_1.fla:
createAsteroid = function() { // Let’s create an Asteroid var rock = this.createEmptyMovieClip("Asteroid", 0); rock.lineStyle(3.5, 0x00ff00, 100); rock.moveTo(45, -45); rock.lineTo(90, -15); rock.lineTo(90, 15); rock.lineTo(45, 45); rock.lineTo(0, 15); rock.lineTo(0, -15); rock.lineTo(45, -45); } createAsteroid();
-9-
Building the Game: II - Make an Asteroid move Lesson objective: By the time you’re done with this lesson, you’ll be able to take movie clips you’ve created and animate them in simple, yet random ways. You’ll also be able to make these movie clips seem to wrap within the screen size you assign them. We’re going to alter our createAsteroid function now, and add a lot more code. So enter the code for this lesson or simply download lesson_2.fla and follow along. First of all, we want to have more than one asteroid to be generated. We’re going to accomplish this with a simple fornext loop to create an array of object references to the asteroid movie clips we’re going to create.
// at will be an array of object references to the Asteroids on the screen. at = new Array();
Here we initialize at as an array. In my experience, I’ve found that working with arrays in Flash is a lot faster (and easier) than looping through movieclips with a similar naming convention. We’re setting up an array of object references to the asteroid movie clips we’re going to make for a couple of reasons: 1) Make it easy to keep track of how many asteroids are on the stage throughout the play of game. 2) Make it easy to refer to individual asteroids without knowing what their instance name is. 3) Make it easy to assign similar, but randomized actions to individual asteroids without having to retype those actions for every asteroid that’s created.
// diffLevel is initialized here. // it's used for determining the difficulty at each level. diffLevel = 1; // a variable to keep track of the depths of // our movie clips is initialized here: _root.depth=0; // let's create a set amount of Asteroids depending on the level. for (i=0; i<_root.diffLevel+1; i++) { at[i] = new Object (); at[i] = createAsteroid(1, mf(mr()*400), mf(mr()*400)); }
- 10 -
Let’s first look at the for-next loop. Making a for-next loop is all dependent on a variable, starting at a certain value, meeting a certain condition to continue looping. We use for-next loops because we want to repeat some actions, but we want to limit the number of times it repeats. Our for-next loop starts with the variable i, which we’ll be using as a counter. We initialize i by setting it equal to 0. As long as i is less than the diffLevel (plus 1 past that value), this loop will continue, and all the code within the brackets of this loop will be executed that many times. Where the code reads i++, we’re giving Flash directions as to how we’re going to make the value of i change. In this case, we’re incrementing i by 1 (adding one to it’s value). For every time Flash goes through this loop, it’s initializing a new Object as an element, or member, of the at array. An element of an array is like an empty box. If you can picture that, picture the object in that empty box as a command to turn that box into compartments, although we aren’t saying what kind of compartments or how big they are. Basically, we’re telling the element of the array to be prepared to accept a certain kind of information to hold on to. In each element of the array, we’re calling on our createAsteroid function. So, when I call on at[0], (element #0 in the at array) it’s going to refer to an asteroid movie clip. This is how object references work, especially when working with arrays. Our createAsteroid function generates the physical Asteroid, but we have a lot more functionality to build. If you notice that the first line of the createAsteroid function has been altered, you see that we now have some information inside the parentheses:
createAsteroid = function (factor, x, y) {
These items in the parentheses are called parameters, or arguments. They’re simply variables passed into the function that will be used inside of the function. The variables x and y will pass an x- and y-coordinate into the function, telling it where it should create the Asteroid. The x and y variables are used in this code:
// put the Asteroid at the determined x and y on the stage. rock._x = x; if (rock._x>20 || rock._x<380) {
- 11 -
rock._y = mf(mr()*400); } else { rock._y = y; }
We set the Asteroid (remember we refer to it in the code here as rock) to an x-position equal to x. If that x-position ends up being greater than “20” or if it ends up being smaller than “380”, the y-position is assigned randomly. Otherwise, the yposition will be set to the y passed into the function. The factor variable will be used to determine if this Asteroid has been hit once, twice or three times. Depending on how many times an asteroid (or a fragment of the parent asteroid) has been hit, the factor is used in determining it’s fragment’s size. It’s used in this code, still within the createAsteroid function:
// we want a // so we set // dependent rock._xscale rock._yscale little variety in the appearance of the Asteroids, the x- and y-scale random within a certain range, on the factor. = (mf(mr()*50)+50)/factor; = (mf(mr()*50)+50)/factor;
That, in a nutshell, is a “rock-solid” (pun intended) example of parameters. We still need to build an engine to handle the movement of every Asteroid on the stage. To help with that, we assign some random values relative to our specific Asteroid: xv (x-velocity), yv (y-velocity) and r (rotation amount).
// We need to set a velocity value for the Asteroid's // x- and y- movements. rock.xv = mf(mr()*6)-3; rock.yv = mf(mr()*6)-3; // We also need to set a rate for rotation of the Asteroid, // so it looks like it's drifting along in space. rock.r = mf(mr()*360)-180;
We’re going to use these variables in our movement engine. If you’ve entered all the code, you can publish the movie now and see a notable difference. You now have two hexagons (your first Asteroids) moving adrift on the stage. If you watch closely enough, you’ll see that when the Asteroid moves below a certain point, it re-appears atop the stage – as if the window wrapped. - 12 -
In fact that’s exactly what’s happening onEnterFrame. Take a look over the four (4) different if-statements.
if (at[i]._x<=_root.xmin+10) { at[i]._x += _root.xmax-20; } if (at[i]._x>=_root.xmax-10) { at[i]._x -= _root.xmax-20; } if (at[i]._y<=_root.ymin+10) { at[i]._y += _root.ymax-20; } if (at[i]._y>=_root.ymax-10) { at[i]._y -= _root.ymax-20; }
While our movie is at a size of 600 x 400, we don’t want to take up this whole space with our game. We’re going to leave 200 pixels worth of screen real estate for the console, which will hold the scoreboard, your lives and any system messages and buttons. This means we’re going to make our playable space a nice 400 x 400 square. I like having a 10 pixel border for Asteroids, lasers and the spaceship that once they cross, they have to wrap around. That way, it doesn’t look too weird during the course of play when the screen “wraps”. That’s why we set these variables up in the Game function:
// define the bounds of the movie. _root.xmax = 390; _root.xmin = 10; _root.ymax = 390; _root.ymin = 10;
Once we set up our boundaries, we focus on actually moving each Asteroid. Remember that at is an array where each element of the array is an object reference to a unique “Asteroid” movie clip.
// this code will be executed everytime the frame refreshes. this.onEnterFrame = function() { for (i in at) { at[i]._x += at[i].xv*at[i].level; at[i]._y += at[i].yv*at[i].level; at[i]._rotation += at[i].r/60; }
- 13 -
};
This updates the x- and y- position on every frame refresh by adding each x-, y- and rotaion-value to themselves. This works well for making objects move in a straight line. The Asteroid’s location always grows in the same way, which makes it move in a straight line. The only problem with this is that at a certain point, the movie clip’s location will grow beyond the viewable area of our movie clip – and that’s no good. We can’t shoot something we can’t see. That’s why we put in a checking system to move the Asteroid to the opposite horizontal and/or vertical border when it passes the minimum or maximum.
if (at[i]._x<=_root.xmin+10) { at[i]._x += _root.xmax-20; } if (at[i]._x>=_root.xmax-10) { at[i]._x -= _root.xmax-20; } if (at[i]._y<=_root.ymin+10) { at[i]._y += _root.ymax-20; } if (at[i]._y>=_root.ymax-10) { at[i]._y -= _root.ymax-20; }
- 14 -
lesson_2.fla:
createAsteroid = function (factor, x, y) { // Let’s create an Asteroid var rock = this.createEmptyMovieClip("Asteroid", _root.depth++); rock.lineStyle(3.5, 0x00ff00, 100); rock.moveTo(45, -45); rock.lineTo(90, -15); rock.lineTo(90, 15); rock.lineTo(45, 45); rock.lineTo(0, 15); rock.lineTo(0, -15); rock.lineTo(45, -45); // Let's shorten up some commonly used Math methods to make our // code execute faster. var mr = Math.random, mf = Math.floor; // We need to set a velocity value for the Asteroid's // x- and y- movements. rock.xv = mf(mr()*6)-3; rock.yv = mf(mr()*6)-3; // We also need to set a rate for rotation of the Asteroid, // so it looks like it's drifting along in space. rock.r = mf(mr()*360)-180; // put the Asteroid at the determined x and y on the stage. rock._x = x; if (rock._x>20 || rock._x<380) { rock._y = mf(mr()*400); } else { rock._y = y; } // set the Asteroid's original rotation. rock._rotation = mf(mr()*360)-180; // we want a // so we set // dependent rock._xscale rock._yscale little variety in the appearance of the Asteroids, the x- and y-scale random within a certain range, on the factor. = (mf(mr()*50)+50)/factor; = (mf(mr()*50)+50)/factor;
// the Asteroid's factor is assigned to its level rock.level = factor;
- 15 -
// since we're going to use object references in an array, // it's a good idea to return the movie clip to the object reference // as a parameter. return rock; }; function Game() { // define the bounds of the movie. _root.xmax = 390; _root.xmin = 10; _root.ymax = 390; _root.ymin = 10; // at will be an array of object references to the Asteroids on the screen. at = new Array(); // diffLevel is initialized here. // it's used for determining the difficulty at each level. diffLevel = 1; // a variable to keep track of the depths of // our movie clips is initialized here: _root.depth=0; // let's create a set amount of Asteroids depending on the level. for (i=0; i<_root.diffLevel+1; i++) { at[i] = new Object (); at[i] = createAsteroid(1, mf(mr()*400), mf(mr()*400)); } } // this code will be executed every time the frame refreshes. this.onEnterFrame = function() { for (i in at) { if (at[i]._x<=_root.xmin+10) { at[i]._x += _root.xmax-20; } if (at[i]._x>=_root.xmax-10) { at[i]._x -= _root.xmax-20; } if (at[i]._y<=_root.ymin+10) { at[i]._y += _root.ymax-20; } if (at[i]._y>=_root.ymax-10) { at[i]._y -= _root.ymax-20; } at[i]._x += at[i].xv*at[i].level;
- 16 -
at[i]._y += at[i].yv*at[i].level; at[i]._rotation += at[i].r/60; } }; foo=new Game();
- 17 -
Building the Game: III - Draw a spaceship Lesson Goal: More practice with creating movie clips, shapes, navigating the coordinate-plane, by the time you finsih this lesson you will know that you can draw simple shapes in Flash. It’s review as far as skills, but a necessary step if we’re building an Asteroids game. So now we need to put in a spaceship that the user will control, eventually blowing up Asteroids that get in its way. If we have an understanding of the coordinate plane, we can make whatever shape we want. I happen to like the Vshaped arcade spaceships of olde. Here’s how we’ll make it, but feel free to make your own if you’re feeling adventurous.
function makeShip (){ createEmptyMovieClip("ship", 10000); ship._x = ship._y = 2..."
|
You need to upgrade your Flash Player , or try to enable javascript in order see this document properly.
|
|
Comments
