[ Back ]
With the Tilemap Editor (tm_editor) you 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. Looking at the examples of the Tilemap library and loading their maps in the editor will help you figure out how things fit together.
Let's have a look at one of the NaaLaa example games, Crap's Adventure:
The levels for this game was created with the Tilemap Editor.
Each level is represented by a grid of equaly sized tiles, 16x16 pixels large in this case. Each such tile can hold an image of the same size. This is what is usually called a tilemap.
The Tilemap library, used in conjunction with the editor, takes care of the rendering of tilemaps and also deals with collision handling.
It was mentioned above, that each tile in a tilemap can hold an image the size of the tile. But the truth is, that a NaaLaa tilemap can only use ONE image. However, this image in itself reminds of a tilemap. It has a fixed number of columns and rows, just like a tilemap, with tiles (or cells) the same size as the tiles in the tilemap. These kind of images are often referred to as "image sheets" or "sprite sheets". The image used for the level in the above screenshot looks like this:
As you can see, the image has 16 columns and 3 rows of tiles, and the level in the screenshot is constructed from these tiles.
The first thing you do when you create a new tilemap is to load an image holding the tiles you want to use. Load the image by clicking the "Load image" button, and set the tile size using the text fields next to "Tile width" and "Tile height". If you want all pure magenta pixels in the image to be transparent, mark the checkbox next to "Color key".
You can select which tile you want to use, when "drawing" on the map, with the large arrow buttons on the sides of the tile preview image.
If you click on the tile preview image, the color of its border will toggle between red and black. A red border indicates that the tile is an obstacle. Objects, such as the player, will be blocked by obstacles when using the TM_Move function of the Tilemap library to move them.
You can also click the "Browse" button to see all tiles and select one by clicking on it:
You can change the map size using the text fields next to "Map width" and "Map height". The size is measured in tiles. In this example, where the tile size is 16x16 pixels and the map size is 60x30 tiles, the actual pixel size of the map is 960x480.
Appart from an image, each tile in the map can store one game flag and one loader flag. A flag is just an integer value. You don't need to use this feature, and if you do, YOU are the one who decides what the flags represent. You can fetch all loader flags as an array after successfully loading a map using the Tilemap library. And the game flags can be accessed per tile at any time from your code when a map has been loaded.
I usually use loader flags to store the player's and enemies' starting positions. And in a game where you can break bricks to find items (as in Super Mario Bro's), game flags could be used to determine what type of item should be spawned.
Set the current game or loader flag, that you wish to add to the map, through the text fields next to "Game" and "Loader".
You can use the currently selected image tile, game flag or loader flag as a brush and draw in the map view with the left mouse button. Erase with the right mouse button. Game flags are seen in the map view as green numbers and loader flags as yellow numbers.
You can only edit one thing at a time, image tiles, game flags or loader flags. Select which using the radio buttons next to "Image", "Game flag" and "Loader flag".
You can scroll over the map using the arrow keys on your keyboard. You can also "copy" the value (image tile, game flag or loader flag) of a tile by holding down left shift key while clicking on a tile in the map view.
[ Back ]