Tile Mapping Primer

Tile mapping is a common technique to define graphic objects to be used to layout and desing a game levels. Assume that you want to create a jump 'n run game. Then you will create a world for every game level using a limited number of graphic objects that are used to build backgrounds, foregrounds or solid ground areas where the game characters walk around. You could of course draw such worlds as a huge bitmap but storing this image data would take too much memory.
Instead such game levels are divided into smaller tiles, e.g. 8x8 or 16x16 pixels and every world is defined by a map that just contains indexes into the library of tiles:

  

The example shows a simple piece of a level map with 35 tiles in a line an 5 tile rows where a single tile has a size of 16x16 pixels.
There are only 21 physically different of tiles in the tile library (also called tile set). So the tile map contains 175 entries using one of the 21 tiles of the tile library.

Phrases

There are different phrases concerning the tile mapping techniques. Here is a short list of terms that are commonly used:

tile... the small graphic item of fixed size used to build the tile map. Common sizes are 8x8 or 16x16 pixels per tile.

0-tile... there are parts in the map that don't contain a certain graphic portion. These areas are considered to be empty. The tile map uses a special empty tile for this, the 0-tile. It is the first tile of the tile library.

tile library/tile set... collection of all tiles that can be used to build a tile map. Usually a certain number of tiles may not be exceeded because of hardware limitations, e.g. Gameboy DS/Advance.

tile map... a rectangular area defining the world that is to be built out of the tiles in the tile library. Every entry in the map points to a tile in the tile library. Optionally there may be mirror setting so that a tile X of the library may be placed in the map with normal orientation or mirrored at x- and/or y-axis. This is supported by some hardware to save tiles in the library, because graphics are often symmetric.

Creating a Tile Map Project

There are two ways to create a tile map project. You can either create a fresh new project using menu File/New Project or you can turn an already existing bitmap or animation into a tile map project using menu Tile Mapping/Make Tile Map.
A tile map project uses every frame as a single tile map. A single project can have X tile maps of the same size.

New Project

When creating a complete new project you must set the project type to be Tile Maps. Then you can define the map size (in tiles) and the number of maximum tiles that may be included in the tile library.



Create from Image

If you have already created graphics that are to be turned into tile maps and a tile library then you can load the image/animation and use menu Tile Mapping/Make Tile Map.
A special dialog appears where you can define the size of the tiles. The bitmap size must be a multiple of the tile pixel size.

Tile Mapping Panel

As soon as you have a tile map project active then the corresponding tile mapping data panel at the top right of the main form is activated:



It shows the tile and map sizes of the current project and provides a couple of functions which will be described in detail later. Here is a short information about them:

#Tile... displays the number of tiles in the tile library.

Tile Palette... opens the tile library window showing all tiles.

Place Tiles in Map... one of the two modes to modify the tile map. This one assumes that your brush contains graphics made up of tiles from the tile library that are to be placed. The "D" sign is used to create duplicates of tiles within the tile library.

Modify/Create Tiles... this drawing mode assumes that you want to modify tiles ore create new ones.

Sync Mode... this special option deactivates the tile detection. If activated you can draw into the bitmap without modifying the tile map or the tile library. As soon as you deactivate this option again then the modifications are scanned and transformed into tiles and map entries.

Load Projects... as soon as you defined projects that are connected to share the same tile palette a "load projects" button appears to load all dpendent projects if they are not loaded yet.

General Usage and Behavior

There are a lot of tile map editors around suitable for every flavour. Each of them has advantages and disadvantages and the one included here has too.
Something that is different to all the other editors is that it's built into a normal paint software and that it does not divide between editing the tile map or the tile by using different work spaces. With other map editors you will have to separate work spaces. One work space is used to place tiles of the library in the tile map and the other work place lets you edit single tiles. A disadvantage of this approach is that you hardly see the overall graphics when you edit pixels of a tile. You mostly only see just the tile you edit. But complete objects are made up of a bunch of tiles and seeing just a single one is just like looking through a keyhole.

Within this tile mapping engine you can place tiles of the library as well es edit the tiles in place as if you would draw a bitmap without any tile mapping. But of course there some things to take care of. At first you must understand that there are still two edit modes you must choose from, "Place Tiles in Map" and "Modify/Create Tiles".

Modify/Create Tiles

This mode is used to create new tiles or to modify existing ones. You can use any drawing tool to modify the image (tile map). There will be two cases that are to be processed by the tile map engine after each drawing step: new tiles are created or existing tiles where modified.
The engine devides between these cases simply by checking if the modified area contained 0-tiles or not. As soon as you draw on a 0-tile are then new tiles must be created for the graphic portion to be added to the tile library. If you draw on existing graphic portions then they are made up of tiles from the library. Those tiles are updated accordingly.
At this point you will face the first tile mapping effect. If your tile map contains a tile at different positions then modifiying the tile physically will update all other positions, because they use just this tile. It's the same as with modifing a color in the color palette. All pixels using this palette entry will change its color.
If the tile mirror options are enabled in the settings then the engine will add tiles that match the mirror options only once to the tile library. The corresponding tile map entries will then know how to mirror the tile to display correctly.

Place Tiles in Map

To extend the tile map by placing more and more graphic objects into the world you use the place mode. This mode assumes that your brush contains graphic data that is already available in the tile library. If you try to place graphics that can not be found as tiles in the library then they won't be placed. A warning would be displayed.
When the place mode is activated then the lock grid will be automatically switched on to ensure that the tiles are placed at the correct positions (remember, this is still a normal paint software!).
As soon as you choose the rectangular brush picker then the tile engine assumes that you want to pick up an object or tile from the map to place it at another position. The place mode is then activated automatically and you can pick up any area of the screen, an object or single tile to place it anywhere else. The engine detects the graphic data, finds the corresponding tile in the library and updates the tile map.

In some cases it is useful to place tiles but to define copies in the library. For example you want to define areas for platforms by just using a single colored rectangle. As soon as you defined such an area, the tile engine will create tile. If you draw new areas then the engine finds the tiles in the library and uses them. If you now want to draw something into the single colored areas to create you graphics then all other positions of this tile would be updated which is not wanted.
The same happens if you want to create a copy of a graphic object that should get some other details. Since the engine always uses the tiles that are present in the library, duplicates are not possible.
To create duplicate tiles just activate the "D" sign. As soon as this is activated every tile that is placed will create a new tile in the library even if there is already such a tile.

Sync Mode

To have correct tile map projects every tile map MUST use graphic data from the tile library. As soon as there would be graphics that can not be rendered using a tile of the library then the graphics would be out of sync and useless for any tile map based game engine.
That's why the tile map engine scans for modifications after every drawing step, adding new tiles of updating the map entries with tile indexes of the library.
In certain cases it is useful to deactivate the syncronisation to work without having the tile engine to check and process, for example if you want to create new objects. When creating new graphic options then you will have areas that contain the same pixel data from time to time, e.g. just a single color. If the sync mode was enabled then the engine would create a single tile tile in the library. Now you want to add details to the single color areas and immediately the details would be propagated to all other positions where the single color was used. In this case you should switch off the sync mode. You can then draw feely whatever you want without having the engine to optimize or check anything. As soon as you are done just activate the sync mode and the engine will scan through the changes, updating, adding or reusing tiles.

Tile Palette Window

The tile palette window shows all tiles of the library in their given order.



You can select a single tile there to place it into the map as well as shifting it around in the tile library. For a detailed description look here.
To select and place tiles it is more handy to just pick up graphic portions from the map instead of using this palette window. When picking up from the tile map you can pick up complete objects to place them, not only single tiles!

Different Map Sizes

Because Pro Motion is an animation software where every frame must have the same size also all maps in a single project will have the same size. For games you would usually need to define maps of completely different sizes by using the same set of tiles.
To achieve this you may define a couple of projects and connect them as tile maps sharing the same tile palette. This is done using the settings dialog.



You can attach more than one project. As soon as the tile library is modified it is copied to all attached projects. You can even load every project independently, but as long as not all connected projects are loaded you can not modify the tile palette. This way you can create a set of tiles, define attached projects and give these projects to other people. They may then use the standard tile library to create the maps.

Optimization

To optimize the tile palette there a some optimization functions in the menu tile mapping. These functions help to remove duplicates or empty tiles as well as optimize concerning the mirror options.

Tile Map Layers

With todays games the level world are defined by different background (tile map) layers. There is one for the grounds/platforms, one for the parallax background screen and one for the foreground partly covering the game characters:



To display different tile maps as layers you can use the layering system. Please have a look at the layer primer to get some basics.
Foreground (used as cover) and background should be defined within a single project since they usually have the same size.

Data Export

This is a topic that won't probably satisfy every user since there are too much different needs for different projects. I have tried to create an export system that is dynamic enough to cover most needs.
To export the tile mapping data please use the corresponding menu entry in the menu tile mapping.
It will lead to this dialog where you can set up different options to export data.
There are some internal file types like map or palette files. They are explained in detail at the tech info pages.

Tips

Here are certain tips that could make your tile mapping creation a bit easier.

Use the brush container to store complete objects for steady reuse. Then you won't need to pickup them from the screen all the time.

When you start to create a tile map then you should probably draw a bitmap first without the tile mapping enabled that defines a representative part of the world as a base. Turn this bitmap into a tile map by using the corresponding function of the menu tile mapping. You could use this bitmap as you base object screen where you add or assemble new objects. You should then use this project as root project and add depending projects that actually define the level maps. This rot project may then also define objects for different layers on different frames so that you can divide between foreground and background objects.

You can import tiles from an image file into the current tile library by using the import function at menu tile mapping. This way you can import tile data created by other software.


Related topics

Pro Motion Online Help Contents
Menu Tile Mapping
New Project
Pattern Draw Primer
Tips
Workspace