How to Create a Tilemap Spritesheet for Construct 2 & 3

Using Adobe Shoebox to Create A Tilemap Spritesheet

When creating a game in Construct 2, where tiles are being used, such as a platformer, top-down shooter or RPG game, using a tilemap becomes extremely useful and is the best and easiest way to go about it. Without a tilemap, you would have to create an object instance of the tile, and then make multiple instances of that object by clicking and copying, or holding CTRL, then click and drag to copy. Placing the tiles this way can become very time intensive.

You will often find that you get a set of tiles that are separated as singles without a tilemap sprite sheet. To create the tilemap sprite sheet, the easiest way is using a program called Shoebox.

Shoebox

Once you have Shoebox downloaded, open it up and you will be presented with the screen shown above. There will be a couple settings that you will want to change. To do this, right-click on the Sprite Sheet, you will then be taken to the settings shown below.

Shoebox Sprite Sheet Settings

Once you have the 'Settings' screen open, you will want to change the Tex Extrude Size to 0 and the Tex Padding to 0 (see below).

Sprite Sheet Setting Changed

Once you have completed that, click Apply to save the changes made and you will be taken back to the Shoebox program. 

Next, go to the file that contains all your separated tiles you wish to put into a tilemap sprite sheet. Make sure you have resized the tiles to the desired size, i.e.32x32. Select the tiles you want and drag them to the Sprite Sheet slot. After dragging the files to the Sprite Sheet section, it will generate the sprite sheet and show you a preview of the output.

Sprite Sheet Output

Lastly, click save and it will save the tilemap sprite sheet to the folder you dragged the individual tiles from. This is the file you will use in Construct to use as a tilemap to create your levels.

In your Construct 2 game layout screen, double click anywhere on the screen and select the tilemap option.

Create a Tilemap

Double click Tilemap, or click Tilemap and then click 'Insert.' You will get a crosshair on your layout screen, just click anywhere. You will be taken to the Tilemap screen next, where you will open the tilemap from the saved sprite sheet in your folder. This will load the sprite sheet as a Tilemap.

Loaded Tilemap

Closeout that window and on the bottom of your project window, on the right-hand side, you will see a Tilemap tab. Click this and it will bring up the tilemap for you to select which tiles you want to use to begin designing your level. Be sure to add the solid behavior to your tilemap, so that your player doesn't just fall through the tiles.

Tilemap Tab

Using the pencil tool or the rectangular tile tool you, can begin laying out your level by clicking where you want each selected tile to go. This will make the level design much quicker and easier for you. 

Also, don't forget to go into your layout properties and set the Tile Width and Tile Height to match the size of the Tilemap tiles. Otherwise, the selection box for each tile will not properly align with the tiles.

There are other options for creating the tilemap sprite sheet, but I have found this to be the easiest and quickest method. If you want a simple batch resize tool, a great online tool called picresize is available for free. Simply upload all the tiles you want to change the size for, enter the size you want and select the output file type to png, and you are set to go. It will only take a couple of minutes for it to resize and generate the download for you.

Now Reading
How to Create a Tilemap Spritesheet for Construct 2 & 3
Read Next
In Soviet Russia, Game Plays You!