Countdowns are simple elements that appear in a lot of games, yet their design can be easily overlooked.
With a few simple additions, though, a regular timer can be made much more engaging and fitting the universe of the game presented, and thus greatly enhance the player's experience.
A lot of these elements are inspired by the talk "Juice it or lose it" by Martin Jonasson and Petri Purho on how to make your game "juicier". The bottom line is that it is not enough to just present the information in its most base form; you also need to enhance and accentuate what is happening with color, sounds and movement, which will make the entire experience much more engaging. I totally recommend watching that talk to also learn about other applications.
In this two-part series, we will go through these elements and then
implement them in a simple Unity project, for which you will need the newest version. In the upcoming part 2, we will look at more detailed and nuanced elements.
Ready? Let's go!
The Purpose of Countdowns
Timers in games can serve different purposes, which have not necessarily overlapping applications. These are:
- You have X amount of time to accomplish a task.
- You need to survive for X amount of time.
The design of a timer can change between those two, as the information necessary for the player changes in its application.
When you are given five minutes to defuse a bomb in Metal Gear Solid 2, you need to know the exact amount of time you have, as every second becomes vital to the overall progress and planning. The timer needs to convey to the player how much is left, and to alert them if that amount is becoming critically low.
When you have to hold out for a certain amount of time, that element of exactitude becomes less important. While it would of course be nice to know the exact amount of time in seconds you need to survive, the game can also work without that information. It could even be improved, as a piece of information like "you need to hold out for just a few seconds more!" is more easily understood in a stressful situation than "please read this number readout in the corner of the screen", and can enhance the immersion within the gameworld.
How to Improve Countdowns
Now let's take a look at elements that will make countdowns and timers more interesting and engaging.
1: Create Your Own Timer That Doesn't Rely on Numbers and Embed the Timer Into the World
Instead of just putting a number somewhere, you can create your own countdown graphic which will tell the user roughly how much time is left.
A graphical, 2D implementation will require some finesse, as you need to make sure the player can correctly intuit and read the idea of "time is running out and you've got roughly X seconds left".
This works very well if you use environmental indicators to show the progress, and have in-game voices tell you how much is left. A number pasted on top of the screen can feel non-diegetic and might very well take some players out of the game.
In Half Life 2, for example, you need to defend a position until a teleporter has charged. At the beginning, a full charge is displayed, which then has to be refilled again.
The charging is shown by elements of the machine lighting up and starting to spin, giving you a rudimentary clock that conveys how much longer you have to hold out.
The teleporter charge is also a good example of an embedded display, which is directly in the gameworld. These are useful as they keep the player focussed on the world itself, while a timer on a GUI layer would be on top of the gameworld.
2: Make the Numbers Look Like Numbers
Get a cool font for your countdowns! Certain fonts like this Digital Display Font emulate older lightup displays, which were mostly used for numbers in old "digital" displays.
The player will already associate these fonts with timers and countdowns, and it will make reading it much simpler, as if it were in something like Arial or Times New Roman.
Basic readability and text composition also apply. Do not stack the numbers vertically, do not use Roman numerals, etc.
3: Give the Player the Amount in Seconds, Not in Minutes
The Metal Gear Solid series does this wonderful trick where they say "you only have 500 seconds left!" and then display a number that reads as "5:00".
When I played it for the first time, my mind auto-completed this to read as "5 minutes", but it was tricked. "500 seconds" is an uncommon yet correct format for time, and people in general are not trained to correctly pick up on this.
The effect is that players will think they only have 5 minutes, while in actuality it is 8 minutes and 20 seconds.
This usually has no drawbacks, as they will be spurred by the tight time limit and concentrate on accomplishing the task (in Metal Gear Solid 2: defusing bombs), which will distract them from the fact that five minutes may have passed, and there is still time.
4: Make a "Minute" 100 Seconds Long
This goes hand in hand with telling the player the amount of time left in seconds.
A recurring element in the MGS2 countdowns is that they do not have 60-second
turnovers, but 100-second "turnovers". This is not actually a minute turning over to the next, but the seconds being listed. So instead of 01:00 becoming 00:59, it is 0100 that becomes 0099. You need to just get the value itself, which makes a countdown actually easier to create, as you can skip the minute calculation.
5: Using Milliseconds and Fractions to Add Tension
Having milliseconds displayed after the main number makes it much more interesting!
This is rather easy, as time can be stored in a float already. Two to three floating point numbers are a good amount that is still readable and potentially useful to the player.
6: Use Color to Your Advantage!
When the timer reaches a certain low amount, color the text differently. Making it yellow works well, as it makes the timer stand out more.
Once it reaches its final seconds, make it red, bigger, and flash. Now the low amount cannot be ignored, and it creates tension in the player.
Let's Build a Simple Timer With These Things!
Now let's get started on how to improve a timer via code. We will turn this:
Into this:
We will use a few special assets you can quickly get or create yourself, or get from the source files you can download on the upper right of this article.
Ready? Let's go!
Setup & Basic Timer
Start up Unity and create a new project.
Then create an empty gameobject, place it in front of the camera, and add a textMesh via Component > Mesh > TextMesh to it. This will be the display for the timer in the gameworld.
We'll use the 3d-textmesh for now, but this will also work on other areas, like the basic Unity interface. For now, the 3d-text also has the benefit that it can be inside the gameworld, as mentioned before, and not on top of the world inside a GUI-layer.
Our new 3d-text will not be displayed immediately; we need to alter a few values.
Set the character size to 0.1, the anchor to middle left, the alignment to center, and the font size to 80. Also add some placeholder text into the "text" field. This is just so we have something to look at in the editor; during actual gameplay, this will be directly adapted via code. 00:00 will do nicely.
Then create a new file called Countdown.cs, add it to our timer-object, and add this code to it:
using UnityEngine;
using System.Collections;
public class Countdown : MonoBehaviour {
float timer = 120f;
void Update (){
timer -= Time.deltaTime;
GetComponent<TextMesh>().text = timer.ToString();
}
}We have a variable named timer, which will hold the time that is counting down. Right now it is at 120 seconds, or 2 minutes. Then in the Update function, which is called every frame, we deduct Time.deltaTime. This is a shortcut to get the actually elapsed time in there. Following that, we get the textMesh component from the object and adapt its text value to be the timer, turned into a string.
When you now run the game, the textmesh will show the number decreasing. Congratulations! You have built a rudimentary timer.
But it is far from being engaging yet. Also, it shows 4 to 5 numbers after the decimal point, and it will continue to go into negative values after reaching zero.
Have It Stop at Zero
A negative timer will look broken, so let's make sure that doesn't happen. Adapt the Update function to look like this:
if (timer > 0f){
timer -= Time.deltaTime;
} else {
timer = 0f;
}
GetComponent<TextMesh>().text = timer.ToString();This will only decrease the timer if it is actually positive. Should it turn negative anyway (which could happen when it subtracts the elapsed time), it will be set to zero.
Get Nicer Numbers
Remember that cool Digital Display Font I mentioned above? Go get it and add it to your project!
The textmesh section in the inspector has a field for the font, so drag the font from your assets there.
And now our timer will look much neater!
Fix the Amount of Numerals
Right now the amount of numbers after the decimal point varies, which makes the timer fluctuate wildly. Fix that by adapting the line that applies the value to the text to look like this:
GetComponent<TextMesh>().text = timer.ToString("F2");This will automatically cut off everything after two numbers, constantly showing you tens and hundredths of seconds.
Make the Color Change
Let's add some adaptive coloring! Adapt the Update function to look like this:
if (timer > 0f){
timer -= Time.deltaTime;
} else {
timer = 0f;
}
if (timer < 10f) {
GetComponent<TextMesh>().color = Color.red;
} else if (timer < 20f) {
GetComponent<TextMesh>().color = Color.yellow;
}
GetComponent<TextMesh>().text = timer.ToString("F2");And the timer will turn yellow when less than 20 seconds are remaining, and red when less than 10 seconds are remaining.
The entire Countdown.cs file should look like this:
using UnityEngine;
using System.Collections;
public class Countdown : MonoBehaviour {
float timer = 60f;
public AudioClip soundBlip;
void Update (){
if (timer > 0f){
timer -= Time.deltaTime;
} else {
timer = 0f;
}
if (timer < 10f) {
GetComponent<TextMesh>().color = Color.red;
} else if (timer < 20f) {
GetComponent<TextMesh>().color = Color.yellow;
}
GetComponent<TextMesh>().text = timer.ToString("F2");
}
}And that's it! We now have a much more engaging and interesting countdown.
You can also look at the complete project in the source files on the upper right of this article.
Conclusion
We took a look at several elements that will improve timers in games, the lessons of which can also be applied to a lot of other elements. In addition, the timer we built can be easily adapted and slotted into any sort of game, and will be an interesting element without you having to develop its contents again.
But there's more! In the next part of this series, we will look at even more elements and continue to improve our timer.
