Creating Tile Collections


Having a well chosen, high-quality collection of tile images is crucial to the game. This in turn requires having chosen an appropriate subject, choosing suitable source images, and having the tools and expertise to manipulate those images to get the best tiles out of them.

Graphics Tools

In order to manipulate images into well formatted tiles, you need a graphics tool with the following capabilities:

Open and save in GIF and JPEG format

Crop images

Scale images to a specific height or width in pixels

Adjust the contrast, brightness and saturation of the image

My experience on the Macintosh is that the best tool by far for this task is GraphicConverter, a shareware program well worth the $35 fee. It has many features that are perfectly suited to creating tiles (including a batch function for automatically scaling and adjusting images). It is available on the web at For a full list of recommended utilities, try these links.

Choosing a Tile Size

The tile size you choose must be influenced by the type of image you will be using and the screen resolution you will be servicing. While systems capable of resolutions of 800x600 and more are becoming common, many people don't know how to switch them and run only at 640x480.

In addition, larger tiles use much more disk space to save the images, take longer to load over the Internet, and most importantly require much more memory to render.

On the other hand, if you are sure that your target audience can handle it (and certainly as time goes on everyone will get better, faster computers that can) you are encouraged to design your tile set as large as you can.

The dimensions of the layouts (in tiles) are as follows:


Width in Tiles

Height in Tiles










Arched Bridge





7 1/2

Chinese Castle


















Luck Box






Very Easy

The standard board is 15 tiles wide and 8 tiles high (layout "Standard"). The "Compact" standard board is 11 tiles wide and 7 tiles high. The dimensions

For a 640x480 resolution, a tile size of
40x50 is optimal for the Standard layout, while the Compact layout can use 55x55 tiles. On some browsers, because of the extra screen space used up by menus, tools bars and such, you may need to reduce the tile sizes by a few pixels 40x45.

For a 800x600 resolution, a tile size of 53x75 is theoretically possible for the Standard layout (70x80 for the Compact layout), but again may need to be scaled down to 53x70 to allow for menus, tool bars, etc.

The proportions of the tiles may be varied, too. While a standard screen will allow for 40x50 tiles, if a square tile is more suited to your subject you could go with 40x40 (or use the Compact layout at 55x55). You could even go with 40x20, and use tiles which are wider than they are tall (are you a car or plane enthusiast?).

Other layouts may of course require (or allow) different tile sizes.

NOTE: All tile images must be the same width and height. The program will use the largest tile image width and height encountered as the size of the tiles, leaving gaps in tiles whose images are smaller than that maximum.

Fitting Images to Tiles

With a collection of images, fitting those images to tiles is sometimes difficult since the original images are often rarely proportioned the same as the tiles. Many times, too, a full size image simply reduced in size will not create a discernable tile image.

It is usually best to create several tiles from one image, and then choose the best. The first tile can be created from the entire image. Subsequent tiles should be created by cropping the original image to different areas of detail (for example, crop to torsos or faces for people and animals).

Adjusting Image Quality

Many of the images presented on the net are not of the best quality. Some have been over compressed, or compressed too many times, leading to "jaggies" and unsightly "artifacts" of the compression. Start with the best image you can.

Even when the overall quality of the image is good, many images look washed out. They have a poor contrast (i.e. the difference between colors), brightness and saturation (i.e. the amount of color in the image). Many images can be greatly enhanced by increasing the contrast slightly, increasing or decreasing the brigtness as needed, and very slightly increasing the saturation.

Unadjusted Image

Increased Contrast

Increased Contrast and Brightness

Increased Contrast, Brightess and Saturation


Before scaling an image down to tile size it is best to greatly increase the contrast, some times to comical proportions. By so doing, you will lose detail on small features (which will be lost in the reduction anyway), but you will increase the ability of the viewer to see larger details when the image has been reduced. In some cases, you may need to increase or decrease the brightness to further accentuate important edges in the image. Some images with intense color may also be improved by reducing the saturation as the contrast is increased (to compensate for the increase in color due to the increase in contrast).

When increasing the contrast ignore the background of the image and focus on the subject. When the tile is reduce, the background will be lost anyway.

Note that these contrast changes are best performed before reducing the size of the image, since reducing an image often blends adjacent colors and may lose the detail in the process.

Full Size Image

Scaled Image (40x50 Tile)

Original, Unadjusted

Slight Contrast Increase

Slight Contrast and Saturation Increase

Extreme Contrast Increase
Some Saturation Increase
Some Brightness Decrease


After the image is prepared you can reduce the size. Immediately after scaling you will usually get a better tile by further increasing the contrast just a bit, to help accentuate the edges in the image. Increasing contrast is preferable to using any "sharpen edges" function, because the increase in contrast gives a smoother result. The very small images created for tiles will often look jagged and artificial when subjected to a "sharpen edges" algorithm.

Original Image

Contrast, Brightness, Saturation Adjusted

Contrast, Brightness, Saturation Adjusted to an Extreme

Scaled to 40x50

Scaled to 40x50

Scaled to 40x50


Contrast, Brightness, Saturation Adjusted Slightly Again

Contrast, Brightness, Saturation Adjusted Slightly Again

Naming and Saving

Almost all tiles should be saved in JPEG format. Only tile sets based on cartoons will compress better and retain their quality when saved in GIF format.

You can use any name that your server allows, except that the name must follow a consistent pattern containing a prefix, the tile set number, an infix, the rank number (1 for tile sets with only one image), and an optional suffix. For example, if the prefix is "tile-", the infix is "-", and the suffix is ".jpg", then tiles would be named "tile-1-1.jpg", "tile-2-1.jpg", "tile-3-1.jpg", and so on.

The name chosen must be unique on the server which will host the game (some servers are case sensitive, others are not). It should not include slashes ("/"), since that characters is used in URLs to delimit directory and file names. Finally, the tile numbers should not have leading zeroes (use "1", not "01").

Bonus and Zoom Images

Bonus and zoom images are optional. They need not be included, and using one does not require the other (you can include zooms without bonuses, or vice versa).

Zoom images should usually be slightly larger versions of the tiles. Their purpose is to give the player a "closer look" at the tiles. Generally, a good zoom image would be 2 to 4 times larger than the actual tiles. You use the same techniques to create zoom images, but with more subtlety. Since the images are not as small, the changes in contrast and brightness do not need to be as severe.

Bonus images do not need to be scaled or cropped at all (unless you choose too), and do not need to be larger versions of the tiles. Often you may crop an image to produce a pleasing tile, but it is perfectly acceptible to use the original, uncropped image as the bonus.

Note that both zoom and bonus images can be any of any dimension. They do not need to be the same size, or proportional to the tiles (although for zoom images they should be).

When creating zoom and bonus images, take into account the size of the actual file, since it will take up space on your server (and you may have many of them). Generally, however, the player does not have to wait for a bonus image to load (he/she can continue playing, and only sees the bonus image when it is ready), so there is no great need to keep bonus images small.

One final note: You can use your bonus images as zoom images, and scale them down when displayed as zooms (by setting zoomFactor in the HTML).

Complex Tile Sets

As described in Game Components and Options, it is possible to provide more than one image for a tile set. This makes the game more difficult play, since the player is tasked not only with matching visually identical tiles, but in some cases with matching conceptually similar tiles. For example, in a normal game the tiles might be images of the presidents of the United States. In a complex game, the tile set for president Clinton might include 4 different images (but all of Clinton). If you are really cruel, you might make one of the images which matches the Bill Clinton tiles be an image Bob Dole (or Kenneth Starr). If you are absolutely evil, you could use 4 different images for every president (not just one).

To impelement such a game, simply create the tiles you wish to use and name the additional tiles in each set with different rank numbers (i.e. the number after the tile set number). Note that all tiles must have an image for rank 1, but not all tiles need to have images in other ranks. It is perfectly acceptable to create rank 1 and 2 images for a couple of tiles, rank 1, 2 and 3 images for another tile, and only rank 1 and 3 images for yet another tile (no rank 2 image).

There are two basic approaches that you can take to creating multiple tiles for each set. One is to use conceptually related images (such as the Presidents of the United States example). Another method is to crop the same starting image in different ways to create each tile (the first tile is the entire image, the second is just the torso from the waste up, the third is just the head, etc.).

One reason for creating different numbers of tiles in each set is that you may not be able to get enough good tiles for all sets in the collection. One reason for supplying a rank 3 or 4 tile image without a rank 2 image is so that the game is only slightly more difficult at level 2 (where the rank 3 images are ignored), but much more difficult at level 3 (where rank 1, 2 and 3 images are used).

Please realize that when you create a game with multiple ranks it can be very, very difficult to play. You should probably set the game to load at level 1 initially, and provide a superior background image when the game is played at a higher level.


Background images require less effort than tiles, zoom and bonus images, but they are worth a moment's discussion.

In general, background images can be any size. Images smaller then the applet (or game window) size will be centered, and the exposed edges of the game will be filled in with the background color. Images more narrow than the starting tile structure are good because the player does not get any hint as to the content of the picture until he succeeds in removing a fair number of tiles. If a background image wider than the tile structure is used then the focus of the image should be at the center of the image, obscured by the tile structure.

It is perfectly acceptable to prepare only one background image, but background images can be varied randomly (to encourage players to play the game more than once), or by layout or level (to assign the more rewarding backgrounds to more difficult games). If background images are varied by level, the more rewarding images should be reserved for higher level games.

If multiple layouts are allowed, in some cases it might be desirable to vary the background images by layout, since some layouts expose/obscure different areas of the screen. For example, the Bridge layout primarily covers the sides of the background, so a background image whose focus is at the center will be almost completely revealed before the game even begins.

Back to the Host Kit Main Page