Beginner's guide to Construct 2

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

Creating a heads-up display (HUD)

A heads-up display (aka HUD) is the interface that shows the player's health, score and other information in-game. Let's make a really simple HUD out of a text object.

The HUD always stays the same place on the screen. If we have some interface objects, we don't want them to scroll away as the player walks around - they should stay on the screen. By default, layers scroll. To keep them on the screen, we can use the layer Parallax setting. Parallax allows different layers to scroll at different rates for a sort of semi-3D effect. If we set the parallax to zero, though, the layer won't scroll at all - ideal for a HUD.

Go back to the layers bar we used earlier. Add a new layer called HUD. Make sure it's at the top, and selected (remember this makes it the active layer). The Properties bar should now be displaying its properties. Set the Parallax property to 0, 0 (that's zero on both the X and Y axes).

Double-click a space to insert another object. This time pick the Text object. Place it in the top left corner of the layout. It's going to be hard to see if it's black, so in the properties bar, make it bold, italic, yellow, and choose a slightly larger font size. Resize it wide enough to fit a reasonable amount of text. It should look something like this:

The inserted Text object.
Switch back to the event sheet. Let's keep the text updated with the player's score. In the Every tick event we added earlier, add the action Text -> Set text.

Using the & operator, we can convert a number to text and join it to another text string. So for the text, enter:

"Score: " & Score

The first part ("Score: ") means the text will always begin with the phrase Score:. The second part (Score) is the actual value of the Score global variable. The & joins them together in to one piece of text.

Run the game, and shoot some monsters. Your score is displayed, and it stays at the same place on the screen!

Finishing touches

We're nearly done. Let's add some final touches.

Firstly, let's have some monsters regularly spawning, otherwise once you've shot all the monsters there's nothing left to do. We'll create a new monster every 3 seconds. Add a new event:

Condition: System -> Every X seconds -> 3
Action: System -> Create object -> Monster, layer 1, 1400 (for X), random(1024) (for Y)

1400 is an X co-ordinate just off the right edge of the layout, and random(1024) is a random Y co-ordinate the height of the layout.

Finally, let's have ghosts kill the player.

Condition: Monster -> On collision with another object -> Player
Action: Player -> Destroy

Conclusion

Congratulations, you've made your first HTML5 game in Construct 2! If you have a server and want to show off your work, click Export in the File menu. Construct can save all the project files to a folder on your computer, which you can upload or integrate to a web page. If you don't have your own server, you can share your games on Dropbox.

You've learnt some important basics about Construct2: inserting objects, using layers, behaviors, events and more. Hopefully this should leave you well prepared to learn more about Construct 2! Try exploring its features and see what it can do for you.

The finished thing

Try downloading the finished tutorial project. I've added in some extra features like some "Game over" text, and monsters which gradually speed up. Knowing what you know now, it shouldn't be hard to figure out how it works. There are also lots of comments describing how it works.

Well done! If you have any problems or you think any part of this tutorial could be improved, leave a comment or drop us a message on the forum. We'll see what we can do!

Finally, if you liked this tutorial and think someone you know might also like Construct 2, why not send them a link to this tutorial? Surely it can't hurt :)

Further reading

Want to add music and sound effects? See Sounds & Music in the manual for a quick overview.

You may be interested in our alternative platformer-based beginner's tutorial, How to make a platform game.

If you'd like to know more about how events work in Construct 2, see the section on How Events Work in the manual. It's highly recommended so you can get going quickly with your own projects! Then for even more information, don't forget there is complete documentation in the manual

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

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

Comments

48
kemosabe 2,531 rep

Nice.i like it

Thursday, June 30, 2011 at 10:42:49 AM
24
ludodesign 22.5k rep
Saturday, July 02, 2011 at 3:26:03 AM
16
ludodesign 22.5k rep

I love you Ashley

Tuesday, July 12, 2011 at 4:00:10 AM
30
luisgmolina 6,436 rep

Very cool.
we need a advanced tutorial now, please.
thank you.

Friday, July 15, 2011 at 7:49:43 PM
17
Skodex 2,362 rep

Thanks for this. You made something which I first thought to be rather complicated, seem extremely easy.

Monday, July 25, 2011 at 6:14:40 PM
14
Dicon 2,498 rep

A great tutorial and not too difficult to get your head around. Are there any books out there for Construct? We all need them.
Thank.
Dicon

Wednesday, July 27, 2011 at 12:08:49 PM
12
driftish 2,312 rep

thanks a whole lot this tutorial was extremely helpful.

Thursday, July 28, 2011 at 8:36:42 AM
13
Mehtab 3,074 rep

awesome tutorial and awesome tool!

Saturday, July 30, 2011 at 10:45:41 AM
9
stufa 2,281 rep

I love it!!!
I've always wanted to create a video game. Your tutorial was clear and interesting. You make a great teacher Mr Ashley.

Oh I tried running your additional tutorial on Ghost Shooter. For some reason I can't run the demo play.

I'm afraid I'm quite a computer noob.

Saturday, August 06, 2011 at 12:14:18 PM
15
ianbrown3003 2,466 rep

This is great! I've just started a games designer course, and although I get a full version of Gamemaker at some point during the course, I wanted to get hands on with using game-making software now...this program looks great, and your beginners guide has eased me in really well, it's well written and very user-friendly. Top work!

You've inspired me to play around more with this program, and that means I'll probably end up buying the full version soon. Good work!

Friday, September 09, 2011 at 9:27:08 PM
11
Ghengis 4,633 rep

This is a must read. Excellent overview of how Construct 2 works.

Tuesday, September 13, 2011 at 4:13:04 AM
15
Ashley 112.2k rep

Just made an update: the tutorial now covers image points (added in r56). It's on page 5.

Saturday, September 17, 2011 at 5:48:10 PM
10
chrisbrobs 6,470 rep

Brilliant tutorial.

Saturday, September 24, 2011 at 11:02:10 PM
9
carminielloz 8,401 rep

oh my Gosh !!! this is amazing , thank you guys !!!!
I only just finished page 1 but I love it
the possibilities to creat a variety of videogames seem endless.
THANK YOU VERY MUCH GUYS !!!

Friday, September 30, 2011 at 6:03:17 AM
9
carminielloz 8,401 rep

my hero moves nicely ( 8 direction , bound to lay out and scroll to )
but i think i missed something , the monster doesn t move , i changed the speed but it never moved in the first place ( i gave him bullet movement but nothing )

Friday, September 30, 2011 at 6:34:29 AM

Leave a comment

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