How to make a Platform game

Favourite 550 favourites
Tutorial written by AshleyOriginally published on 26th, January 2012 - 10 revisions

Adding a layer

Okay, now we want to add some more objects. However, we're going to keep accidentally selecting the tiled background unless we lock it, making it unselectable. Let's use the layering system to do this.

Layouts can consist of multiple layers, which you can use to group objects. Imagine layers like sheets of glass stacked on top of each other, with objects painted on each sheet. It allows you to easily arrange which objects appear on top of others, and layers can be hidden, locked, have parallax effects applied, and more. For example, in this game, we want everything to display above the tiled background, so we can make another layer on top for our other objects.

To manage layers, click the Layers tab, which usually is next to the Project bar:

Layers bar tab
You should see Layer 0 in the list (Construct 2 counts starting from zero, since it works better like that in programming). Click the pencil icon and rename it to Background, since it's our background layer. Now click the green 'add' icon to add a new layer for our other objects. Let's call that one Main. Finally, if you click the little padlock icon next to Background, it will become locked. That means you won't be able to select anything on it. That's quite convenient for our tiled background, which is easy to accidentally select and won't need to be touched again. However, if you need to make changes, you can just click the padlock again to unlock.

The checkboxes also allow you to hide layers in the editor, but we don't need that right now. Your layers bar should now look like this:

The layers bar, all set up.
Now, make sure the 'Main' layer is selected in the layers bar. This is important - the selected layer is the active layer. All new inserted objects are inserted to the active layer, so if it's not selected, we'll be accidentally inserting to the wrong layer. The active layer is shown in the status bar, and also appears in a tooltip when placing a new object - it's worth keeping an eye on.

Adding tiles

The Jungle Platformer has a tileset in the file Tiles\Tiles.png. Let's import these to a Sprite object and use it as a tile object.

Like you did for Tiled Background, double-click a space in the layout to insert a new object. This time, choose Sprite. The mouse turns to a crosshair again. Click somewhere in the middle of the screen.

The Image Editor opens up, but with some extra windows, because Sprites can be animated. However, we're not going to have the animation playing - its speed will be 0. We'll have a tile in each frame of the animation. Then, we can switch which tile is showing by changing the animation frame.

Right click a space in the Animation Frames pane at the bottom, and pick Import sprite strip.... This lets us cut up grids of images in to animations, which also works with tile maps.

Importing a sprite strip
A file open dialog appears. Pick the file Tiles\Tiles.png from the sprite pack. Construct 2 then needs to know how many tiles are in the image. You'll notice Tiles.png is a 12x12 grid of tiles. Enter 12 and 12 and click OK.

Importing the 12x12 tile map.
Give Construct 2 a moment to cut up the tiles. Now you should have all 144 tiles imported as animation frames! We don't need the first blank frame any more though, so right click on it and select delete.

Deleting the first animation frame.
You might want to resize the Animation Frames window bigger to get a better view of your tiles. Also, you can right-click a space and change the thumbnail size to Large if you prefer big thumbnails.

By default the animation speed is 5, which means tiles will keep changing their image. We want tiles to stay on their current frame, so let's make sure the animation speed is 0. Select the Default animation in the Animations window.

Selecting the default animation.
The Properties Bar now shows properties for the animation. Set its Speed property to 0.

Setting the animation speed to 0.
Now the tiles won't keep changing their image - they'll stay on the same frame. Close the image editor by clicking the X on one of the three floating windows. Your Sprite tile should now be in the layout!

The Sprite tile in the layout.
With it selected, change its name from Sprite to Tile in the Properties Bar. It's always a good idea to give objects an appropriate name.

Creating scenery from tiles

Notice the Sprite object has an Initial frame property. We can use this to switch the current tile. Select the Tile object and change its initial frame to 1:

Changing the tile's initial frame.
Notice the image changes to reflect the tile in animation frame 1. This is how we can set up different tiles across the level.

Hold Control and click and drag the tile. You'll create another tile object. Do this again so we have 3 tiles in a row. Select the middle one and set its initial frame to 10. Do the same for the one on the right, but make its initial frame 13. You should now have something like this:

Three different tiles added to the layout.
If you're wondering how to double-check which frame number corresponds to which tile, just double-click the tile object. The image editor comes up again with the animation windows where you can check. Remember you can control drag a tile and it makes another tile of the same type, so you don't need to keep typing in initial frames.

Enabling snap to grid

It's going to be a headache if we have to line up these tiles by hand! You can enable a grid to make this easier. In the ribbon, click View and enable Snap to Grid. The default grid size of 32x32 is fine. Our tiles are 128x128, which is a multiple of 32. This makes it easy to snap together tiles whilst still giving some freedom in positioning.

Enabling Snap to Grid.
Try dragging around the tiles now. You should find they snap to a 32x32 grid. Now it should be easy to snap the three tiles together.

The three tiles snapped together.

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

57
Bigheti 15.7k rep

YES...more one tutorial of the Master Ashley. I learned a lot doing this. Thank you more one time!

Thursday, January 26, 2012 at 8:04:21 AM
17
sman118 7,730 rep

This is great! Can't wait to see more of this. Will definitely be a huge help.

Thursday, January 26, 2012 at 3:56:29 PM
12
Velojet 20.7k rep

This is very good, Ashley! It complements my own Platform tutorial nicely. It's great to see the Jungle Platformer graphics in action!

Thursday, January 26, 2012 at 6:13:25 PM
12
Nickydude 10.7k rep

Excellent tutorial! Looking forward to the rest of it. :)

Thursday, February 02, 2012 at 6:02:42 PM
11
Sheep 2,566 rep

Can't wait to see the finished tutorial. I can't figure out how to do some stuff you'll probably show. ^_^ Good job and well informative.

Friday, February 03, 2012 at 1:22:27 AM
11
reindeer11 2,219 rep

I am new to Construct 2 and I think this tutorial is easy to understand and helped me alot ^.^

Thursday, February 16, 2012 at 8:03:55 PM
10
Plejground 2,603 rep

Yes this is great - Thanks!
But how we can learn more ?
If I want to make anything else or different I don't have an idea how to do that !!
Construct is cool but we need to learn somehow all the behaviors,events,actions etc.. to make our OWN GAME :)
I look forward to see more .. I really need it !!!

Wednesday, February 29, 2012 at 11:17:02 AM
9
Ashley 190.6k rep

@Plejground, have you seen the manual? http://www.scirra.com/manual/1/construct-2

Wednesday, February 29, 2012 at 11:18:05 AM
5
Plejground 2,603 rep

Yes Ashley I've seen it - it's really good and there is a lot of info - thanks
But what I mean is - each game have different events etc .. and I don't know which one is good for what-
for example if I want to make platform game but with the Knight (so is no shooting - you will kill with the sword) - I don't even know where to look at in the manual :)
Anyway I have too much stuff to learn and this makes me impatient :) and I really want to make my games right now > hahha
Cheers

Wednesday, February 29, 2012 at 11:37:38 AM
8
Ashley 190.6k rep

@Plejground try asking on the forum. With these types of things it's impossible to make a guide, because there are usually many ways to do it and it depends on what you are trying to do.

Wednesday, February 29, 2012 at 11:55:24 AM
8
Plejground 2,603 rep

Yes you probably right :)
Thanks for your time

Wednesday, February 29, 2012 at 11:58:17 AM
9
thiago 4,264 rep

You could use the Stick behavior instead of setting the the position of the object every thick, am I right??

Tuesday, April 03, 2012 at 3:46:06 PM
7
thiago 4,264 rep

Sorry, I meant "Pin" behavior, not Stick.

Wednesday, April 04, 2012 at 3:42:25 AM
7
Weazl 2,868 rep

@Ashley
I'm trying to make a game but when i add the background you can't see the other objects in the layout or in the game please help!

Friday, April 06, 2012 at 6:11:56 PM
11
osiaslemuel 2,696 rep

@ Weazl right click the background > Z order > send to bottom of layer

Wednesday, April 11, 2012 at 10:24:45 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.