Create a TileMap with the MapEditor

Favourite 35 favourites
Tutorial written by AndreasROriginally published on 16th, June 2014 - 6 revisions

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! :)

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

1
Cakee 1,943 rep

Awesome !!!! Thank-you I had been looking for something like this. Great Job !!!

Monday, June 16, 2014 at 4:10:22 PM
1
Kyatric 71.1k rep

I can't send PMs for now, so I'm leaving it as a comment.

Please, don't post "referer" links in tutorials, it makes the purpose of your tutorial shady.

Just make a section explaining that people can rather go to something like opengameart.org/ for example to find tileset with open licenses that they can use, or just go for any tileset they own/made/have their hands on instead.

Monday, June 16, 2014 at 11:13:39 PM
1
AndreasR 28.9k rep
I can't send PMs for now, so I'm leaving it as a comment.

Please, don't post "referer" links in tutorials, it makes the purpose of your tutorial shady.

Just make a section explaining that people can rather go to something like opengameart.org/ for example to find tileset with open licenses that they can use, or just go for any tileset they own/made/have their hands on instead.
quoted from Kyatric

Sorry for that, I've changed it. Is it ok so?

Tuesday, June 17, 2014 at 10:08:43 AM
0
Kyatric 71.1k rep

Yes, it's fine like that, thanks for the modification.

Tuesday, June 17, 2014 at 1:38:18 PM
0
jastrazz 3,535 rep

Great tuto AndreasR... Thanks for sharing. :D

Wednesday, June 18, 2014 at 2:21:53 PM
0
AbelaNET 14.8k rep

Thanks for sharing

Tuesday, June 24, 2014 at 10:15:44 PM
0
volleyp 202 rep

I save it, but when i open it in construct 2 as tilemap it says:

"Failed to load the image file, Please check is not corrupt..."

Why is this happening?

Thursday, June 16, 2016 at 9:18:53 AM
0
tdcostas 2,266 rep

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

Maybe a little more explanations about this step? :)

Tuesday, January 17, 2017 at 1:22:31 PM
0
TheCouchPeople 329 rep

When i select map properties it just does nothing and I don't get an extra pop up

Saturday, April 15, 2017 at 7:47:00 AM
0
Robcartoon 270 rep

@thecouchpeople I had the same problem, but your menu is allready open on your left. If not foolow this tutorial instruction and it will open. and then where it says "base 64..." you can change it to "XML"

Saturday, April 29, 2017 at 10:21:04 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.