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:
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