how make a platform game

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

Construct 2 can make all kinds of 2D games. In this tutorial, you'll be taken through the basics of making a pla

heading 1

heading 2

heading 1

heading 2

heading 1

heading 2

tform game in Construct 2. If you're new to Construct 2 and would prefer to make a top-down shooter style game, check out this alternative beginner's guide. Ready to make a platformer? Let's get going!

Note: please don't ask for help in the comments of this tutorial! Instead, head over to our forum to get the best possible response to any questions you may have.

This tutorial uses the Jungle Platformer sprites from the bundle you get when you purchase Construct 2. Once purchased, click the Download media bundle link in the About dialog to get the extra assets bundle. If you're using the free edition, you can substitute your own graphics, or try the alternative beginner's guide which provides all the sprites you need.

Installing Construct 2

If you haven't already, grab a copy of the latest release of Construct 2 here. The Construct 2 editor is for Windows only, but the games you make can run anywhere, such as Mac, Linux or iPad. Construct 2 can also be installed on limited user accounts. It's also portable, so you can install to a USB memory stick for example, and take it with you!

Getting started

Now you're set up, launch Construct 2. Click the File button, and select New.
The File menu 'New' button.
In the New Project dialog, you don't need to change anything. Just click Create project. Construct 2 will keep the entire project in a single .capx file for us. You should now be looking at an empty layout - the design view where you create and position objects. Think of a layout like a game level or menu screen. In other tools, this might have been called a room, scene or frame.

Size the layout

First of all, we need the layout (level) to be a bit bigger than the default. Left-click a space in the layout and the Properties Bar will display Layout Properties. Change the size of the level to 4000 x 2048.

Setting the layout size.
Let's tile the background image across the layout. Double-click a space in the layout. This will bring up the Insert Object dialog. Double click the Tiled Background object to insert it.

Adding the Tiled Background object.
The mouse turns in to a crosshair. It doesn't matter where you place it initially, so just left click somewhere in the layout. The Image editor opens so you can enter the image to tile. Let's import the Background Image\Background.png file from the sprite pack. Click the Open icon to import an image.

Importing an image file.
Select the Background Image\Background.png file, then close the image editor. You should see part of the background image in the layout.

We need to size the background to cover the entire layout. Make sure it is selected (left click it in the layout) and its properties should appear in the Properties Bar. To make it cover the entire layout, set its Position to 0, 0 and its Size to 4000, 2048 (the same size as the layout).

Sizing the tiled background.
The background image is pretty big, so it's hard to see it all at once at the current zoom level. Let's try zooming out to preview more of it.Hold Control and scroll the mouse wheel down to zoom out. Alternatively, press View - Zoom out in the ribbon a couple of times. You should be able to see the entire layout, a bit like this:

The fully tiled layout.
Note the dashed outline in the top left is the size of the window compared to the rest of the layout. Press Ctrl 0 to zoom back to 100%, or View - Zoom to 100% in the ribbon. You're probably zoomed in to the middle of the layout now. Use the scrollbars to navigate back to the top left corner of the layout. You can also click and drag the middle mouse button to 'pan' around the layout, or hold space to do the same if you don't have a middle mouse button.

Share and Copy this Tutorial

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

Leave a comment

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