- 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 MatchingGame7.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. You do this by selecting it in the Library, and then pressing the tiny i button at the bottom of the Library panelF or right-clicking and choosing Properties.
)
Figure 3.11 This movie clip uses the Matching-GameObject7.as file as its class.
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 disappears because the movie clip only exists on frame 2.
This enables us to put frames before and after the game (and thus leaves 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 might need an introduction or instructions.
The intro screen contains 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 event listener calls the function startGame, which issues a gotoAndStop command to the main timeline, telling it to go to the frame called playgame, which is frame 2.
We also put a stop command on the frame so when the movie runs, it stops on frame 1 and waits 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 sits. Then, we need to rename the document class AS file to MatchingGameObject7.as so that it is 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 no longer works properly because the game is taking place in the movie clip and the gameover frame is on the main timeline. We 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. The game code is now in MatchingGameObject7.as. 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 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 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.0.