Displaying a digital clock

Whether it is the real-world time, or an in-game countdown clock, many games are enhanced by some form of clock or timer display. The most straightforward type of clock to display is a string composed of the integers for hours, minutes, and seconds, which is what we'll create in this recipe.

The following screenshot shows the kind of clock we will be creating in this recipe:

Getting ready

For this recipe, we have prepared the font that you need in a folder named Fonts in the 01_01 folder.

How to do it...

To create a digital clock, follow these steps:

1. Create a new Unity 2Dproject.
2. Import the provided Fonts folder.
3. In the Hierarchy panel, add a UI | Text game object to the scene named Text-clock.
4. Ensure that the Text-clock GameObject is selected in the Hierarchy panel. Now, in Inspector, ensure that the following properties are set:

• • Text set to read as time goes here (this placeholder text will be replaced by the time when the scene is running)
  • Fonttype set to Xolonium Bold
  • FontSize set to 20
  • Alignment set to horizontal and vertical center
  • HorizontalandVertical Overflowsettings set to Overflow
  • Color set to white

 

5. In the Rect Transform, click on the Anchor Presetssquare icon, which willresult in the appearance of several rows and columns of preset position squares. Hold down Shift+Alt and click on the top and center column rows.
6. Create a folder named _Scripts and create a C# script class called ClockDigital in this new folder:

 

using UnityEngine; 
using System.Collections; 
using UnityEngine.UI; 
using System; 

public class ClockDigital : MonoBehaviour { 
  private Text textClock; 

  void Awake (){ 
    textClock = GetComponent<Text>(); 
  } 

  void Update (){ 
    DateTime time = DateTime.Now; 
    string hour = LeadingZero( time.Hour ); 
    string minute = LeadingZero( time.Minute ); 
    string second = LeadingZero( time.Second ); 

    textClock.text = hour + ":" + minute + ":" + 
 second; 
  } 

  string LeadingZero (int n){ 
     return n.ToString().PadLeft(2, '0'); 
  } 
} 

Note

Underscore prefix so items appear first in sequence Since scripts and scenes are things that are most often accessed, prefixing their folder names with an underscore character, _as _Scenes and _Scripts, means they are always at the top in the Project panel.

Note

Although the preceding code is useful for illustrating how to access the time component of a DateTime object individually, the Format(...) method of the String class can be used to format a DateTime object all in a single statement, for example, the preceding could be written more succinctly in a single statement:String.Format("HH:mm:ss", DateTime.Now) For more examples, see http://www.csharp-examples.net/string-format-datetime/.

7. Ensure the Text-clock GameObject is selected in the Hierarchy panel.
8. In the Inspector panel, add an instance of the ClockDigital script class as a component by clicking the Add Component button, selecting Scripts, and choosing the Clock Digital script class:

Note

Add script components through drag and drop Script components can also be added to GameObjects via drag and drop. For example, with the Text-clock GameObject selected in the Hierarchy panel, drag yourClockDigital script onto it to add an instance of this script class as a component to the Text-clock GameObject.

9. When you run the scene, you will now see a digital clock that shows hours, minutes, and seconds at the top-center part of the screen.

How it works...

You added a Text GameObject to a scene. You added an instance of theClockDigital C# script class to that GameObject.

Notice that as well as the standard two C# packages (UnityEngine and System.Collections) that are written by default for every new script, you have added the using statements for two more C# script packages, UnityEngine.UI and System. The UI package is needed, since our code uses the UI Text object; and the System package is needed, since it contains the DateTime class that we need to access the clock on the computer where our game is running.

There is one variable, textClock, which will be a reference to the Text component, whose text content we wish to update in each frame with the current time in hours, minutes, and seconds.

The Awake() method (executed when the scene begins) sets the textClockvariable to be a reference to theTextcomponent in the GameObject, to which our scripted object has been added. Storing a reference to a component in this way is referred to as caching—it means that code executed later does not need to repeat the computationally-expensive task of searching the GameObject hierarchy for a component of a particular type.

Note

Note that an alternative approach would be to make textClock a public variable. This will allow us to assign it via drag and drop in the Inspector panel.

The Update() method is executed in every frame. The current time is stored in the time variable, and strings are created by adding leading zeros to the number values for the hours, minutes, and seconds properties of variable time.

This method finally updates the textproperty (that is, the letters and numbers that the user sees) to be a string, concatenating the hours, minutes, and seconds with colon separator characters.

The LeadingZero(...) method takes as input an integer and returns a string of this number with leading zeros added to the left, if the value was less than 10.

There's more...

There are some details you don't want to miss.

The Unity tutorial for animating an analog clock

Unity has published a nice tutorial on how to create 3D objects, and animate them through a C# script to display an analog clock, at https://unity3d.com/learn/tutorials/modules/beginner/scripting/simple-clock.