teachinTech


Tilemap

The tilemap object can be used to quickly create a game that does not use a lot of resources.

Turn In: TileMap-Trials.capx

In this activity, we will explore some of the features of the Tilemap object.

Start a new empty Construct 2 project with the window size of 480 by 320 and the layout size of 960 by 320. This will make the game twice as wide as what is visible.

Understanding and Using Tilemap

Double click on the layout to add a new object then add a new TileMap object. Click anywhere on the layout. The Edit image will appear with a default image. For this activity, we will use that image so close the Edit image window. The Tilemap object covers the entire layout.

Why is this called tilemap? You are creating the look of the game with tiles. The tilemap image is a collection of tiles of a certain size. The default image that loads up is tiles of 32 by 32. To see how that works, in the lower right corner of Construct 2 is the Objects window and after adding a Tilemap object, you will see a tab called Tilemap. Click on that tab. Move your mouse over the image and notice that you see a 32 by 32 pixel box with a number (the tile number). On the left side of Construct 2 is the properties for the Tilemap object. Find the "Tile width" and "Tile height" properties then change each of them to 16. Click in the "Tile X offset" box then hover over the image in the Tilemap tab again. Notice that the tiles are now smaller (4 tiles of size 16 by 16 instead of 1 tile of 32 by 32). Change the tile width and height back to 32.

Note: You can create your own image or find images others have created. To find images, search for things like "2D graphics tilemap" or replace the tilemap with tileset.

To create the look of a game, you pick your tile then draw it. In the Tilemap tab, find tile 9 which is a solid sand color then in Layout 1, click and drag your mouse across the bottom of the layout to create the base of our game. You may have to zoom in/out or use your scroll bars. Move or zoom so you can see the right side of the layout. Leave a little bit of room to the right then we are going to draw a green box with a sand colored middle as shown in tiles 10, 11, 13, and 14. On the Tilemap tab, click and drag your mouse to select the 10, 11, 13, and 14 tiles then in Layout 1 toward the right side, click to place that shape on top of the bottom floor that you just drew.

In the Tilemap tab, pick tile 4 (solid green) and click on the "Rectangle tile tool" just above it. On Layout1, draw some different size rectangles of solid green on top of the floor that was originally drawn. The rectangles can be one, two, or three tiles wide and as high as you like. The player (platform style) will be moving around on these obstacles.

Add A Player and Some Behaviors

Right click somewhere on Layout 1 and pick Insert new object. Select Sprite and name it Player. Click a location to place the player. In the Edit image, change the size of the player to 30 by 30 or size slightly smaller than the tile size you are using. Feel free to experiement and read about using a player size the same as the tile size. Create your player then close the Edit image window.

Add the Platform, ScrollTo, and Wrap behaviors to the player and adjust any of the settings for the Platform behavior as desired. The platform behavior will allow your player to move, the ScrollTo will move the layout with the player, and the Wrap will allow the player to move from the far right of the game to the far left of the game (wrap around).

Add the Solid behavior to the Tilemap object. The solid behavior will not allow your player to "walk through" and of the blocks on the tilemap that have a tilemap image. To allow the player through, use the Erase tool on the Tilemap tab and erase any tiles that should not have been drawn that the player may want to pass through.

Run layout and move the player (with your arrow keys) through the game. Adjust the game as needed.

TileMap Tab -- More options

If you click on the Tilemap tab and do not see the tilemap image, go back to the Object tab and click on the Tilemap to select it. If you have more than one Tilemap object, select the tilemap you want to work with on the Object tab, then click on the Tilemap tab to work with that specific tilemap object.

The arrow tool is the normal selection tool and can be used when you do not want to draw but just look at and select.

The pencil tile tool and the rectangle tile tool were already used and you should be familiar with them. The erase tile tool is used to remove any tiles that you did not want to draw.

Next on the bar is the collision tool that lets you edit and change the collision polygon, similar to with a sprite object. When you change the collision polygon, that affects all instances of that object on your tilemap.

The next four tools allow you to alter the orientation of each tile. The flip horizontal/vertical and rotate tools allows you to create some variations on the tiles by rotating and flipping them. To use these tools, select the tile you want to draw with, click on the flip or rotate button appropriate for the desired effect, then draw that tile on the tilemap.

The folder and diskette tools are used to either load or save a file in the TMX (tiled project) format. This allows you to save what you drew for your tilemap (the diskette button) then load a saved file (the folder button). You can use this to do tests with different layouts by saving them and loading them as needed. The TMX format is an XML format so you can open up the file with a text editor and follow what it has saved. The TMX format is documented and there are a number of programs, utilities, and game tools that use this format.

Insert a second tilemap object named Platforms then click on it in the Object window.

In the Properties window on the left side, change the size to 900 by 240. Change the position to 30 by 40. This positions the tilemap 40 pixels from the top and bottom of the layout and then 30 pixels from the left and right of the layout. Add the JumpThrough behavior to this tilemap. Draw some tiles that the player can jump through as part of the platform game.

Run layout and try out your game. Verify that you can jump through and on the items drawn on the Platforms tilemap.

If you were to extend this game (and you do not need to for this activity), you could add enemies, spinning coins for points, or any other sprites/objects as you would like to have in a platform game. Add the appropriate events, levels, layers, etc. The load/save of the TMX file could be used if you want similar looks across levels of a game and wanted to use a previous look as the starting point in designing a new level's look.

Additional Information

While you may not understand everything in the blog posting below, it does have some very interesting information on how to design efficient games when using the tilemap object. There are a number of other excellent sources for information on Tilemaps.

Tech blog: Tilemap tidbits by Ashley Gullen

There are also a number of tutorials in written and video format that cover Tilemap and how it can be used in your games.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.