In part one of this tutorial, How to make Flash games, we built a basic framework for a simple target shooting game in AS3. We set up a Flash FLA file for our game with a target movieclip, we wrote a main game class and a simple target class, and we randomly positioned 3 targets on the screen and allowed the user to “shoot” them by clicking with the mouse.

Now let’s take that framework and turn it into an actual game.  We’ll still keep things nice and simple, but by the end of this tutorial you’ll have a working game which you can then modify and extend as you wish.  So, here’s the functionality we’ll be adding:

• Add a START GAME button so the player can choose when to begin, and a REPLAY button for multiple plays
• Add a gun sight to aim with, rather than the mouse pointer
• Add a simple score, which times the shots and gives the player something to compete against

Modifying the main class

We’ll begin by making a small change to the main game class, Targets.  In part one we wrote a method called Targets.  This is a constructor method, since it has the same name as the class, and so it runs automatically when we run the game.  This is no longer what we want, since we now want the game to begin only when the player clicks on a START GAME button, so let’s rename that method startGame().

We’ll also add a new method called endGame() and at the moment that will just have one statement – play().  When that method is called the game will move on from the current frame, and continue until it reaches a stop command which we’ll add shortly, along with a replay button!

Finally we need to edit the clickTarget() method.  We want the game to end when all of the targets have been hit, so add the following code right after the obj.play() line:

numTargets is the number of targets on screen, each time one is hit numTargets is reduced by one, so when it equals zero we call the endGame() method and show the gameover screen!

Modifying the Flash game FLA file

So far we have only one frame in our game.  We now need 3 – one which shows a START GAME button, one which shows the targets and plays the actual game, and a final one which acts as a game over screen to show a PLAY AGAIN button, and later will also show the score.

Click on frame 1 in the timeline and press F6 twice, which adds 2 new keyframes.  Now on frame 1 we need a button.  You can either draw your own (press F8 to turn it into a button), drag one onto the stage from the components panel, or use the one provided in the project files.  Once it’s on stage go to the properties panel and give it the instance name of startGameBtn.

Now we’ll add the code to handle the button on the timeline, since it’s not really part of the game itself.  Click on frame 1 on the timeline, hit F9 to open the actions panel and type the following code:

The first command simply stops the timeline, since we don’t want to continue until the player clicks on the button. Then we set up an event listener (just like we did for clicking on the targets) and we define a function to handle the button click. The function simply removes the listener (good housekeeping!) and moves us on to the next frame where the game begins.

The game frame

Frame 2 is where the action will take place, but nothing will happen until we tell it to! Remember we changed the name of our constructor method? Well now we need to call it so we can start the game, so on this frame we add the code:

StartGame();

Game over frame

When all of the targets have been hit the game will play, so we need a stop() command on the game over frame.  We also need another button, just like on frame 1 but this time the button will take us back to the start.  Let’s also add a Game Over, or Congratulations type message to the stage!  Place another button on the stage, name it playAgainBtn and add this code to the timeline:

Now if we test our game we should have something like this:

(You might notice that the game over screen displays before the final target has fallen.  This is because the target animation takes several frames, so click on frame 2 in the timeline again and hit F5 a few times, that will give a delay of a few frames before the game over screen is shown!)

Gun sight – custom mouse pointers!

Clicking targets with a mouse is all well and good, but it would look a lot better if we were aiming with a gun sight rather than a mouse pointer!  Draw a gun sight on the stage (in frame 2), hit F8 and turn it into a MovieClip, and give it an instance name of sight (or you can just use the one I made in the project files!)

Now let’s edit the Targets class again to handle the sight.  First we’ll write a simple method which makes the sight object follow the mouse:

Notice that the parameter is an Event, and again we’ll be using a listener to call this method.  This time however, rather than attaching the listener to a button we attach it to the stage, and the event we use is ENTER_FRAME which means that the moveSight() method will be called every single frame (30 times each second).  Here’s the code that we add to the StartGame() method:

stage.addEventListener(Event.ENTER_FRAME, moveSight);

We also need to hide the mouse pointer:

Mouse.hide();

We also need to include the Mouse class so we can use mouseX and mouseY so add this after the other imports at the top of the file:

import flash.ui.Mouse;

If you were to test the game at this point you’ll find that the sight goes behind the targets.  That’s because every time we add a new movieclip to the stage it gets added to the top of the display list, which makes it appear at the front.  Since the sight was in the game before we added the targets it’s at the back so we bring it to the front with this line, added after the addTargets() call in the StartGame() method:

this.setChildIndex(sight,this.numChildren-1);

Almost done.  Just a little tidying up to do.  Since we added an event listener to the StartGame() method, we should remove it in the endGame() method, and also show the mouse pointer again ready for the player clicking on the PLAY AGAIN button!  We also don’t want the sight on the game over screen, so let’s remove it.  Add this code to the endGame() method and then we ‘re ready to add the scoring:

Adding a simple score

We’re going to use a timer for the score, and we’ll be displaying the result in a text field so we need 2 more imports:

import flash.utils.Timer;
import flash.text.TextField;

Now in the FLA go to the game over frame and add a dynamic text field and call it scoreText.  You can also add some text saying that this is the final score, and we’ll add one more line of code on the timeline which will call a method to display the score:

getScore();

So to finish up the game let’s add the code needed to time the hits on the targets, and give the player a score they can try and beat each time they play!  Firstly we’ll need another class variable:

private var timer:Timer;

Then we need to add these 2 lines to the end of the startGame() method:

timer = new Timer(1);
timer.start();

This creates a new timer starting at 1, and sets the timer going.  It will count until it is stopped, so let’s add the following code to the endGame() method:

timer.stop();

Now all that’s left is to display the output of the timer on the game over screen, and for that we’ll write our final method:

Well done, we’ve finished our little game and if you give it a test now you should see something like this:

How to make a Flash game – how to improve?

Well our little game is very basic, but in fact you’ve learned an awful lot by going through this tutorial.  You now know how to set up an FLA and a main class for a game, how to handle user input, control movieclips, handle simple animations, generate random events, deal with listeners and more…

Now I agree that this targets game on it’s own would get rather boring pretty quickly, but the best way to learn is by doing.  So why not take this example and experiment with it, extend it, put your own mark on it and create your own unique game?  (and if you do, post a link here in the comments so others can see your cool game!)

Here are a few examples of ideas for improving or extending the game, and more than likely I’ll return to one or two of these in a future article myself…

• Format the score - Why not show the actual time in seconds and milli-seconds?  Or turn it into a countdown timer so the higher the score the better?
• High score - Maybe you want a high score table so you can compete with your friends?
• Accuracy - Perhaps you’d like the player to score better for being more accurate, and shooting nearer the middle of the targets?
• More targets - What about generating new targets on screen as the old ones are hit?  You could keep generating new targets for 30 seconds and the score would be how many were hit in that time, or how accurately they were hit, or a combination of the two!
• Moving targets - How about moving the targets around to make them more difficult to hit?
• Bad targets - Taking that idea further you could have good and bad targets where the bad targets would make you lose points!
• Ammunition - Maybe your gun can only hold so many bullets, and you’ll need to reload every few shots?
• Different levels - Maybe this would be just one level, in a much bigger game.  Other levels might have targets moving across the screen, clay pigeons (skeets) to shoot, or any other type of shooting game – the only limit really is your imagination!

As you can see, once you learn how to write Flash games you really are only limited by your imagination.  Developing Flash games is a lot of fun, not to mention profitable if you get good at it and start attracting paying clients!

Over the coming weeks and months I’ll be adding more and more tutorials to this site, covering different aspects of game development, and showing you how to make Flash games of different types.  If you liked this tutorial and have any suggestions for future tutorials please leave a comment or send me an email, and if I like the idea I’ll use it!

Download the project source code files

Share |