Action adventure tutorial part 6

Hi everyone, I apologize for being absent for so long. I will try to keep myself on a weekly schedule on it right now, starting this month. Okay so last time we just added the codes to kill the rats, but after that we don't have much to do, so why don't we move around the level. Of course, moving in the level is not so great when all you can see is a white background, so we'll add some scenery now.

There are several ways of adding a background for a 2D game, such as:

• Adding one big image as a background
• Use several sprite objects that act as scenery together
• Use the tiled background object to create a repetitive background
• Use the tilemap object on a layer

the least appropriate way to create a background is by using one big image as a background, because updating a large sprite is not efficient and causes slow performance, this method is really not recommended. It's better to use several sprite objects to create a level, it's faster and doesn't cause lag in the game and also the group of small parts can be reused in another place to create a new level without the artist have to draw something new.

But, even if that is a good method all the images are different sprites, this means that if you have a few hundred small sprites to create a floor and walls it could still slow the game. In this case you can use the tiled background object to create your level. The tiled background object is a special object for creating repetitive sprites, the advantage is that the tiled background object counts as one object (even if you've made about 100 repeated tiles for a floor). It makes the tiled background object very efficient for repetitive sprites.

The tilemap object is a new-ish feature of Construct 2 created to easily use a tilesheet image, a tilesheet is a collection of sprites in a single image. It also support an external level editor, Tiled which is commonly used as level editor in games. In this tutorial we'll use the tilemap object to create our background.

One thing to note is that the tilemap object fills an entire layer, so it's better to add more layers before working with it. To add a layer simply look at your layer bar and click on the "+" sign, it will add a layer on top of already created layers, remember that the free version of Construct 2 can only create 4 layers. Let's create 3 layers and rename them to: "HUD", "Main", and "Background. To rename a layer, click on a layer name and then click on the pencil icon.

Add a layer

Three layers

The top layer in the layer bar is the last to be drawn while the bottom layer is the first, meaning that the bottom layer can be overlapped by the above layer. Before we add the tilemap object let's move all current objects to the "Main" layer, because we don't want them to be overlapped by the background. To move an already created object to a different layer, first select the object we want to move and then look at the properties bar and you'll see a "Layer" property with dropdown list of available layers. Change it to "Main" and repeat it for every objects.

Changing the layer

Now we can add the tilemap object to the "Background" layer, but before that we have to click the "Background" layer on the layer bar, this is because Construct 2 will add an object to the last selected layer. Double-click on the layout and add a new tilemap object (it's under "General" category), add it on the background layer just like you'd add a sprite object. You'll see an edit image window like a sprite object with a default tilemap, we can change it by clicking the load icon (again, just like the sprite object). Load the image browserquest - images > img > 2 > tilesheet.png and then close the window.

You won't see the tilemap anywhere, because  it's still empty. To see the tilemap we need to draw some tiles onto it. So switch to the tilemap bar, which by default is located on the lower right with the objects bar (click on the tilemap tab on the bottom of it) and you'll see the tiles from the tilemap object.

Tilemaps

To draw on the tilemap you must select the pencil tile tool (the pencil icon), select the tile which you want to draw and the do a left mouse click on the layout. Congrats! you just used a tilemap object. You can also drag your mouse to draw a line of tiles at once.

Draw one tile at a time

You can also hold-and-drag on the tilemap bar to select more than one tile at once, and use it to draw a big object easily.

A few tiles at a time for the big rock

Continue drawing the tilemap until you have the satisfied level for your game. One thing to note is: don't add anything you want to collide against just yet! We'll deal with collision in a bit, for now here's a simple example of a level.

Level example

Now it looks better, right? Now let's add some more, objects on the level that we could collide against. To do this we need another tilemap object, because when we try to collide against a tilemap object we actually test collision against all the drawn tiles of the tiled object, so we need to differentiate between tilemaps that can and can't collide against. One more thing, because the tilemap object doesn't have layers, we have to make the other tilemap on another layer. So, let's add another layer between the "Main" and "Background" and name it "Obstacles".

You may be wondering "How do I add a layer between two others?", well actually after you create a layer you can rearrange it by dragging it up or down. So after creating it, drag it to between the "Main" and "Background" layers.  We don't want to accidentally change the background layer when we draw the other layer, so we'll lock  it first. To lock a layer simply click the padlock icon to toggle lock/unlock, the locked layer can't be modified before it's unlocked again.

The fourth layer

So, with the "Obstacles" layer selected let's add a new tilemap object, don't forget to load the same tilesheet file as our first tilemap. Let's add a few tiles, for example the stone tiles new our character.

Adding rocks

The collision detection of tilemap objects is like this: it will check which part of it is transparent and which is not, and only the part that is not transparent checked for collision. To make Construct 2 check for collision between two objects, we will add the solid behavior to both of them. The solid behavior will make the object impassable by other objects, and is useful to use if you plan to make a platformer with floating platforms. So let's add the solid behavior to both the character object and the second tilemap (which by default will be named tilemap2).

Now if you run the game you'll see that our character can't walk through the big stones. Congratulations! You just created your first game level, in the future we will create better looking scenes. If you don't want the rat to walk through the stones then you can add the solid behavior to them as well.

As always if you want to see the source code, you can get it from my Google Drive! Also, if you like what you read and what to support me writing this tutorials then consider pay my Patreon a visit. See you in my next tutorial.