TM Editor

[ Back ]

With the Tilemap Editor you can create maps that you can load and use with the Tilemap library. If there's something you don't understand when reading this documentation of the program, it might help to have a look at the library.

The program has got three windows named Edit window, Tiles window and Map window. They're explained in detail below. In the Edit window you load and save maps and set up the image that your map's different tiles are stored in. In the Tiles window you select what image tile to draw with in the map window. In the last window, the Map window, you draw and edit your map.

The best way to learn how to use this program is probably to look at the maps of the Tilemap library's example programs!

The Edit window

To load a map, you click on the Load map button, and to save a map you use the Save map button.

To make a new map from scratch, you begin with loading the image containing your tiles. This image should be a grid of tiles of a constant size. Here you see an example of such an image:

The tiles in this image are 16x16 pixels large (actually, in the image you see above, they're 32x32 pixels, but that's just because it looked too damn small in its original size). This means that the image's width and height must both be multiples of 16.

When you have loaded an image, you enter the tile size on the right of the Tile size label. If your image should have a color key (a color that is to be transparent), you enter its RGB value on the right of the Colorkey label and make sure that the checkbox on the left is marked. As you make these steps, things will probably happen in the Tiles window.

Now, in the two fields on the right of the Map size label, you can enter the desired dimensions of your map. The size is measured in number of horizontal and vertical tiles. For example, if your game map should cover the entire game window and you're using a resolution of 640x480 pixels. and your tiles are 32x32 pixels large, you should set the map size to 20x15 (640/32 = 20, and 480/32 = 15). As you make these steps, things will probably happen in the Map window. But, of course, your map can be much larger than the game window! Note, that you can increase the map size without losing any data. But if you decrease the size of a map, the parts that are removed are gone forever!

The Tiles window

In the Tiles window you can click on the tile that you wish to draw with in the Map window. Here you can also decide if a certain tile is meant to be an obstacle in the game or not. An obstacle is a tile that objects (player, enemies ...) can't move through (if you're using the TM_Move function).

From start, all tiles have black borders. But if you double click on a tile, its border will become white. And the white border indicates that the tile is an obstacle. If you click on the tile again, the border will turn back to black.

If your game character all of a sudden can walk through walls or seams to be blocked by thin air, you've probably accidentally double clicked on a tile in the Tiles window.

The Map window

This is the window where you draw your maps. You draw by pressing down the left mouse button while the mouse cursor is over the gray grid, which has the size of your map.

On the bottom left, there are three radio buttons with the labels Images, Game flags and Loader flags. They represent the three layers that every map consists of.

If you mark the Erase checkbox, you can erase image tiles, game flags or loader flags the same way as you otherwise draw them.

If your map is larger than the window, you can use the four arrow buttons at the bottom right to scroll in any direction. If you mark the Screen checkbox, you can scroll an entire window at a time.

The image layer

When the Images radio button is selected you can draw on the map with the tile selected in the Tiles window. As you may have already figured out, this is the visible layer of the map, the one that the player will see when playing your game.

The game flag layer

Game flags, described in the documentation of the Tilemap library, are integer values that you can access from your code. On the map they're represented by yellow values. Each tile can have one value set. As an example, from the image above, you can use game flags to tell that a certain brick is to transform into a jewel once cracked. You can change the game flag value using the arrow buttons or the text field on the right of the Game flags label. You add a game flag by clicking on a tile in the grid.

The loader flag layer

You edit loader flags the same way as you do with game flags. They're represented by green values on the map. In your program code, you can get a hold of the loader flags, after loading a map, by calling TM_GetLoaderFlags. You can use different loader flags to indicate the player's and enemies' starting positions etc.

[ Back ]