Beginner's guide to Construct 2

Favourite 629 favourites
Tutorial written by AshleyOriginally published on 26th, June 2011 - 48 revisions

Well done for choosing Construct 2! Let's get started making your first HTML5 game. We'll be making the 'Ghost Shooter' demo game. Try it out here first so you know what we're aiming for: a player who looks at the mouse, moves with arrow keys, and shoots monsters with the mouse. You'll learn everything you need to know to make a simple game - from layers to the event system!

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.

Alternative tutorials

There is an alternative beginner's guide: How to make a platform game, aimed at making a jump-and-run platformer rather than a top down shooter. You can start with either tutorial, but we highly recommend you complete both to get a good idea how to make both kinds of game!

There's also How to make an Asteroids clone in under 100 events by Kyatric which is a little more advanced but also very detailed.

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.

Inserting objects

Tiled Background

The first thing we want is a repeating background tile. The Tiled Background object can do this for us. First, here's your background texture - right click it and save it to your computer somewhere:

The Tiled Background texture
Now, double click a space in the layout to insert a new object. (Later, if it's full, you can also right-click and select Insert new object.) Once the Insert new object dialog appears, double click the Tiled Background object to insert it.

The Insert New Object dialog.


A crosshair will appear for you to indicate where to place the object. Click somewhere near the middle of the layout. The texture editor now opens, for you to enter the texture to tile. Let's import the tile image you saved earlier. Click the folder icon to load a texture from disk, find where you downloaded the file to, and select it.

Load texture from file
Close the texture editor by clicking the X in the top right. If you're prompted, make sure you save! Now you should see your tiled background object in the layout. Let's resize it to cover the entire layout. Make sure it's selected, then the Properties Bar on the left should show all the settings for the object, including its size and position. Set its position to 0, 0 (the top left of the layout), and its size to 1280, 1024 (the size of the layout).

Tiled Background properties
Let's survey our work. Hold control and scroll the mouse wheel down to zoom out. Alternatively, click view - zoom out a couple of times. You can also hold space, or the middle mouse button, to pan around. Neat, huh? Your tiled background should cover the entire layout now:

The inserted tiled background.


Hit control+0 or click view - zoom to 100% to return to 1:1 view.

(If you're impatient like me, click the little 'run' icon in the window title bar - a browser should pop up showing your tiled layout! Woo!)

Share and Copy this Tutorial

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

Comments

4
RingtailCafe 2,113 rep

I was able to learn a lot of the concepts that helped me make a more complicated game, with this tutorial. Thank you very much.

The only thing it really seemed to be missing as an introduction to all the most basic concepts, was how to do animating of characters.

Thursday, November 03, 2011 at 12:21:19 AM
3
Spades 2,893 rep

I remember the day I first did this tutorial ... I was amazed by the power of this tool .. thank you so much!!

Tuesday, November 15, 2011 at 8:18:08 AM
3
Bigheti 12.6k rep

Amazing and simple tutorial. I can't believe that i did the little action and interaction with this software. This tuto it´s a great ! Tks!

Tuesday, November 15, 2011 at 9:58:05 AM
3
Ainu 2,081 rep

Works great!! looking forward for more!!

Saturday, November 19, 2011 at 6:59:04 AM
3
zapoutix 1,761 rep

Thanks for this tuto, it helps me to begin with C2 :)

Monday, November 21, 2011 at 1:50:38 PM
3
aldhy 4,381 rep

i want to buy it..!!!

Thursday, November 24, 2011 at 6:09:57 AM
3
tavitooo 4,801 rep

Muchas gracias me ha servido de mucho para un principiante como yo. Grande Construct 2 lo maximo!! ojala pronto saquen en version o una opcion languages in spanish options!

Saturday, November 26, 2011 at 3:06:19 AM
2
tavitooo 4,801 rep

Hi again!, Please, how to change the 8 directions in my "Player" by keyboard of letters "A,S,D,W,X..."? thanks muchas gracias

Tuesday, November 29, 2011 at 3:07:29 PM
3
Ashley 112.8k rep

@tavitooo it's best to head to the forums for help rather than posting comments!

Tuesday, November 29, 2011 at 3:18:00 PM
3
tavitooo 4,801 rep

Oh, ok Ashley sorry. your my idol :)

Tuesday, November 29, 2011 at 3:26:47 PM
4
Cpryd001 4,236 rep

On page 2 : After I saved the files, I tried to drag and drop ALL of them at once into Construct 2. Unknowingly, that created an animation. It was pretty neat watching my guy shoot bullets made of explosions and aliens.

If you're trying to idiot-proof this tutorial, maybe you can stress to add each image individually, to avoid the dumb things people like me will do. :)

Friday, December 02, 2011 at 1:17:36 AM
3
Tibiacity 4,124 rep

It's amazing what you can do by standard included behaviors :o

Tuesday, December 13, 2011 at 8:11:21 PM
3
Necron 1,433 rep

A great tutorial to being with! Perfect to learn the basics and advance to experimentation!

Thursday, December 15, 2011 at 8:30:47 PM
2
danieltpt 2,938 rep

i didnt finish following the tutorial. i stopped halfway.

i wish there were more screenshots which are clearer.
this software is supposed to be time saving and easy to use for non-programmers.

i have bought construct2 for 1 week now and i have not been able to figure out how to do my first game.

Friday, December 16, 2011 at 8:01:01 AM
5
Ashley 112.8k rep

@danieltpt, have you posted to the forum for help on the place you got stuck? Most people seem to get through the tutorial OK.

Friday, December 16, 2011 at 1:16:41 PM

Leave a comment

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