Article Preview

COLUMN

Getting Started On TanGram

Building a puzzle game

Issue: 2.4 (March/April 2004)
Author: William Leshner
Author Bio: William Leshner has been programming for twenty years and programming Macs for ten. He has spent a good deal of the last several years building REALbasic applications, utilities, and plugins, including KidzMail and SQLitePluginPro.
Article Description: No description available.
Article Length (in bytes): 9,455
Starting Page Number: 40
Article Number: 2420
Related Link(s): None

Excerpt of article text...

In our last article we finished off the StocksSocket project and we are ready to begin something new. I thought this time we'd work on a puzzle game. The game I have in mind is modeled after a popular puzzle called Tangram, in which you manipulate various polygons to make pictures. Usually you have a book of pictures and you have to construct each picture with the polygons. Each picture is a miniature version of an already constructed picture drawn all in black so you can't tell where the individual pieces go. In our REALbasic version of Tangram, the puzzles will be randomly selected from a pool and shown to the user to solve. The user will drag seven shapes around with the mouse in an attempt to create the picture. At any time the user can ask to see the solution. It may sound a little complicated right now, but once we get into it, things should become clearer. What makes TanGram particularly interesting is that it lends itself quite well to REALbasic's Object2D classes. We will be making heavy use of those classes both to draw the basic shapes the user will drag around, and to draw the small puzzle picture itself. I also plan to touch a bit on some of the issues involved in creating a cross-platform application. TanGram should run equally well on Mac OS 9, Mac OS X, and Windows. However, we will have to be careful in a few places to make sure that we achieve a good user experience on all platforms.

Getting Started

They say a picture is worth a thousand words, and since I don't have a thousand words to spare in this article, I'll just direct you to Figure 1, where you can see what the main TanGram window looks like. The main area with the blue shapes is where our player will drag the pieces around to make pictures. The ImageWell in the upper-right corner is where we will display a puzzle to be solved. There are also two buttons below the ImageWell and a StaticText below the player's area. The two buttons allow the player to reveal the solution to the puzzle and go to a new puzzle. The StaticText gives the player a bit of explanation about how to rotate and flip a piece. When the user clicks the "Show Solution" button the small, black puzzle picture in the ImageWell is redrawn with a white border around each piece so that the player can see the solution. An example of this can be seen in Figure 2.

In order to build TanGram, we are going to have to figure out how to move, rotate, and flip 2D shapes. We also need to figure out how to create a small, black puzzle version of our shapes, and how to draw them with either black or white borders depending on whether we are displaying the solution or not. 2D shape manipulation is the central problem of the entire TanGram project and we should take a few minutes to make sure we have a strategy to solve that problem.

...End of Excerpt. Please purchase the magazine to read the full article.