The Game Plan: Four Phases of Game Design


Game development includes the four phases we introduced earlier. The following sections discuss those phases in detail.

Note 

Many thanks to Jonathan Brzyski for contributing his illustrations to the Flash movie used in this chapter. You can learn more about Jonathan at www.humanface.com/brzyski. This edition of the Macromedia Flash Bible uses a modified version of the original hangman.fla file created by Veronique Brossier, discussed in the Macromedia Flash MX Bible (Wiley, 2002). We've updated this version to use an object-oriented programming model with ActionScript 2.0.

Game Design

Designing a game is creating a fantasy world, a story, and characters with defined roles and goals. It establishes a structure with a clearly defined set of rules and a scoring system. In a single-player computer game, such as the one we created for this chapter, the computer acts both as the opponent and the referee.

This traditional Hangman game presents the user with a number of empty slots corresponding to the letters of a word. The player must guess the word, entering one letter at a time. When a player guesses correctly, the letter appears in the appropriate slot. A wrong guess and the hangman is revealed, one body part at a time. It is clearly understood that the hangman is a representation of the state of the user in the game. Being hanged represents defeat, but no harm is done. If the user guesses the word before the body is complete, he or she wins the round; otherwise, the man is hanged, and the user has lost the round.

Interaction Design

Interaction design is creating the visual representation of the mechanisms of a game: It determines how to play the game and communicates the rules to the user.

The interaction of our game is very simple, and the design should be just as simple. To keep the interface to a minimum, the alphabet both represents the choices and displays the user's selection. The character's physical state is a character representation of the user as well as an indication of the score within one round.

For the Hangman interface, you need the following:

  • Text fields to display the empty slots for the letters of the word to guess.

  • A listing of the alphabet that indicates letters already selected as well as ones that remain. This listing is also the device by which the user can select a letter.

  • A field for feedback from the computer referee.

  • An area to display the score.

  • The hangman character.

Visual and Sound Design

The visual design is essential because it is the first and longest-lasting impression. It communicates the mood of the game. Ours is fun, colorful, and somewhat humorous.

This particular game is fairly limited, with not much of a narrative. Nonetheless, the character drawing and animation should keep the user entertained: The hangman is now an alien character going back to the mother ship. Each round was designed with a different set of colors to give some visual diversity. The alien choice is meant to be humorous, both as a homage to the old computer games that used such characters and as a spoof of the multitude of computer demonstrations and illustrations using aliens.

The alien character and the background, including the selection of color schemes, were created by Jonathan Brzyski, a talented artist with a sense of humor (see Figure 31-1).

image from book
Figure 31-1: Our version of the hangman is a tribute to aliens and old computer games.

Of course, good sound effects are an important complement to the visual. They translate a mood and are helpful to indicate a win or a loss. They also are crucial in supporting and reinforcing animation.

Programming

Programming a game is the task of asking a series of questions and making decisions, including asking new questions based on the answers, in a language and syntax that the computer can understand. Writing short and task-specific functions is helpful to break down the logic of the game into discrete elements.

The programmer must deconstruct the game in terms of a dialogue between the computer and the player. It must address every detail, no matter how obvious it seems. By thinking of the flow of events ahead of time, you will be able to write code that can handle several aspects of a problem at different times of your game cycle.

Finally, with every new update, Flash provides new functions to simplify our scripting task. Becoming acquainted with them streamlines this process and makes your code easier to write and more elegant.

In this updated version of the game in this book, we've rebuilt the entire code base for the Hangman game. The three class files associated with the project, GameModel.as, GameView.as, and GameController.as, use a loose interpretation of the Model-View-Controller (MVC) design pattern. There are whole books dedicated to the topic of design patterns in computer programming, and it's beyond the scope of our chapter coverage to describe this pattern in intricate detail.

For starters, though, let's define a design pattern. A design pattern, when discussed with respect to computer programming, is simply a standard solution to a common programming problem. Because ActionScript 2.0 is object-oriented, the Flash developer community has implemented several design patterns from other computer languages to their ActionScript coding practices. Many of our examples in this book simply use a collection of function calls to build interactivity into the Flash movie's user interface. However, as you start to build more complex Flash movies, you will find that you have to designate roles for each piece of your code — if you just add one function after another on frame 1 of your Main Timeline, pretty soon, you'll have 600 lines of code with little or no organizing principle. So, a design pattern can help you organize your code because the pattern provides a framework for your code. Of course, you still have to write your own code, but the pattern establishes rules for how operations within the code can be conducted.

Let's break down the design pattern used by this version of the Hangman game. The overarching design pattern is called the Observer pattern. The Observer pattern's "rule" is fairly simple: An object in your code can facilitate changes to other objects. In ActionScript, you've likely practiced this concept a few times when you've used the User Interface components in previous examples shown in this book. For example, you can have a Button component's "click" event observed by several other components within the movie. With respect to the Hangman game, the Observer pattern enables a core object (called the model) to broadcast changes in the game's state to other objects, such as a MovieClip instance responsible for displaying the current challenge word and the MovieClip instance responsible for displaying which letter(s) have been selected by the user. The MVC design pattern used by the game consists of three discrete pieces:

  • Model: The model for the Hangman game is a class named GameModel. This model has the following responsibilities:

    • Maintain a list of chosen words used within the game.

    • Track the current displayed state of the game, from loading the challenge words from a .txt file to the active/inactive states of the hangman alien pieces.

    • Check letters selected by the user for matches to the current challenge word.

  • View: The view for the Hangman game is defined with a class named GameView. GameView is also a Movie Clip symbol in the hangman.fla document's library. The view contains the necessary graphical elements to display the current game state to the user. For this game, the view consists of the hangman body parts, the artwork behind the hangman, the text fields to display the state of the challenge word, and the text to display the number of wins and losses during the current game. Some of these items are created at author-time and placed on the GameView symbol timeline, such as the background artwork and the hangman artwork. The text fields, however, are all generated in ActionScript.

  • Controller: The controller for the game is defined with a class named GameController, and, like the view, has its own Movie Clip symbol associated with it (of the same name) in the Flash document's library. The controller is responsible for communicating changes to the game state back to the model. In this game, the controller is fairly simple: a collection of buttons displaying the letters of the alphabet. When the user clicks a letter button, the model is informed of the new letter selection and processes that input accordingly.

You learn more about each of these classes as we deconstruct the Hangman game in the rest of the chapter.




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net