Creating a Timer GUI in Unity

Blog Posts ,Programming ,Tutorials ,Unity
February 17, 2015

Hey all!

February has been a busy month for me – I’ve been heads down in several projects and cranking out more content for my upcoming Unity tutorial, but over the past few days I worked on a simple scripting exercise to add a timer to the maze I’m building/writing about in the tutorial and decided that I’d share that here in case you’re interested in the fundamentals of adding UI elements to a Unity game.

The basic timer element from a First Person view

The basic timer element from a First Person view

The first thing that we’re going to do is include a basic user interface that displays on our screen.

  1. In your project hierarchy, click Create -> UI -> Canvas
  2. Under your Canvas, right-click and add a UI -> Panel item under the Canvas item
  3. In the Inspector for your Panel, change the scale to {x:.25, y:.25, z:.25} – we don’t want this to cover the entire screen.
  4. Change the color of the panel to be more visible, also in the Inspector tab
  5. If needed, zoom out to see the full UI display. Adjust the positioning of your Panel to your desired location – in our example, we’re putting this in the top right corner.
  6. Making sure that the Panel is selected in the scene Hierarchy, right click one more time and create a UI -> Text item in the Panel

If you run your game now, you should see your panel floating in your camera view screen. We want to adjust our text block first so it’s visible when we add in the timing component.

  1. Select your text item and find the properties for the text block. For now, we can put a placeholder text in, so under the Text (Script) box, type in a temporary string.
  2. Under the ‘Paragraph’ header, check the ‘Best Fit’ box and set the max size to your desired size – we chose 60. You might need to play around here to get the look you want.
  3. Change the color of your text to contrast with your panel.
  4. Set the Vertical and Horizontal Overflow to “Overflow”.
  5. Change the Alignment to center horizontally and vertically.

Now, when you run the game, you should see your static panel in your view and the text in front of you.

Getting Started with Scripting
In Unity, all of the game play is done through scripting. You have three choices for scripting, JavaScript, Boo, and C# – we’ll be doing this in C#. By default, scripting is done in MonoDevelop, a tool included with Unity, but you can use any editor you’d like to edit scripts.

Many of the preconfigured assets that are available through Unity come with their own scripts, such as the character controllers. For some good scripting resources and a primer, check out the following links:

Unity3D Wiki – Scripting

Official Unity Scripting Reference

Unity Scripting Lessons

Implementing the Timer

Since we’ve got the placeholder text in order, it’s time to actually give it some functionality. Since we’re writing our first custom script for the timer, we’ll launch MonoDevelop (or your IDE of choice) when we create the new file.

  1. Under your Assets folder in the Project hierarchy, right-click and select Create -> C# Script. Name the new script ‘TimerController’
  2. Drag your TimerController file onto your Text GameObject and double-click the script to open it in your editor.

By default, Unity will generate a code template when you create new scripts from within the editor. The boilerplate code gives you everything you need for the basic functionality of your script, including two methods that will manage the initialization of the script and update it on each tick of the gameplay.

[code lang=text]
using UnityEngine;
using System.Collections;

public class TimerController : MonoBehaviour {

// Use this for initialization
void Start () {
}

// Update is called once per frame
void Update () {

}

}

[/code]

The two methods are pretty straightforward: Start() is called when the scene is first rendered, and Update() is called on subsequent frames of the gameplay. To create the timer text, the first thing we’ll want to do is add the following directive:

[code lang=text]
using UnityEngine.UI;
[/code]

This will allow us to interact with our GUI objects on the screen so that we can update our text box text. Next, we’ll declare our variables for two objects – the text box we’re editing, and a float to store the timer. Above the Start() function, add the following lines:

[code lang=text]
static float timer = 0.0f;
public Text text_box;
[/code]

Unity uses their editor to interact with the scripts we write, so we’ll actually be assigning the text_box item back in Unity, rather than in code, so it’s important to make sure that the Text item is actually visible outside of the script file.

Once we have those lines set, the next thing we’ll do is include an incremental addition to the Update() method and update our UI to show the running time:

[code lang=text]
// Update is called once per frame
void Update () {
timer += Time.deltaTime;
text_box.text = timer.ToString("0.00");}
[/code]

With that, we’re almost done with our first script – all that’s left is assigning our UI Text box to be the one we update with the timer. Save your script and return back to Unity.

To set the target for our text_box:

  1. Select the Text box in the Hierarchy and scroll down to the bottom of the Inspector.
  2. Under the TimerController (Script) header, select the dot on the far right of the box next to ‘Text_box’
  3. Choose the Text object in the window that pops up by double-clicking

When you run your game now, your GUI should display a running timer in your text box, trimmed to two decimals.

Thoughts & Process

The more I play around with Unity, the less overwhelmed I feel by the components of putting together a rich, virtual-reality enabled environment. I love the simplicity of scripting behaviors and it’s awesome that I’m able to do it in C#, hands-down my language of choice at the moment. I still need to play around with this GUI to make it prettier and confirm that it works decently with the OVR controller, but it was a fun way to get started with creating a basic gameplay mechanism.

If you’re interested in checking out my in-progress tutorial, you can check it out in it’s raw form on GitHub – it’ll be ready in a more accessible format soon, stay tuned!

Related Posts

Leave a Reply