（日本語の要約あったらいいですかね。コメントがあったらやろうかな。）
I got really confused about this new TileMap object in Construct 2, because there are a few critical limitations it has now. But I think I finally managed to figure out the best practice. The first problem I had was that I could not find "TileMap bar" (it's in the object viewer)!! And then, I had a problem with importing .tmx file from Tiled.
So, here are step-by-step instructions on how to make a map in Tiled and import that into Construct 2.
How to make an importable .tmx file in Tiled
- First, if you have not, download Tiled. I've got the latest release version 0.9.1 for me.
- For this example, I will use the famous "2D Circle Graphic" tileset from Lost Garden. Download it and find "GRS2ROC.bmp". We will use this in Tiled. Below is a demo of this tileset. Beautiful...
- Fire up Tiled and create a new map from ""File" -> "New...". Note that Construct 2 only support "Orthogonal" orientation. Base64 zlib is supported so leave it. Map size can be something like 20 by 20. Tile size we use is 40 px x 40 px. Hit ok.
- Now from the nemu, "Map" -> "New Tileset...". In the next dialog, leave the name parameter and hit [browse] button and select "GRS2ROC.bmp". This will fill in the name parameter automatically for you. Now set Tile width, height to be 40 px and Margin, Spacing, Drawing Offset to be 0. This is the easiest way I found to import all the tiles in this tileset. You could probably set spacing to match with the image file better. But, that's up to you.
- This step will deal with the unwanted spacing in the tileset. We make a compact one to replace it. Place each of tile in the tileset to the map without any spacing like below.
- (optional step) Because Construct 2 will not accept a map using multiple tilesets in Tiled, I guess we probably need to combine all the necessary tilesets for a map into one big tileset image. So, if you feel you want to add more tiles in your tileset, then open another tileset from "2D Circle Graphic" asset just like you did in step(4) (exactly same parameter setting will do the magic). And, add tiles that you want to the map on the left. (If you have a problem with offset, check this tip below.)
- Now resize the map so that it is just enough to contain all the tiles. "Map" -> "Resize Map..."
- Now save this map as Image. Go "File" -> "Save as Image...". Make sure to uncheck draw grid in the next dialog.
- Now you can use this image as your tileset image. Start a new map in Tiled and import this image as tileset as in steps (3) and (4).
- Now you can design your level. You can import the map you design here and the tileset image used in Tiled into Construct 2. Before saving, make sure that you have only one layer and only one tileset in Tiled. We don't need to export it. Just hit save icon to save it. This will save the data as native file format of Tiled which is .tmx file that Construct 2 supports.
How to import .tmx file into Construct 2
- Fire up Construct 2. Make sure that you are using the latest release version.
- Start a new project. And insert a game object by double clicking the layout. Choose Tilemap object from General tab. You can close the tilemap image editor that comes up.
- Go to "tilemap bar" which can be found at the lower right as a tab in the object viewer. So, click into the Tilemap tab.
- Now use the import icon (second from right) and pick the tmx file you just created. When prompted, choose "Replace image". If you get an error during import, make sure that you have only one layer and one tilemap in your tmx file. Also, check from "Map" -> "Map properties..." that encoding is one of those that Construct 2 can support. "Base64 zlib" should be good for most of time. Any advanced features like Terrain are not supported yet. So, make you that you don't have them in tmx.
- You are done! The existing map in .tmx file should have been imported Also, we can click on any of tiles in the tilemap bar and start placing them in the layout just like in Tiled. Nice!
Tip about pre-processing of tileset image
I noticed some of the bmp files in 2D Circle Graphic have a glitch of one pixel downward y-axis offset. So, the importing setting I described above sometime does not align perfect. I used IrfanView to open the image and used "Shift+Contol+Y" shortcut for "Auto crop borders". This worked like a charm for me. With this step, the spacing parameter of "Map"->"New Tileset..." works as expected too.
At moment, I will not create a full map in Tiled (although it's really nice tool), but I will use Tiled to merge and import Tileset images into C2 and create maps in C2 using tilemap bar.
How can I go back to the previous tilemap object again?
"2D Cirlce Graphic" assset has some background tiles like "PAVE.bmp" and "GRS2ROC.bmp". And it also has many overlays like "CLIFFVEG.bmp" and "FENCE.bmp". In Construct 2, you will probably want to organize them into different layers (at least one for background and one for overlay). But, if you try to have more than one tilemap objects in the same layer, it's really difficult to switch between different tilemap objects.
To access the tilemap bar of each tilemap object, first select the arrow tool in the tilemap bar, then click on the tilemap object that you want to edit in layout view. But simply clicking will hit the top most tilemap object. So, the easiest way I found was to organize them into different layers and switch off other layers except for the one you want to click on the layout.
