[Tutorial] How to make a simple 2D platformer game with Construct 2 - Part 1

 Construct 2 is a powerful 2D game engine that allows anyone can make their HTML5 games with no coding experience.
In this tutorial, we're going to talk about making games with Construct 2. If you have any tutorials about making games with other engines like Unity, Cocos2d, GameSalad, email to html5indiegames@gmail.com to be a volunteer!
You can learn more about Construct 2 at scirra.com
After reading this tutorial, you can submit a platformer game to us!
Before doing this tutorial, you should grab some assets you will need in this tutorial. Download it here.

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.

 

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.

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.

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.

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).

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:

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.

Part 1 >> Part 2 >> Part 3 >> Part 4 >> Part 5 >> Part 6 >> Part 7 >> Part 8