Designing Web Gamesin Flash

Given as part of Gary Rosenzweig’s day-long tutorial on Shockwave Games

Scott Kim, scottkim.com

Game Developers Conference 2001

Win Win

Over the last year I have built 30 games in Flash 4. In this talk I will describe how I built a game called “Win Win”. Usually I work with other people who do art and programming, but in this case I did the programming and most of the art myself. The goal here is to move both balls onto both stars simultaneously. Pressing an arrow key causes both balls to move one square in that direction. You don’t want to fall into a hole or off the edge of the board. If a ball hits a wall it won’t roll any further, but the other ball may still be able to move.

For MentalWorkout.com

I built Win Win for mentalworkout.com, which was launched as part of an ad campaign that ad agency TMP Worldwide is doing for the business consulting company Cambridge Technology Partners (recently acquired by Novell). If you go to the site, you can download a copy of this game. My Flash game was embedded in a larger Director program to make a stand-alone Director projector.

Based on Double Maze

Win Win is based closely on an earlier game I designed for the Segasoft web site.

Why Flash?

Runs everywhere (vs. Director) Graphic (vs. Java) Programming (vs. HTML) Flash 5 has better programming

environment

Although Shockwave is more capable than Flash, Flash has a huge advantage in compaitibility — something like 90% of all browsers support Flash, making it even more compaitble than Java. Flash isn’t great for action games, but puzzle games don’t need speed.

Flash 4

No arrays. Use interpreted variable names:FLASH 4: Set Variable: “array” & “4” = 0FLASH 5: array[4] = 0

Movie clips act like objects.

Flash 5 has a much better programming environment than Flash 4, but I’ll be showing you examples built in Flash 4. I’ve modified the programming langage a bit to make it easier to read (and much more like Flash 5 syntax).

Programming Techniques

1. Data Structures

2. Event Loop

3. Parsing a Text Field

4. Scripted Motion

5. Falling Ball

6. Undo

7. Scoring

8. Art, Sound, Interaction

9. VariationHere are the techniques I used to build Win Win. Let’s look at them one at a time.

1. Data Structures: Cells

Win Win is played on two side-by-side square board. Each board has holes and walls. To represent a board I used three arrays of movie clips, one array each for the cells, horizontal walls, and vertical walls. There are two copies of each array, for the Left and Right boards. The two arrays that represent cells, LC and RC, which are indexed 1 to 6 in the horizontal and vertical directions. Each cell can have one of three possible states: Plain, Hole or Goal. In addition, the Ball is always located on a cell.

1. Data Structures: Cell Clip

Each cell is represented by an instance of a movie clip. This representation is space efficient, since every cell is an instance of the same clip. Within each clip different frames show the object in each of its possible states, as shown above. To change the state of an object, I send it a message to go to a different labeled frame. Using movie clips this way is a common trick in Flash.

1. Data Structures: Walls

There are also separate arrays that represent the vertical and horizontal walls at the edges of cells. Here are the arrays for the vertical walls. Note that there are seven columns in the array, not six, since vertical walls can occur at either the left or right edge of a cell. There are similar arrays for the horizontal walls.

1. Data Structures: Flags & Sizes Initialization:finalScore = –1theQuit = –1moveNumber = 0score = 0penaltyFlag = FalsewinFlag = FalseFrames in Cell clipframeOn = 5frameHole = 6frameGoal = 10Grid position, spacingLx0 = 59Ly0 = 58dx = 36dy = 36Rx0 = Lx0+(6*dx)+dxRy0 = Ly0

Here are the main variables set in the Initialization routine. The Win Win game, written in Flash, is embedded in an enclosing program, written in Director, which navigates between different games and keeps track of scores. The Flash program tells the Director program that it is done executing by setting the variable theQuit to 1, and setting the variable finalScore to the score.

The moveNumber keeps track of which move the player is currently on. Normally moveNumber increases by one every time the player moves. When the player undoes a move, moveNumber decreases by 1. The score increases by one every time the player makes a move, just like moveNumber. But the score never decreases: when the player undoes a move the score increases by 1, and when a ball falls into a hole, the score increases by 5, as a penalty.

The two flag variables penaltyFlag and winFlag are are set True when certain conditions occur, in order to let the main event loop know what to do. Finally there are six variables that keep track of the positions and spacing of the board grids. This makes it easy to reposition the boards without having to change numbers in many places.

2. The Event Loop

As in most games, the main control structure is an event loop that waits for user input, then does an action based on the input. The main loop checks to see if the game has been won, or if the ball has fallen off the board, requiring a penalty. In either of these cases it invokes the appropriate subroutine. Events are initiated when the user either types an arrow key or clicks an arrow button. The script decides how each ball should move, then updates the ball positions. RecordPosition stores each board position in a list by move number, so Undo can go back to an earlier position. Finally, there are scripts for the Restart, Undo and Quit buttons.

3. Parsing a Text Field

Loop While (v<=6)

If (v>0)

Call ("ParseVWallRow")

End If

Call ("ParseHWallRow")

End Loop

Most puzzle games need a way of specifying opening position. In a conventional programming language you can do this by initializing the values in your main data structure. In a graphic authoring tool like Flash you can do this by arranging objects directly on the screen. For most of my games I prefer to specify a gameboard through an ASCII text file that makes it easy for me to create a position by typing it in. Here the text file is actually a text field positioned off-screen to the right. You can see this field during authoring, but not during playback. This requires a bit of programming that reads the values in the text file and positions objects accordingly. As long as you assume that the syntax of the text field is exactly right, it is easy to write a parser.

3. Parsing a Text Field: one row

EMPTY:Else If (substring(s,n,1) == " ")

Begin Tell Target (cellName)

Go to and Stop ("Plain")

End Tell Target

HOLE:

Else If (Substring(s,n,1) eq "H")

Begin Tell Target (cellName)

Go to and Stop ("Hole")

End Tell Target

GOAL:If (Substring(s,n,1) eq "G”) Begin Tell Target (LC[h,v]) Go to and Stop ("Goal") End Tell Target LGoalh = h LGoalv = v

BALL:Else If (Substring(s,n,1) eq "B") Set Property (LBall, X Position) = Lx0 + (h-1)*dx Set Property (LBall, Y Position) = Ly0 + (v-1)*dy Lh = h; Lv = v

Here is the script that processes an individual row of vertical walls and cells. The possible symbols that can occur in such a row are:

| = vertical wall G = goal B = ball H = hole Note that a ball cannot start off on a hole or goal cell.

4. Scripted Motion: Move RightDecide Move Types when action is Move Right:If (GetProperty (LV[Lh, Lv], _currentframe) = frameOn) Lmove = "bounce"

Else If ((GetProperty (LC[Lh+1, Lv], _currentframe) = frameHole) OR Lh=6) Lmove = "fall"

Else Lmove = "move"

End IfEnd If

Most animators create motion in Flash (or Director) by putting objects in different positions on different key frames. That works fine as long as the motion is always the same. For interactive games, it is better to drive the motions from a script. Here I store the X,Y positions of the two balls in variables, then update the positions whenever a cursor key is pressed. Note that I invoke different motions depending on whether there is a wall to the right. I could have made the animation of a ball sliding from one square to the next last several frames, but that can make the game feel sluggish, especially on slower computers. So instead I made the ball pop instantaneously to the next position, and relied on the sound to create the illusion of motion.

4. Scripted Motion: Wall? Hole?Bounce:

If (Lmove == "bounce")

Begin Tell Target ("/sounds")

Go to and Play ("Bounce")

End Tell Target

Fall:Else If (Lmove == "fall") Lh = Lh+1 Begin Tell Target (Lball) Go to and Play ("Fall") End Tell Target penaltyFlag" = True

Move:Else If (Lmove == "move") Lh = Lh+1 Begin Tell Target ("/sounds") Go to and Play ("Move") End Tell Target

Do after everything else:Call ("UpdateBalls")Call ("CheckWin")

Here is the code that actually resets Lh, which determines the horizontal position of the ball. The actual object position is updated in the subroutine “UpdateBalls”.

5. Falling Ball

When a ball goes off the edge or into a hole it falls off the board. Originally I thought I would have to animate the ball so it would pass behind part of the board. Depending on where it fell, it would pass behind different parts of the board. Rather than have lots of special cases, I decided to use a visual trick that avoids the problem of deciding what should pass behind what. There is just one animation of the ball falling. The animation stays entirely within a square, so it never needs to pass behind part of the board. Instead of travelling down and to the right a great distance, the ball shrinks and fades to the background color as it moves a tiny distance down and to the right. Together with the sound effect, this creates the illusion of a falling ball.

6. Undo

RecordPosition:oldLh[moveNumber] = Lh

oldLv[moveNumber] = Lv

oldRh[moveNumber] = Rh

oldRv[moveNumber] = Rv

moveNumber = moveNumber+1

score = score+1

Undo:If (moveNumber>0)  moveNumber = moveNumber–1  score = score+1  Lh = oldLh[moveNumber]  Lv = oldLv[moveNumber]  Rh = oldRh[moveNumber]  Rv = oldRv[moveNumber] Call ("UpdateBalls")Else Go to and Play ("Play")End If

The Undo button lets players back up as many moves as they want. To do this I created an array that records the positions of the two balls on each move. When the player presses the Undo button, the game resets the balls to that position. Note that the score is NOT reset.

7. Scoring

Penalty:moveNumber = moveNumber-1

score = score+5

penaltyFlag = False

Lh = oldLh[moveNumber]

Lv = oldLv[moveNumber]

Rh = oldRh[moveNumber]

Rv = oldRv[moveNumber]

Call ("UpdateBalls")

Score: INITIALLY: 0 MOVE: add 1 UNDO: add 1 FALL: add 5

Since players can compete for prizes on mentalworkout.com, I need a way of scoring the game. I wanted a scoring system that would make it hard to achieve the best possible score, so everyone’s scores wouldn’t tend to cluster on the same best number. Here, the score is the number of moves you take to reach the goals. Lower scores are better. Note that you are penalized five points for falling into a hole, but allowed to continue playing. Players normally have to play a Win Win puzzle many times before achieving the best score.

To implement this scheme I have two variables: moveNumber = Increases when you make a move, decreases on Undo, score = Always increases. +1 on undo, +5 on fall into a hole

7. Scoring: animated penalty

If a ball falls off the edge of the board or into a hole, the balls are put back where they belong, and a 5-point penalty is added to the score, instead of restarting the game. To make sure the player understood what was happening on a penalty, I carefully animated a “+5” crashing into the score after a ball fell. The animation is designed to catch the player’s attention, and explain what is happening.

8. Art, Sound: color palette

Programming isn’t the only skill that goes into building a game. Art, sound design and writing matter too. Even if you don’t do them yourself, it is important to understand their importance. I created the art myself in Illustrator, then imported it into Flash. The colors are based on a color palette given to me by the art director. Note how different the effect is from the original game Double Maze. I change the art both to avoid copyright infringement (copying art or the name of a game is generally illegal), and to fit the look of the ad campaign.

8. Art, Sound: walls

One of the main art issues was how to represent the walls. I needed walls that looked three dimensional, yet (for convenience of programming) never blocked the balls. I used a technique common in computer game art: beveled walls that are light one one side and dark on the other. Another approach, used by the game Mummy Maze (popcap.com), is to use short shadows. Most of the sounds were given to me by the client. I spent a good deal of effort editing the sounds in Soundedit to get them to be just the right length and have the right impact. A few sounds, like the sound of the ball sliding, I created from scratch. I chopped an abrasive sound out of a longer sample, filtered it, and reversed it in time to get the start of the sound. Good user interface design is critical in building a game. I have redundant controls that let you play the game with either the keyboard or mouse, since different players prefer one or the other. An important issue is responsiveness: nothing is more frustrating to a player than having to wait for the screen to update after making a move.

9. Variation: Convergence

One of the secrets of surviving in this business is to steal from yourself as much as possible. Here is a puzzle I built for NewMedia.com shortly after building Win Win. The graphics, sounds and themes are different, and the rules are slightly different (three objects on one board, vs. two objects on two boards), but most of the code is the same.

9. Variation : Tilt Maze

Another maze that uses similar rules is Tip Mazes by Andrea Gilbert She built this game in Java, as part of her highly original maze site clickmazes.com.

Conclusions

FlashScript is a full programming language Tips: clips as objects, parsing text field Strategy: re-usable puzzle engine For the notes from this talk, see

www.scottkim.com