May 26, 2017
3 1

Make a 2D Science Video Game with Construct3 (Part 3 of 3: Heads Up Display & Countdown Timer)

Written by
Now to part 3 of our tutorial! You are almost finished. We just need to add a few elements that make the game more interesting and balanced. In case you need a refresher, here are the links to part 1part 2, and the playable demo.


Creating an Heads-Up Display (HUD) to Show Score

21. 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. Add a new event: System>>Every tick. Then Add 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.


22. Creating a Time Limit – This game shouldn’t go on forever so lets put a time limit on how long your neutrophil lives. Some sources say they only live for a few hours in the blood stream so lets just shorten that to 60 seconds for gameplay’s sake. Add a Global variable by right clicking in the blank space of the Event sheet. Name it “Timer” and give it an initial value of 60. Then add a new event System >> Compare Time. Input “Timer” then Add action >> Player >> Spawn another object >> Explosion on layer 1. Then add another action Player >> Destroy.


23. Countdown timer – To show the player how much time they have left, go back to the Layout window, make sure you are in the HUD layer, and insert a new Text object. Name it “TimerText” and place it at the position 590, 0. Change the size to a larger number and the color to yellow.
Then go to the Event Sheet and find the “System: Every Tick” event. Add the action TimerText >> Set text >> “Time left: ” & Timer – time.


However, we only want this to happen when the game has been played less than the global variable “Timer” (in our case this equals 60 seconds). So in the same “System: Every tick” event we are going to add another condition. You do this by going to the “Add…” word at the end of the event box, click it, and select “Add another condition”. This condition will be System >> Compare time. Comparison is  “= Equal to” and Time(seconds) is “Timer”.
One last action you will need to add is to the “System: Time = Timer seconds” event, Add action TimerText >> Set text >> “0 – Game Over!”


Congratulations! You have created a game that you can play and customize in many other ways. Enjoy!
Article Categories:
Game Design · Game Development · Tutorials

Leave a Comment

Your email address will not be published. Required fields are marked *