Platform-Style Video Games with Construct

Adding a Tilemap Object

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

This video shows how to create a tilemap to define the basic physical structure of the game level.


  • Construct 2
  • Tilemaps

About this video

Lee Stemkoski
First online
15 February 2019
Online ISBN
Copyright information
© Lee Stemkoski 2019

Video Transcript

Lee Stemkoski: Alright. Go ahead and in the Layers panel, click on the Map layer. You’ll notice the Properties panel changes to show that we’ve currently selected the Map. And once again, position your mouse over the layout and the Main panel. Go ahead and right click and a pop-up menu will appear. Once again, select Insert New Object. And this time under the General category, we’re going to choose the option called Tilemap. We can leave the name as Tilemap, click the insert button. Once again, the cursor turns into a cross hairs and there’s a little tool tip which says Map indicating that we’re about to add to the Map layer. That sounds fine. And the tilemap will actually automatically resize itself to match the dimensions of the layout. It’s very convenient.

Again, an image editor window appears. There’s a default tilemap provided, which we do not want to use. We have our own. So once again we’ll click the folder icon and we want to go back to our Jumping Jack Assets folder, the sprite subfolder. There’s an image called platform-tiles.png. Go ahead and open that and we’ll see these different little squares. What happens with the tilemap is you can select different squares and repeat portions of this image to construct our layout. This is actually easier seeing the unexplained.

Once you have this picture loaded, click on the x in the upper corner to close the image window. And then in the Objects panel in the lower right, click on the Tilemap tab at the bottom and that switches to the Tilemap view. What we can do now is click one of these squares. I’m going to click this center grass like tile, and once that’s selected, you’ll see that there’s a small blue rectangle around it. Now if I move my cursor over to the layout, you’ll notice wherever I position the mouse, it appears as though a copy of that tile, of that sub images following my mouse around. I want to go ahead and position it at the bottom. I’m going to click, and it’ll create a copy of that image, kind of like a rubber stamp. I’ll just keep on moving my mouse across and clicking to fill in the ground. In fact, I can click and drag kind of paint a number of these across the ground. I’ll do all the way across the level.

If you accidentally put an image or a tile someplace where you don’t want it to be, you can delete it by right clicking. If you want to change to a different tile, go ahead and click on something else. Perhaps I’ll add a couple of blocks arranged in a staircase like pattern. You could even add some platforms in the air if you wish. Once you’re done, feel free to click on the lock icon later on. You can always unlock this and make further changes if you wish. Also in the Tilemap, I’m going to switch the tool to the Selection tool, so we don’t accidentally add additional tiles later on.

So we’ll start off with this very simple map. We want to leave plenty of room to add other objects in later. Next, we’ll move on to creating a character.