Space Devourers: a Space Invaders clone
[ September 01, 2003 ] by Steve Happ
A complete tutorial showing the development of a Space Invaders clone.


(continues from page 1)

FRAME 2 - LEVEL 1

In each layer hit F6 to make new keyframes. In frame 2, "text" layer, delete all text and the button and create 2 dynamic textFields. Write "score" and "lives" in their variable fields in their respective properties windows. I have put them up the top left and right. Make some static text fields next to each and write something like "Score:" and "Lives:".

Select Frame 2, "defender" layer. Drag the Defender mc from the Library to the bottom of the stage. In the "properties" window, type "defender" in the instance name box.

FRAME 2 - ACTIONS LAYER

Select Frame 2, "actions" layer and type this in the Action window:

stop();
// initialise variables 
bulletNum = 0;
dropdown = false;
speed = 10;
_root.bombspeed = 0.1;
initAliens("alien");
            

This code stops the playhead at this frame, initialises the variables for this frame, and calls the global function initAliens("alien") that we declared in frame 1. We will reuse this line in each level to initialise our baddies.

After that we will put in our code for our our onLoad method. All it does it hide the mouse. So, type in this after the above code:

//	-----------	ONLOAD	-----------	//
 
_root.onLoad = function()
{
	Mouse.hide();
}
            

Now we need to write our code for our enterFrame method. I have made everything fit into this one loop. It is our timer and every 25 times per second(our framerate), this code is executed. Enter this code in frame 2, "actions" layer after the onload method:

//	-------------	ENTERFRAME	----------	//
 
_root.onEnterFrame = function()
{
	// move the defender with the mouse. 
	_root.defender._x = _root._xmouse;
	_root.defender._y = 385;
	// bullet move
	var y = 0;
	while (y < 6)
	{
		eval("_root.bullet"+y)._y -= 30;
		y++;
	}
	moveBombs("alien");
	moveAliens("alien", 3,10);
	initBombs(_root.bombspeed);
}
            

In the enterframe method we mainly use the functions we wrote earlier and we will reuse them on every level. We will:

  •  Make the defender follow the mouse(where it should be)
  •  Move the bullets
  •  Call our moveBombs global function
  •  Call our moveAliens global function
  •  Call our initBombs global function

Write the method for when the mouse clicks. Put this code in frame 2, actions layer after the enterframe method:

//	-------------	MOUSE CLICK	----------	//
 
_root.onMouseDown = function()
{
	// duplicate the bullet mc
	attachMovie("bullet", "bullet"+bulletNum, bulletNum);
	// set the coords to the mouse clik
	eval("_root.bullet"+bulletNum)._x = _root.defender._x;
	eval("_root.bullet"+bulletNum)._y = _root.defender._y;
	// increment the bullet number
	++bulletNum;
	// if more than 5 bullets , start again at 0
	if (bulletNum > 5)
	{
		bulletNum = 0;
	}
}
            

The above code:

  •  Attaches the bullet mc and gives it a number of "bulletNum"
  •  Sets the level or depth of each mc to 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 an integer value of bulletNum+1
  •  Then if the bulletNum is greater than 5, the bulletNum is reset to 0 and starts the count again

That finishes frame 2. In our Defender layer we should have our Defender mc with the instance name of "defender". In the text layer we should have a dyamic textfield with variable name "score" and another dynamic textfield with variable name "lives". If you want you can also have a couple of static textfields with "Score:" and "Lives:" written in them.
In our "actions" layer we should have the code that we outlined above. It should contain the following:

  1. stop() and initialise variables, initAliens
  2. Our onLoad method
  3. The enterFrame method
  4. The mouseDown method

FRAME 3 - LEVEL 2

Simple. We have done all the hard yards and it is downhill from here.
Hit F6 to create 3 new keyframes for each layer. The text and defender layers we dont have to touch.
Copy the code from Frame 2, "actions" layer and paste it into the "actions" layer, frame 3.
Change the speed (in line 5) from 10 to 15.
Replace "alien" with "bug" whever it occurs on this frame. Use the "Replace" icon at the top of the Actions window (between the magnifying glass icon and the crosshairs). When you open the Replace Dialog box, write "alien" (with the quotation marks) into the "Find What:" textbox and write "bug" into the "Replace with:" textbox. Click the "replace" button until all the occurences of "alien" are replaced by "bug". You will do this in the next frame as well.

In this frame you should have a line that reads:
initAliens("bug"); (on line 7)

And on lines 25 and 26:
moveBombs("bug");
moveAliens("bug", 4,15);

And change the 3 to a 4 on the above line to take us to frame 4, the next level.
That is all for Frame 3. Hit F6 to make keyframes for frame 4 on all layers.

FRAME 4 - LEVEL 3

Copy and paste the code from frame 3, "actions" layer to frame 4. As before , you will only have to make a few changes, similar to frame 3. Use the replace dialog box to replace "bug" with "skull".
Here are the changes outlined:

Line 6: speed = 20;
Line 8: initAliens("skull");
Line 26: moveBombs("skull");
Line 27: moveAliens("skull", 5,20); // N.B. Change 4 to 5

That is all for Frame 4. Hit F6 to make keyframes for frame 5 on all layers.

FRAME 5 - GAME OVER

On frame 5, "defender" layer, delete the defender mc.
On the "actions" layer, you will need only a single line of code:

stop();

In the "text" layer, frame 5, you can delete the lives textfields and leave the score there. Write some sort of text stating that "You have won, etc.".
Create a restart button and put this code in it to re-initialise the score and lives and to go to frame 2 (Level 1):

on (release)
{
	_root.lives = 3;
	_root.score = 0;
	_root.gotoAndStop(2);
}
            

WHERE TO NOW?

This is only the start. This was my second rewrite. You can do lots more to this to refine and perfect. Here are some suggestions.

  •  Create some covers or barriers to protect the defender from bombs. They could disintegrate over 3 or 4 hits by having a few frames and when each is hit then you use code like: _root["cover"+coverNum].gotoAndStop(2)
  •  Have the aliens explode using the frame method same as the covers. The extra frames on the baddies contain the explosion and when hit just use baddie23.gotoAndPlay(2)
  •  Set up an array of baddies for better collision detection
  •  Have the bombs coming from only the bottom rows of the baddies
  •  Make some extra baddies that spiral in on a different path than the rows. Try some quadratic equations: y = x squared
  •  Make some groovy backgrounds. Create better and uglier sprites.

That is it for now. I have made extensive use of global functions and this has made the creation of levels a whole lot easier.
I have kepth the code centralised into the actions layers of each frame instead of having it spread out all over the place in mc's
I have kept the enterFrame methods to a minimum. As minimum as you can get - 1. This has sped the game up considerably. It is best to keep the number of enterframe loops down to the least number as possible.
Good luck to you with this tutorial and I hope you will learn as much from it as I have done writing it, and developing my game.



Source code available for download: .FLA

     
 
 
Name: Steve Happ
Location: Newcastle, Australia
Age: 51
Flash experience: 2-3 years
Job: Computer trainer
Website: http://www.video-animation.com/
 
 
| Homepage | News | Games | Articles | Multiplayer Central | Reviews | Spotlight | Forums | Info | Links | Contact us | Advertise | Credits |

| www.smartfoxserver.com | www.gotoandplay.biz | www.openspace-engine.com |

gotoAndPlay() v 3.0.0 -- (c)2003-2008 gotoAndPlay() Team -- P.IVA 03121770048