Create a TileMap with the MapEditor

1

Stats

14,898 visits, 23,853 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 16 Jun, 2014. Last updated 19 Feb, 2019

Tools you'll need

Adobe Air ShoeBox (Free)

You will need ShoeBox to create your tile file if you use seperate images. But more later.

Download: ShoeBox (Free)

MapEdidtor (Free)

You will need the Editor to build up your tilemap.

Download: MapEditor (Free)

Tilsets

If you don't own a tileset you can browse through opengameart.org or if you want the tileset I've used for this tutorial send me a PM ;)

Step 1 - Create the tilemap file for the import

Note: You can skip this step if you already have a file including all tiles.

Start ShoeBox and perform a right mouse click on "Sprite Sheet" (First Tab) to enter settings. Now choose the "Default" method and change this two values.

Tex Exdrude Size to 0

Tex Padding to 0

And save your option by clicking "Apply". Now go to your folder with the seperated files and drag them into the "Sprite Sheet" tab at ShoeBox.

Now ShoeBox will create a file for you including all tiles. Save this file.

Important: The file should not include any spaces or borders between.

Step 2 - Import your tiles into MapEditor

Now open MapEditor and create a new file.

I've choosen 64x64 px for my tiles because the width and height are 64px. Do the same for your tiles.

Note: If you use the same tiles than I then you can set all settings like I do and did.

Now you need to import your tile file (repeat this step for each file you want to import). Click "Card - New TileSet"

Now choose your tile file you've created with shoe box before.

Set the size also to 64x64 px. If the import was successfully you'll find your tilesets at the right side of your editor.

If you have more then one tilesets you can switch through them if you click the tabs.

Step 3 - Creating diffrent layers

Now we need to create a few layers for our map, for example

water

ground

path

Perform a right mouse click in the white area of the layer box.

Now let us start with the water. Make sure that you've selected the "water" layer above.

1) Choose the right layer

2) Select your tile

3) Optional: You can set your zoom to a bigger value to identify the tiles easier.

Save the TileMap

In order to export the tilemap into construct 2 you need to save it as xml.

Click on -> Map - Map Properties - Layerformat 'XML'

Now import it into Construct 2 and beginn to draw your own little tilemap :)

Good luck with your projects! :)

  • 0 Comments

Want to leave a comment? Login or Register an account!