Learn how to use tilemap by making a platform game with it!

3

Attached Files

The following files have been attached to this tutorial:

.capx

Stats

22,041 visits, 31,752 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 4 May, 2014. Last updated 19 Feb, 2019

Tilemap is god.

Once you know how to use tilemap, your life become better, sky will become blue, sickness will be cure...

Tilemap

1. What is Tilemap?

Tilemap is, as the name say, a sheet of square. Each square can be use separately like if it was just one sprite.

Tilemap is located right next to the Object Tab. It will be locked until you add a Tilemap Object.

2. The way we will use Tilemap

Usually, Tilemap are used to make backgrounds, lands of RPG (view from top). The idea of this tutorial is to show you that Tilemap can be way more usefull. To start, I suggest a 8bits type platform game, it makes level design easier.

Create your Tilemap

1. Prepare yourself

Photoshop, Gimp or whatever you want, I first recommand to display a grid. Because of the 8bits sprites, make a grid 16x16px on a document with same ratio, for example: 80 x 160px.

Document Size: 80px*160px (or any multiplier of 16px)

Grid setup: 16px*16px

File Type: png

Then you can draw inside.... Or just take this file if you want! (I give a candy to the first one saying where those sprites come from)

2. Import to Construct 2

Back to Construct 2, add a New object > General > Tilemap (double click on Layout or in Object tab, right click > Insert New Object).

Ignore default Tilemap, and load your. Before close the Image Editor window, you need to set the tile size of your file. It is in the Properties panel on the left.

Set it to 16x16 since we decided our Tilemap will have a grid of 16x16. If you choosed 8x8 you will need to set here 8x8.... and so on.

Notice that the Tilemap get automaticaly the Layout Size. For now you can let it like this.

Create your game

1. Make it clear

In the object tab, Rename the Tilemap object to Platform, as the first layer.

You can also create a New Layer and fill it to black. You can do it in the Layer properties on the left. Set Background Color to black (0, 0, 0) and Transparent to No. (If you don't see any change, the Platform Layer need to be Transparent)

And then, put it at lower level and call it Background.

Finally, go to View in the Main menu, Check Snape to grid and set it to 16x16.

2. Things get serious

Click on the Platform layer then on the Tilemap tab and hit on the Pencil Tile tool.

In the Tilemap picture, choose the tile you want to use. After that, you can start to "draw" your platform game !

Hint: The Right click is use to delete the square.

After that, add your player. I suggest you to check the How to make a Platform game Page 3 if you do not know how to make your playable character. (don't worry, there is a capx file at the end :p )

Because of the size of our sprites, I suggest you to set the platform behavior parameters.

Max Speed: 76

Acceleration: 1000

Deceleration: 1000

Jump strenght: 351

Gravity: 1000

Max Fall Speed: 200

3. Behaviors

Go the the Object tab, Right click on Platform Tilemap > Behavior... > Add > Solid

It's time to test your game ! Yes, that it... All of your tiles will be a Solid, even if the Tilemap have the size of your Layout !! Magic! So, did you understand what's next?

4. More platform things

Oh no! The platform is too high for my character ! Well no problems.

There is some solutions, and we will choose to make a jump-thru platform.

Add a new tilemap object and load the same picture file. Don't forget to set again Tile size to 16x16.

Rename the object to jumpthru then add the behavior Jump-thru to it.

Go the the Tilemap Tab and start to add your Jump-thru platform ! (if you don't see it in the Tilemap tab, click once in the layout)

Et voila ! Did you get the trick?

Create a new layer on top and call it Decoration. Repeat the last step, adding a new Object > Tilemap > Select file, Tile size 16x16.

Then you can add trees, and what you want !

Lava and Spike? Same thing, just make it hurt your character..

Random advices

- In this tutorial, we used the same picture for the whole game. Of course you can use different pictures but keep in mind that you will need to use the same ratio.

- Do not make the mistake to add the same sprite for "Decoration" and "Solid". This error is made by many level designer and it makes the game sucks. you never know where to land, what will hurt you or not.

- Don't be too much excited about the speed you can done game with this trick.

- Leave a comment for feedback please !

Note: The Capx is not exactly the same as this tutorial and it is a not finished project (life bar do not follow, wrong enemies etc..), but it show exactly the same thing and more more more platform thing. I will update it anyway, for a later very big tutorial about advance platform game

I love you Construct 2, seriously.

.CAPX
  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Thanks for the tutorial! Liked how you used Kid Icarus sprites from the NES.