Article Preview

COLUMN

From Scratch: Building The TanGram UI

Issue: 2.5 (May/June 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): 16,509
Starting Page Number: 40
Article Number: 2520
Resource File(s):

2520.zip Updated: 2013-03-11 19:07:58

Related Web Link(s):

http://www.exaflop.org/docs/naifgfx/naifpip.html

Excerpt of article text...

Introduction

This is the second of six articles in which we are building a puzzle game called TanGram. As you may recall from the last article, Tangram is a game in which some number of polygonal shapes are dragged around and arranged to make pictures. The finished application will have a number of pre-made puzzles to challenge the player. Also, a player will be able to create and save puzzles to challenge friends and family members. In this article we will build the basic TanGram user interface and we will begin to implement some of that UI. We will see how to make shapes from Object2D objects, how to get those shapes to draw in a Canvas, and how to respond to mouse clicks in order to drag those shapes around in the Canvas. Let's get started.

Laying Out The Interface

The TanGram interface is quite simple; there is one window. Within that window is a large Canvas for dragging shapes around, a small Canvas for displaying puzzles to be solved, and a couple of buttons -- one to show the puzzle solution and one to go to the next puzzle. In order to make things look pretty, I have placed the small puzzle Canvas inside an ImageWell. The larger Canvas will draw a white background and a rectangle around itself in order to distinguish its boundaries. You can see a snapshot of the finished UI in Figure 1.

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