Tile Mapping Primer

Tile mapping is a common technique to define graphic objects to be used to layout and design 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. Also it would not be convenient to easily detect collision or ground.
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 or tile library). So the tile map contains 175 entries using one of the 21 tiles of the tile library.


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, C64.

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.
Layers can be used to define forgrounds and backgrounds.

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. This maximum number of tiles is no hard definition. It is just used to inform you if you exceed this number.

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.

#1... shows the number of the tile that is currently under cursor and also shows if its mirrored.

Pick/Place Tiles... 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. If your brush does not contain aligned graphics that match tiles then you get a warning when stamping the brush down and the changes are reverted.

Modify/Create Tiles... this drawing mode assumes that you want to modify tiles or create new ones when drawing on areas where there are no tiles placed yet.

Auto Duplicate... enable this option to create new tiles. When using in connection with "pick/place" mode then tile copies are created whenever you place a tile somewhere. This way you can easily derive new tile objects from existing ones. Place a copy and then modify it.
When using in connection with "modify/create" then existing tiles are modified normally but if you place graphic portions somewhere on empty space then a new tile is created even if there was a matching tile in the library.
Sync Mode... this special option activates the tile detection. If deactivated you can draw into the bitmap without modifying the tile map or the tile library. As soon as you activate this option again then the modifications are scanned and transformed into tiles and map entries.

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 or tool sets.
With other map editors you will often 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, "Pick/Place Tiles" and "Modify/Create Tiles" and they have special tasks as described below.
Also you should prevent duplicated tiles in the tile library. Generally the task of a tile library is to host unique graphics portions to be used to build your level word as a tile map. Having duplicates would mean that you have exactly the same tile more than once. This does not only increase the tile library. It may also lead to confusion generally and to unwanted behavior of the buitl in tile map engine.

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 are modified.
The engine divides between these cases simply by checking if the modified area contained 0-tiles or not. As soon as you draw on a 0-tile 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 and 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 thing 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.

Pick/Place Tiles

To extend the tile map by placing more and more graphic objects into the world you use the Pick/Place mode. This mode assumes that your brush contains aligned 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 in that case.
When the place mode is activated then a lock grid will be switched on automatically to ensure that the tiles are placed at the correct positions. You can use the brush pickup tool now to pick up and place aligned image portions matching the tiles in the library.
If you select a tile from the tile library window then this mode is activated automatically if you did not change this behavior in the settings area of the Tile Library Window.

In some cases it is useful to place tiles but to create copies in the library. For example you want to create new objects based on existing ones. To create duplicate tiles just activate the "Auto duplicate" option. 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.
It is important to know that the tiles you want to duplicate should not already have duplicates in the tile library. If you have already duplicate tiles in the graphics portion than only one new duplicate would be create for tiles that are already duplicated.

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 etc. to keep everything in sync.
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 portions 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 in the library as soon as you e.g. draw a filled rectangle. Now you want to add details to the single color area and immediately the details would be propagated to all other tiles it the map where the single color was used.
To preven this you should switch off the Sync Mode. You can then draw freely 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 so that everything is in sync again.

Tile Library Window

The tile library 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 using the brush pick up tools along with the Pick/Place mode 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, e.g. for different level size formats.
To achieve this you may define a couple of projects and connect them as tile maps sharing the same tile library. 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 library. 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.


To optimize the tile library 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 or removing duplicates.

Tile Map Layers

With today's games the worlds 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 (and therefore placed in different projects) 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. We 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.


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. But those objects must be updated manually if you change the corresponding tile graphics.

Create and attach a second project that just servers as container for all the objects you want to use. So its tile map is just one that has a couple of freely arranged objects created with the tiles.

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 your 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, as described above. This root project may then also define objects for different layers on different frames or layers 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.

If you want to create a tile animation then you can attach a tile map project that has the map size of the object or tile you want to animate.
Now create as much frames (=maps) as you need for the animation and place the tiles there that you want to animate. Typically you will add the initial object into the first frame and then create copies of the object/tiles in subsequent frames using the duplicate mode. Now you can animate the object/tile easily and the different animation stages are separate tiles in the tile library.

Related topics

Menu Tile Mapping
New Project
Pattern Draw Primer
Project Preset Edit

Last modified: 26 December 2017