This is a continuation of the tutorial How to make a spaceship move and fire at Here. Please go there and grab that file as we will be using it in the examples in this tutorial.
In this tutorial we will finish the simple game by making enemies, duplicating enemies, learning how to make them shoot and learning how to make yourself blow up if they hit you.
The end product will look something like this:
First we need to draw an enemy to use as the enemy clip. So draw a spacepod on the flash document. Select the enemy spacepod you just drew and go to modify-->convert to symbol of type movie clip and name the symbol "enemy". Next while still selecting the enemy symbol, click on the properties tab and under the dropdownbox where it says movieclip as the symbol type, there should be a text box for the name of the clip, put "enemy" there as well. It should look like this:
Now we want to duplicate this clip so there will be many enemies at once. To do this, create a new layer called control and click on the first frame to open up the actions code for that frame. In the actions box, type this:
This simple piece of code first specifies a variable that tells us how many duplicates of the enemy we want on the screen at once in numenemies. Then it loops from 1 to the specified number and makes that many duplicates of he enemy using the duplicateMovieClip() function. Here's a screenshot of what this should look like:
Now just having that won't do anything, we need to specify where to put the enemies and how fast they will move. So to do that, select the enemy clip and open up the actions box and type this in:
Code:
onClipEvent(load)
{
function reset()
{
if(this._name=="enemy")
{
this._visible=false;
}
else
{
this._visible=true;
}
this._x=random(200)+550;
this._y=random(400);
this.speed=random(6)+2;
}
this.reset();
}
onClipEvent(enterFrame)
{
this._x-=this.speed;
if(this._x<-50)
{
this.reset();
}
}
So what does this do? The code in the OnClipEvent(load) portion specifies the initial position and speed of the enemies. A normal flash movie is 550 pixels wide and 400 pixels high. Setting x to random(200)+550 is initially setting the spacepod to the very right of the screen plus anywhere between 1 and 200 pixels more to the right. This way the spacepod can easily move its way onto the screen. Setting y to random(400) means the spacepod can come vertically anywhere within the clip. this.speed defines how you pixels the clip will move across the screen per frame, this is essentially the speed of the enemies.
We put all this code into a reset function so when a ship moves off the screen we can call this function to re-position the ship.
The onClipEvent(enterFrame) section is pretty simple. We use this._x-=this.speed to move the enemy left across the screen by the speed specified earlier. It also says that if the ship's position is less and -50(moved well off the screen), then re-position it and have it slide back in.
Now we have enemy ships moving across the screen. But just having enemy ships is pretty boring, we want to make them each fire. To do this, make a dot for the enemy bullet and convert it into a movie clip and call it "fire" both for the clip name and for the name in the properties box.
Now, select the first frame of the main timeline and replace the code there with this:
The first part of the this is the same as it was last time, we specify a number of enemies and then we duplicate that many enemies on the stage. We also this time set a shotcounter to keep track of enemy shots(this is important for shot clip depth and numbering). We also set a en.time to the current time plus a random number of miliseconds between now and 2000, or 2 seconds. This is how often ships will shoot.
Now the shoot function is a bit complex. It loops through all the ships and if it sees that the time to shoot a bullet has passed, it will duplicate a bullet and put that bullet as the "shot" variable. It then assigns the x and y positions of the shot variable to those of the parent ship in:
Code:
shot._x = ent._x;
shot._y = ent._y;
Then it adds some random time between 0 and 2 seconds until the ship shoots again. Then we increment the shotcount since a ship has just fired. Since it is unlikely that 30 shots will be on the screen at the same time, we tell it that if the count if greater than 30, set the count back to one.
Now we got a function to shoot bullets, however, after the bullet is shot and assigned a position, it needs to move. Open Up the enemy bullet clip like this:
Then type this in the actions code box:
Code:
onClipEvent(load)
{
if(this._name=="fire")
{
this._visible=false;
}
else
{
this.visible=true;
}
this.speed=25;
}
onClipEvent(enterFrame)
{
this._x-=this.speed;
if(this._x<-20)
{
this.removeMovieClip();
}
}
Basically this says that if the clip's name is fire(the original and not a duplicate) then hide it. Since the original clip is on the screen at the start, we don't actually want it to show up because it wouldn't make sense to have a random shot at the beginning not attached to anything. We also set the shot's speed to 25. The onClipEvent(enterFrame) is also pretty straightforward. It moves the shot left at the speed we specified and removes the shot if its x coordinate is less than 20(it goes off the screen).
Now that we have these two chunks of code, we are still missing something to call the shoot function. We need an extra clip just for this purpose.
So draw a black circle outside the stage area and convert it to a movie clip:
You need to put this code in the actions box of the black circle clip. Note that this clip must be drawn off-stage as it is not meant to be seen.
Code:
onClipEvent(enterFrame)
{
_root.shoot();
}
Now that you got enemy clips moving and shooting and you also have a hero clip, lets do some simple collision detection to determine hit and death sequences. For this example, if your shot hits the enemy, it dissapears, if the enemy shot or the enemy hits you, its game over. First click on the first frame of the main timeline and add this to the code already there:
Code:
stop();
This tells the movie to stop and not go to the next frame. We need to do this because we are going to create another scene for the game over. That being said go to window-->Design Panel-->Scene like this:
Name the scene game over, select the first frame of this new scene and put:
Code:
stop();
This tells the game not to advance past the gameover scene once its game over. Now put some text that says "game over" in that scene. Also in the properties box of the first frame of that scene, you can name the frame "gameover" and use it as an identifier when out ship dies. Now go back to the first scene with the ship and the enemy. Open up the blue shot(your shot) and modify the code that is already there in the onClipEvent(enterFrame) code to this:
We added the last for loop that detects collison detection in the code. This checks every frame(default flash in 12 frames per second) if any shot has come in contact with any of the enemy ships. If it has, it makes sure first that the one that came in contact with the enemy ship isn't the shot that was defaultly on the stage without any fire(the original was named "shot"). Then it tells the clip it just hit to reset, which basically means, it dissapears from the stage and resets itself outside the stage to move in again, this gives the impression that it was killed.
Now open up the enemy's fire clip and add this to the onClipEvent(enterFrame) code:
This is the same concept as the code in your bullets box. It checks to see if he enemy fire has hit you and it makes sure it wasn't the original fire clip that was on the screen. If it is a bullet that the enemies actually fire, the game is over so it loops through and removes all the enemy clips and removes your ship clip as well and then goes to the gameover scene.
Now the last bit, if you hit the enemy ships themselves, it is also game over, so open up the actions box of the enemy ship and type this in:
This does the same checks to see if the enemy clip has hit your ship and to make sure it isn't the original enemy clip but one of the duplicates on the screen. It then proceeds to go to the game over scene and remove all the clips.
Now go to the first game of the gameover scene, the "gameover" frame, and modify the code so it looks like this:
Code:
stop();
for(i=1;i<=3;i++)
{
_root["enemy"+i].removeMovieClip();
}
This is just cleanup code to make sure all the enemy clips are removed on the game over scene.
Thats it! If you want the full source file, you can download it Here
To discuss this tutorial or to ask questions about it go Here
