This tutorial is to teach you the basics of a point,aim, and shoot game. For this tutorial, the crosshair will be the aimer and the happy-faces will be the targets. If you have Macromedia Flash MX 2004 or a later version you can download the source files Here and follow along. The finished product will look like this, click the mouse to shoot.
First open up a regular flash document 550 in width by 400 in height with a regular white background. Then draw a happy face(this is what we are going to shoot). Select the happy face and go to modify-->Convert to Symbol and convert it into a movie clip symbol.
Now name the symbol "face". Select the face symbol, and open the properties box. There will be a input box under a dropdown box that says "movie clip". This input box is the instance name. Put "face" there as well. Now select the face symbol and open up the actions box and type this code in:
Code:
onClipEvent(load)
{
function reset()
{
if(this._name=="face")
{
this._visible=false;
}
else
{
this._visible=true;
}
this.dead=0;
this.speed=random(4)+3;
this._x=600;
this._y=random(400);
}
this.reset();
}
onClipEvent(enterFrame)
{
this._x-=this.speed;
if(this._x<-40)
{
this.reset();
}
}
This is just some simple code to generate the face and make it move across the screen. The onClipEvent(load) code is what happens when the movie clip first loads and the onClipEvent(enterFrame) code is what happens on each successive frame entry(a usual game is about 20-30 frames per second).
There is a reset function in the load event. This resets the movie clip to where we want the face's starting point to be. In this reset function we tell it that if the clip's name is "face" then make the clip not visible, but if it isn't face, make it visible. We want to original face to be invisible so we do this, we will generate the actual enemies in the main timeline later. Then we set some initial properties for the face. We set dead=0 so to indicate that the face does not start out dead. We set the speed to a random number between 0 and 3 plus 3. We set the initial x position to 600(just a bit off the screen) and we set the initial y position to a random number between 0 and 399(somewhere within the screen). We reset immediately on load because we want our clip to have these properties right when they appear. The onClipEvent(enterFrame) code is easy, we just tell our clip to decrement its x position by the speed on each frame entry(this moves it from right to left across the screen). If the x position reaches less than -40 or falls off the screen, we reset the clip to its original position.
Next we have to make the enemy clip duplicate, so select the main time(not the face clip) and click on the action box to open it up for code:
This simply creates 5 copies of the face symbol named face1 to face5.
Now select the face clip again, right click and hit "edit" to edit the face clip. We want to add some more frames to make a death animation.
Go to the clip's main timeline and select the first frame and put this in for its code:
Code:
stop();
Since the 2nd frame will begin the death sequence, we don't want the first frame to go and play the 2nd frame until we shoot the happy face.
Now insert a second frame and draw what you want in there. Put this in the second frame's codebox:
Code:
this.dead=1;
This is to indicate that the face is dead once it hits the second frame.
Now go and draw the rest of the death sequence but in the last frame, put this as the code:
Code:
this.reset();
This will tell the face to reset and start into the screen again once it has died. This way you get a continous stream of faces moving across the screen.
Now we have to go and make the crosshair. You draw a crosshair and convert it to a symbol of type movieClip. Select it and type this into its code box:
When this loads it will follow the mouse cursor because we set the startdrag of "this" to true. Mouse.hide just hides the original mouse cursor so our crosshair is our cursor. We want to make the depths of this 9999 so it will appear on top of all the faces(otherwise if you hover over a face, the crosshair vanishes behind the face). Now the onClipEvent(mouseDown) is what happens when we click the mouse. The playsounds lines tells it to play a shot sound I imported in for the movie. To use a sound like this, you have to open the movie's library and find the sound you imported, right click-->linkage and check "export for actionscript". playsounds.start(0,1) tells the sound to loop once(play once). The next part says that if when we click the crosshair is touching one of the duplicate faces(the reason for the loop being from 1 to 5) and if the face is still alive, we want that face to go to its 2nd frame and start its death sequence. This will end when the face reaches its last frame and resets.
Ok, thats it for a basic shooting game!
If you have questions or want to discuss this tutorial, please post in the forum thread Here
