Want to thank me for making this book available for free? Just buy Special Edition Using Macromedia Director MX and we'll call it even!

Advanced Lingo For Games
by Gary Rosenzweig

Chapter 5 Section 1

Jigsaw puzzles involve a number of playing pieces that fit together to form a complete picture. The actions by the user are simple click-and-drag actions. They do, however, expect that the pieces will join to each other to form larger pieces.

Figure 5.1 shows the example jigsaw puzzle game from the CD-ROM. This example includes a puzzle where all the pieces are simple squares, and another where they are odd shapes.

Figure 5.1

This jigsaw puzzle is partially completed. The pieces that are linked together will move together.

Dragging

Clicking and dragging is something that was used in the game in Chapter 3, "Matching Game." However, there are several important differences here.

First, when pieces are dragged, they should move to the front of the screen, on top of other pieces. We don't want the user losing the piece under another when we are trying to create the illusion that they have lifted it up off the table.

Second, when one piece has been successfully linked to another, both pieces should be dragged together from then on. This gets even more complex when several pieces have been joined.

Creating Puzzle Pieces

A big issue, that should not be overlooked, is how to create the puzzle pieces. There are many ways to do this, but not a single one that is simple.

You can start with a full picture and start cutting pieces out from it to form other bitmap members. However, while doing this, you must keep the registration points matched. All the pieces created should have a registration point at the center of the whole puzzle, not the center of each piece. By doing it this way, the program knows when pieces are correctly positioned relative to each other because their loc properties are the same.

Figure 5.2 shows two paint windows side-by-side. You can see two different puzzle pieces, with the registration points for each. Notice how the registration points are at the center of the puzzle, not the center of the pieces. Check out the puzzle pieces in the example movie on the CD-ROM as well. It's important to understand this fundamental element of the jigsaw puzzle programs.

Figure 5.2

The registration points for the puzzle pieces all need to be lined up so that the registration point is always at the center of the completed picture.

One way to make jigsaw pieces is to draw a box around the image. Place this box many pixels out from the sides of the image. The bitmap now looks like a picture inside a box. The box helps keep the registration point stable while you cut out pieces. Then, duplicate the bitmap member, but cut out the image itself, leaving only the box. Make many copies of this box bitmap in the cast. Return to the original image and cut out a piece of it with the lasso tool. Cut it, don't copy it. Then, go to one of your box bitmaps and paste it in there. It should appear in the same space as it originally occupied, but now all by itself. Repeat this until there is no original image left. Now, return to each piece and remove the box around it by using the fill tool to fill the box pixels with white.

Of course, there are many other ways to create puzzle pieces. I'm surprised that someone hasn't created program that does it. Either way, you end up with a set of puzzle pieces. Place them in a separate cast library for organizational purposes. An example is shown in Figure 5.3. To keep things simple, these pieces are just plain squares.

Figure 5.3

A cast library filled with square puzzle pieces.

If your puzzle pieces have been made correctly, then you should be able to drag all the pieces to the Stage or Score and they should fit together perfectly. Don't worry if they look like a mess at first, you will probably need to change the ink of all those sprites to "background transparent."

Random Placement

Now that all your pieces are on the Stage, you'll notice that the puzzle is all done! To make it a little more of a challenge for the player, you might want to mix them up a little. You can do this manually, by moving the sprites around. However, this would mean that the game always starts with the pieces in the same location.

A better way to do this is to use Lingo to place each piece randomly on the Stage at the start of the game. This Lingo code has the additional task of making sure no pieces hang off the edge of the Stage, or touch other pieces.

Payoff

The reward for playing a jigsaw puzzle game should be just seeing the finished puzzle. But, alas, some players (and producers) demand more. As in past chapters, this game detects when the puzzle is complete and automatically goes to another frame. Here, you can place the final image, or perhaps a congratulatory animation.

Special Effects

Although you can place sounds in the game for both clicking and dropping, all this game really requires is a sound for the case in which two pieces become linked together.

Another special effect that can be used for this game is the cursor change. We can have the cursor change to a hand when it is above a piece, and change to a closed hand when the player grabs a piece.