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

0
SingularPixel 1,158 rep

Well done Ashley, simple yet informative.

Tuesday, November 27, 2012 at 2:33:57 AM
0
khalidjh 552 rep

Thanks !!!

Tuesday, November 27, 2012 at 2:52:32 PM
0
bernardm1998 527 rep

Hey Guys ! I'm new here and was just wondering where do you do you're graphics ? Some of these games look amazing but I don't know where to my Graphics ? Please reply and Thanks in Advance !

Thursday, November 29, 2012 at 11:52:46 AM
0
ozboybrian 3,012 rep

I did it! And I must say for the time being. Goodbye Gamesalad! This software is fantastic, and no native language all pure code with so many great features i've just being dying to see. No wonder TSB came over after I showed him this software.

I wish it was Mac compatible, but this is so worth it!

Sunday, December 02, 2012 at 2:32:48 PM
0
tvance929 2,508 rep

I would like to step down the opacity of the monster with every bullet hit. I see the opacity setting (which I can change on bullet hit) but can't figure out how to step it down instead of hard code a value.
I tried Opacity - 10 or just -10 but as I can see ... it only wants 0-100. HELP?

Tuesday, December 04, 2012 at 5:41:07 PM
0
sinneruy 861 rep

Awesome tut! Thanks!

Wednesday, December 05, 2012 at 1:18:22 AM
0
SlippyFox 985 rep

Thanks for the tutorial it was a great start. I think I have worked through it about 5 times now and I understand a little more each time :)

Thursday, December 06, 2012 at 2:21:34 PM
0
flopidopolous 527 rep

I have used GameMaker before....but this is giant leap forward, I can see from your examples that the potential for writing great games quick is massive (like physics, gravity, effects) keep up the great work :)

Sunday, December 09, 2012 at 4:44:37 PM
0
looniegames 2,002 rep

Great job. Total newbie here. Great support! Thank you.

Monday, December 10, 2012 at 10:03:48 PM
0
zlesavich 3,177 rep

Very Helpful. Thank you so much!

Wednesday, December 12, 2012 at 3:23:19 PM
0
Rand0mUser 669 rep

Nice tutorial, can you cover the disadvantages of the free version vs. the full version (in a more real-world sense)?

Wednesday, December 12, 2012 at 5:48:31 PM
0
Rand0mUser 669 rep

Comment by bernardm1998

Hey Guys ! I'm new here and was just wondering where do you do you're graphics ? Some of these games look amazing but I don't know where to my Graphics ? Please reply and Thanks in Advance !
You can use something like GIMP (my favourite, i'd recommend it), or add a sprite, and in the editor, draw your new fancy sprite. Any more questions, I'll make a tutorial for you.

Wednesday, December 12, 2012 at 5:50:27 PM
0
allazao 2,148 rep

Good tutorial.

Sunday, December 16, 2012 at 7:22:37 PM
0
sunrise98 891 rep

Hi, this is a good tutorial however after about 5 seconds of gameplay the player stops following the mouse. Any idea as to what I did wrong? I can't see anything obviously different between the two versions (mine and yours) which may cause this error.

This is what my project looks like:
http://i.imgur.com/LjRwB.png

I have noticed that you have a slightly different order of events to me. Is it possible to 'rearrange' these? When I try to drag and drop a condition it simplyy looks like it is merging it with the existing one, however the actions aren't following it either (i.e. if I want to re-arrange layers I simply drag and drop them to the relevant positions, but these events don't let me?)

Thursday, December 27, 2012 at 11:20:36 PM
0
darthrolus 483 rep

Great tutorial! It provides a great basic understanding of Construct 2 and gives you the tools to make a nice FP game.

One thing I wanted to ask, is if anyone had a problem using IE 9 as the preview browser? When I tried running the game at it's final stage, IE would not show the last improvements, ie. Score, Destroy player. But when I previewed the game on Chrome it worked just fine.

Friday, December 28, 2012 at 2:14:02 AM

Leave a comment

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