Flash MX Game Tutorial - Space Invaders Clone

For this Flash tutorial we are going to do a Space Invaders Clone. If you want to have a look at some preliminary design Go to the Tutorial on the Space Invaders game tutorial for Java.
Have a look at the finished? game so far.

The Defender

First off , Make the movie 700 x 400 and set the frame rate at 12 frames/per/second. Now let's make a defender. Do it however you like. I did a bee-like creature. Be creative. Then select your defender and hit key F8 (convert to to symbol). Call it Defender. In the "properties" window, type "defender" in the instance name box.

Now we want it to move with the mouse. Select your defender and hit the F9 key to open the Actions window. This code will be in your "defender" Movieclip. Type this in to hide the mouse:

onClipEvent(load){
	Mouse.hide();
}

Now we want to move the defender with the mouse. We only want the x-direction to follow the mouse and we want the y-direction to stay constant. So underneath the above code write this:

onClipEvent(enterFrame){
	this._x = _root._xmouse;
	this._y = 385;
}

The Bullets

Now let's make a Bullet. Draw a oval or whatever shape. Select it and press f8(convert to symbol). Call it "Bullet" and make it a movieClip. In the properties window for Bullet , give it the instance name of "bullet" What we need to do is create a bullet everytime the mouse is clicked and when it goes offstage to destroy it or re-use it.

We need to write an algorithm to describe the sequence of events for moving a bullet.

// move the bullet at 30 pixels per frame towards the top of frame
// when the bullet hits the top of stage, destroy it or re-use it.

Let's do it. Select your bullet on the stage and open the Action window and put in this code:

onClipEvent(enterFrame){
	// move it 30 pixels towards the top of screen
	this._y -= 30;
	// if bullet goes offstage , destroy it
	if(this._x<0 || this._x>Stage.width || this._y < 0)
	{
		this.removeMovieClip();
	}
}

Select your defender MC and add this code after the enterFrame code:

// when the mouse cliks
onClipEvent(mouseDown)
{
	// duplicate the bullet mc
_root.bullet.duplicateMovieClip("bullet"+bulletNum,bulletNum);
	// set the coords to the mouse clik
	eval("_root.bullet" + bulletNum)._x = this._x;
	eval("_root.bullet" + bulletNum)._y = this._y;
	// increment the bullet number
	bulletNum++;
	// if more than 50 bullets , start again at 0
	if(bulletNum>50)
	bulletNum = 0;
}

The above code

• duplicates the bullet mc and gives it a number of "bulletNum"
• It then sets the start x and y coords of the bullet to the x and y coordinates of where the mouse was clicked.
• The bulletNum is incremented so that the next bullet created by a mouseclick has a number of bulletNum+1.
• Then if the bulletNum is greater than 50, the bulletNum is reset to 0 and starts the count again.

By now our defender should move from left to right following the mouse and should shoot bullets when the left mouse clicks.

The Aliens

Draw some sort of scary alien monster and make a MovieClip out of it and call it "Alien". In its properties window give it the instance name of "alien". In its Actions window , put this code :

 onClipEvent(load){
	this._y =0;
	speed=10;
}
 

When the alien loads we want to set its y position to 0 for the time being. And we need to set its speed to 10. Later we will change this according to the direction it will need to travel. If the alien hits the left side we need to make it drop down (_y +=30) and change direction by giving the increment value or speed a positive number . x value will increase and make it go right. When it hits the right wall/side then the speed value needs to be negative and this will make it go left. So every time it hits a side , it drops and changes left/right direction. Later on we will need to have 2 or 3 rows of aliens and it will get much more complex. But for now , just get one alien to move down.

Select your alien MC and add this code after the load event :

onClipEvent(enterFrame){
	if(this._x <0)
	{
		// set direction to  right
		speed=10;
		// drop down
		this._y +=30;
	}
	if(this._x > Stage.width)
	{
		// set direction to left
		speed=-10;
		// drop down
		this._y += 30;
	}
	// move horizontal
	this._x += speed;
	
}

Well that is enough for this week. I will continue on with this next week. This tutorial will be written in tandem with the tutorial on Space invaders for Java.

Well its next week already. My how time flies! What week it has been. It has taken all this time nearly to work out how to just get the rows to drop down together. It seems like Space Invaders is not such an easy game at all. But we will persist like the stubborn fanatics we are. So let's get into it. First up, open your actionscript window and select the alien. Delete all the code that you wrote above. Create a new layer and call it "actions" select the frame in that layer. And in the actionScript window write this code :

 depth=0;
for(var i=0;i<3;i++)
{
	for(var j=0;j<10;j++)
	{
		duplicateMovieclip("alien", "alien"+i+"_"+j, 100+depth);
		_root["alien"+i+"_"+j]._x = j*40;
		_root["alien"+i+"_"+j]._y = i*40;
		depth++;
	}
}
 

Now what does this do? First we set the variable depth, which is the argument for the duplicateMovieClip method.

duplicateMovieClip("oldName", "newName",depth) - takes 3 arguments :

1. the original name of the mc that we are copying - e.g "alien"
2. the name that we are giving the copy - e.g. "alien"+i
3. and the depth or layer that we draw it to.

Each duplicated movie must have a unique depth number. The bullets above were given the depths of, what ? Work it out... That is right. 0 to 50. If we made our alien depths from 0 to 30, when the bullets were being duplicated each time they go out of the screen, then they would overWrite the alien mc's. So, we have made the depths on our aliens from 100 to 130. The next time we duplicate a whole bunch of mc's(the bombs ) then we will give them a depth number starting from 200 to 210 for example. So whenever duplicating a whole bunch of mc's be very aware of the depth numbers and make sure they are all different. Do what we are doing(giving each set of mc's numbers starting with 100, 200, 300, 400, etc etc) and you should stay out of trouble.

Where were we? I do digress. What do we need to do now? We have to move our aliens. We moved our single alien by moving 10 pixels each frame in the x or horizontal direction and when we hit the side we changed direction and moved it down 30 pixels( _y += 30). We need to move all of our aliens. We have 3 rows and 10 columns. So lets loop through each alien and increment the x-value by 10 pixels and check that the sides of the screen havent been hit.
Make a new mc in its own layer. Just a square will do. and call it Control_mc. Drag it off to one side out of the screen. Put this code in its as(ActionScript) window :

 onClipEvent (load) {
	dropdown = false;
	speed = 10;
    }
    
onClipEvent (enterFrame) {
	
	for (var i = 0; i<3; i++) {
		for (var j = 0; j<10; j++) {
			// move horizontal
			_root["alien"+i+"_"+j]._x += speed;
						
			if (_root["alien"+i+"_"+j]._x<0) {
				// set direction to  right
				speed = 10;
				// drop down
				dropdown = true;
				break;
			}
			if (_root["alien"+i+"_"+j]._x>Stage.width) {
				// set direction to left
				speed = -10;
				// drop down
				dropdown = true;
				break;
			}
			
		}
	}// end for loops
	
	// drop down all the rows
	if (dropdown) {
		for (var i = 0; i<3; i++) {
		for (var j = 0; j<10; j++) {
		
				_root["alien"+i+"_"+j]._y += 20;
		}
		}
			}
	dropdown = false;
	
	}

 

What does it do. In the load method , we need to initialise the speed to 10 because when we drop down into our formation the first time, it has yet to be set. Same for dropdown, our flag for the rows to drop.
In the enterFrame method, inside our for loops, we first increment our x-value( blah._x +=speed) and then check if we have hit the edge. If we have hit an edge ,

• we set our speed to plus or minus
• Set the dropdown flag to true
• and break because we dont need to check any more

 // dropdown=false; 

Well that is enough for this week. I will continue on with this next week. This tutorial will be written in tandem with the tutorial on Space invaders for Java.
Also, Have a look at the swf so far. Its a bit rough as guts.
And .. download the fla to study how not to program games. LOL.

Go on to Part 2 of this tutorial on Space Invaders