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

3
Ashley 113.2k rep

@carminielloz try posting in the forum with your .capx file for help.

Friday, September 30, 2011 at 1:26:16 PM
3
carminielloz 8,401 rep

thank you very much Ashley ! I m giving another try , following the tutorial step by step , I ll post the .capx in the forum if i fail again . Thx for prompt reply , and thx for your time !!

Friday, September 30, 2011 at 3:26:20 PM
3
carminielloz 8,401 rep

hi Ashley , things work fine on my computer , my girfriend s computer doesn t seem to like us very much ... haha
I hava few minor questions but I won t bother you . I will just keep trying and keep reading the tutorial . I am a lot more familiar with creating a background , locking it , creating a Main one . Also i can insert the character and all the sprites , but most importantly I can give 8 direction movement to my hero , scroll to and bind it to the layout , i can give my monsters bullet movement and change the speed , for some reason things don t work on my gf s computer but i m ok on my computer . Is it because she has a girl computer or could it be because i m in china and her computer is chinese and censored ... ? I won t take any more of your time , thanks , talk soon. I ll ask further questions only if i really can t figure things out . THANKS A LOT FOR THIS TUTORIAL !!!!!!!!!

Saturday, October 01, 2011 at 2:28:14 PM
3
carminielloz 8,401 rep

there is my question , i m on page 4 , trying to add the first event for the player to face the mouse every tick
( 60 times per second , all the time basically )
but when i type in
Mouse.X
and Mouse.Y
the system says
NOT AN OBJECT
'MOUSE IS NOT AN OBJECT NAME

Saturday, October 01, 2011 at 2:43:53 PM
6
ngreiner 2,323 rep

carminielloz:
I just had the same problem because I missed a step on page 2. Just right-click on the Objects panel --> Insert New Object --> Mouse

Sunday, October 02, 2011 at 11:45:27 PM
2
carminielloz 8,401 rep

ngreiner ,
thank you very much dude , I found a tutorial on youtube that was helpful for that bit . I just finished the whole tutorial , everything works fine . My player disappears when hit by a monster .... haha i think i ll mess around and figure a lot of things out . Thank you for your message .

Monday, October 03, 2011 at 6:01:59 AM
3
carminielloz 8,401 rep

Add the input objects

Turn your attention back to the layout. Double click to insert another new object. This time, select the Mouse object, since we'll need mouse input. Do the same again for the Keyboard object.
I COMPLETELY MISSED THAT . it s cool now , ashley when you re bk from your holidays could you remove all my useless comments ? i feel like i spammed a lot . Thank you very much .

Tuesday, October 04, 2011 at 5:54:18 AM
3
beaverliten 2,185 rep

Well I have a problem wich I think no one else have because they haven't posted it.

I'm done with this tutorial, everything works great but one minor problem occur, when I walk and shoot the movement hangs up and the character starts walking towards a direction all by himself?.. Do you have the solution?

Tuesday, October 11, 2011 at 3:09:07 PM
3
Ashley 113.2k rep

Hi all, it's best not to ask for help in the comments section. Head to the forum and post your .capx file and say what's going wrong and someone should get right on it and help you!

Tuesday, October 11, 2011 at 5:12:21 PM
4
Jailson 12.1k rep

Ashley, I want to translate this guide to Portuguese, would you give me permission to this? The best way to this is creating a new tutorial?

Thursday, October 20, 2011 at 2:00:43 PM
5
Ashley 113.2k rep

@jailson, we're hoping to introduce a 'translate tutorial' feature integrated with the site soon. I'd suggest waiting until then!

Thursday, October 20, 2011 at 2:14:45 PM
3
Jailson 12.1k rep

@Ashley, it would be great! I can wait! :)

Thursday, October 20, 2011 at 2:56:34 PM
2
Ashley 113.2k rep

@DramaWhiteStudio, did you add the Mouse object as described under "Add the input objects" on page 2?

Saturday, October 22, 2011 at 6:56:06 PM
2
Tom 36.3k rep

@DramaWhiteStudio best to ask any questions in the forum :) You'll get more people able to help

Sunday, October 23, 2011 at 3:22:36 PM
3
giorgiospugnesi 2,832 rep

Ebook version of this tutorial here:
http://www.startappgames.com/doc/Costruct2_BeginnerGuide.prc

(cut&past address if you have error on download)

Tuesday, October 25, 2011 at 3:53:18 PM

Leave a comment

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