Gamers logo

How to Create a Tilemap Spritesheet for Construct 2 & 3

Using Adobe Shoebox to Create A Tilemap Spritesheet

By Richard BaileyPublished 6 years ago 3 min read
Like

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.

how to
Like

About the Creator

Richard Bailey

I enjoy writing about many different topics but my main focus is mental health, mental illness, and specifically depression. I have a long personal experience with Severe Treatment-Resistant Depression and Anxiety.

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2024 Creatd, Inc. All Rights Reserved.