Beginner's guide to Construct 2

Favourite 627 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

2
munmun 392 rep

Hello Hello Hello THK

Wednesday, February 22, 2012 at 6:55:56 AM
2
fidox 2,310 rep

Excelente tutorial, Great Tutorial, I like to know if i can find here some material in Spanish... Thank you Scirra.

Following this tutorial i've made my first game. Gracias

Thursday, February 23, 2012 at 9:05:59 PM
2
Kidcamel 389 rep

Firstly - fantastic tutorial. One question - what's the logic behind the Score variable going up by 1? How does the game know that destroying a monster makes Score 1? Why not 100?

Friday, February 24, 2012 at 4:52:14 PM
2
taltal 5,001 rep

what a good way to start using C2
thanks!!

Saturday, February 25, 2012 at 6:44:12 PM
2
ityzc 431 rep

好东西,简洁易懂,顶!

Sunday, February 26, 2012 at 4:28:01 PM
2
Ufoflash 516 rep

Amazing tutorial. I had no idea how to make a game. But this tutorial was detailed enough to help a person who knows nothing about game making and drive them in the right direction and teach them the basics.

There is one thing though. Perhaps it is because i am using the free version, but i don't see the option to edit the color or the font of the text. I looked around for a good 10 minutes or so on Construct 2 and on the website tutorials but i found no help.
I was able to do everything else but i had no idea how to edit the text. So perhaps you could make it clearer where it is or if it is even available in the free version? Could someone help me please?

But either way good tutorial though a few more images detailing steps wouldn't hurt.

Sunday, February 26, 2012 at 11:46:21 PM
2
ityzc 431 rep

The “text box” can not be edited.The “text” can.In this instance.insert “text” will be ok

Monday, February 27, 2012 at 1:01:36 PM
2
GoEnnKaI 463 rep

It is very helpful , thanks a lot

Monday, February 27, 2012 at 3:43:30 PM
2
Ashley 112.2k rep

@Ufoflash, best to ask for help on our forum. You should find the option to change the text color and font in the Properties Bar while you have it selected.

Monday, February 27, 2012 at 4:53:13 PM
1
ityzc 431 rep

seek help...Someone could help me. I meet a question that I have output the game files and run ‘index’.But it dos not work.Now i have to upload this files to dropbox.it still no result and always display ‘Create your own games with Construct 2 — the HTML5 game maker’ with a black background.I make sure the browser have no problem.

Friday, March 02, 2012 at 9:29:16 AM
3
MrLosAngeles213 1,107 rep

Best tutorial I've seen for Construct2!!

Friday, March 02, 2012 at 1:35:32 PM
2
DownInBlack 3,389 rep

Good introduction to construct 2!

Tuesday, March 06, 2012 at 12:08:16 PM
2
jcmsalves 464 rep

Just installed Construct2 yesterday and followed all this tutorial. Really interesting and usefull giving us a good perspective on the things we can do with this amazing software.

Thank you very much for this tutorial. I'm just starting in game development and this is really helpfull. I'll see some more and I hope I can create a good game in upcoming time.

Greetings to all from Portugal

Saturday, March 10, 2012 at 10:30:58 AM
2
diogofaria247 986 rep

Really nice tutorial! One of the best i have seen for construct 2!

Sunday, March 11, 2012 at 8:15:40 PM
2
Stipipoy 2,283 rep

This is cool! I tried this after installing C2, taking a break with each steps to fully understand how it works. After an hour or so, i finished my first C2 game with a blast. I would like to repeat this all over again to make sure every bit of information will sink to my head.

Monday, March 12, 2012 at 12:59:21 PM

Leave a comment

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