- Placing Interactive Elements
- Game Play
- Encapsulating the Game
- Adding Scoring and a Clock
- Adding Game Effects
- Modifying the Game
This chapter is from the book
This chapter is from the book
This chapter is from the book
Encapsulating the Game
At this point, we have a game that runs as a whole Flash movie. The movie is MatchingGameX.fla, and the ActionScript class is MatchingGameX.as. When the movie runs, the game initializes and starts. The movie is the game, and the game is the movie.
This works well in simple situations. In the real world, however, you want to have introduction screens, gameover screens, loading screens, and so on. You might even want to have different screens with different versions of the game, or different games completely.
Flash is great at encapsulation. A Flash movie is a movie clip. You can have movie clips inside of movie clips. So, a game can be the movie, or a game can be a movie clip inside the movie.
Why would you want to do this? Well, for one thing, it makes it easy to add other screens to your game. So, we can make frame 1 an introduction screen, frame 2 the game, and frame 3 the gameover screen. Frame 2 would actually contain a movie clip called MatchingGameObject7 that uses the class MatchingGameObject7.as.
Figure 3.10 shows a diagram of the three frames we plan to have in our updated movie, and what each one contains.
)
Figure 3.10 The second frame of the movie contains a movie clip, which is the actual game. The other frames contain supporting material.
Creating the Game Movie Clip
In MatchingGameObject7.fla, there are three frames. Let's skip right to the second frame. There, we can see a single movie clip. You might not even notice it at first because it is a completely empty movie clip and so appears as a small circle at the upper-left corner of the screen.
In the library, this movie clip is named MatchingGameObject7; and as shown in Figure 3.11, it is assigned the class MatchingGameObject7.
)
Figure 3.11 This movie clip will use the Matching GameObject7.as file as its class.
So, essentially, this movie clip takes over the entire game, and the main movie timeline is now a larger movie clip wrapped around it.
When the movie gets to frame 2, the MatchingGameObject7 movie clip springs into existence, runs the class constructor function in its MatchingGameObject7.as class, and the game plays inside this movie clip.
When the movie goes on to frame 3, the whole game will disappear because the movie clip only exists on frame 2.
This enables us to put frames before and after the game (and thus leave the game code alone to just worry about the game).
Adding an Introduction Screen
Most games would have an introduction screen. After all, we don't want to throw players right into the game. They may need an introduction or instructions.
The intro screen will contain some scripting on the main timeline, in frame 1. First, it must stop the movie so that it doesn't continue past frame 1. Then, it should set up a button to allow users to start the game.
The frame script first needs to assign a listener to a button we will create on the first frame. We'll assign the name playButton to that button.
The event listener will call the function startGame, which simply issues a gotoAndStop command to the main timeline, telling it to go to the frame called playgame, which is frame 2.
We will also put a stop command on the frame so that when the movie runs, it will stop on frame 1 and wait for the user to click this button:
playButton.addEventListener(MouseEvent.CLICK,startGame);
function startGame(event:MouseEvent) {
gotoAndStop("playgame");
}
stop();
On the second frame, the empty movie clip MatchingGameObject7 will sit. Then, we need to rename the document class AS file to MatchingGameObject7.as so that it will be used by this movie clip and not the main movie.
We need to make one change in the code. There is a reference to the main timeline when the game is over. The gotoAndStop command will no longer work properly because the game is taking place in the movie clip and the gameover frame is on the main timeline. We just need to change this as follows:
MovieClip(root).gotoAndStop("gameover");
The gameover frame of the movie is the same, for the time being, as in MatchingGame6.fla. It is just a frame with the words Game Over on it.
The MatchingGame7.fla movie is a little different from the preceding six versions in that it doesn't have a document class assigned to it. In fact, there is no MatchingGame7.as file at all. Take a close look at how this movie is put together, along with Figure 3.10, to understand how the game fits into the larger main movie.
Adding a Play Again Button
On the last frame, we want to add another button that enables players to play again.
This is as simple as duplicating the original play button from frame 1. Don't just copy and paste. Instead, create a duplicate of the button in the library. Then, change the text on the button from Play to Play Again.
Your gameover frame should now look like Figure 3.12.
)
Figure 3.12 The gameover screen now has a Play Again button on it.
After you have added this button to the third frame, name it playAgainButton using the Property Inspector so that you can assign a listener to it. The frame script should look like this:
playAgainButton.addEventListener(MouseEvent.CLICK,playAgain);
function playAgain(event:MouseEvent) {
gotoAndStop("playgame");
}
Test out MatchingGame7.fla and see these buttons in action. You've got a very versatile game framework now, where you can substitute content in the intro and gameover pages, and restart the game without fear of leftover screen elements or variable values. This was quite a problem in ActionScript 1 and 2, but isn't an issue with this sort of framework in ActionScript 3.