Tutorial: How to create a timer in Unity 3D with JavaScript


This short written tutorial is aimed to show you how to code a timer in Unity 3 D.
Please note: The shown techniques won’t work in Unity 5. We’ve written a brief article about creating a countdown timer in Unity 5. You can read it here.

1. Step: Let’s get started by opening up a new or a existing unity project. Go ahead and add in a new GUI-Text by clicking GameObject, Create Other and finally choose GUI-Text.

1.Schritt

2. Step: Create a new java-script by right clicking in the “project-container”.  First go create and choose Java.

2.schritt

3. Step:Open the script by either right clicking on it and choosing open or just double click on your JavaScript.

3.Schritt

4. Step: Type in the following text:

4.Schritt

The composition of the script:
redirect unity 5

#pragma strict
private var startTime : float;
var textTime : String;
//First define two variables. One private and one public variable. Set the first variable to be a float. 
//Use for textTime a string. 
function Start() {
startTime = Time.time;
}
function OnGUI () {
var guiTime = Time.time - startTime; 
//The gui-Time is the difference between the actual time and the start time.
var minutes : int = guiTime / 60; //Divide the guiTime by sixty to get the minutes.
var seconds : int = guiTime % 60;//Use the euclidean division for the seconds.
var fraction : int = (guiTime * 100) % 100;

 textTime = String.Format ("{0:00}:{1:00}:{2:00}", minutes, seconds, fraction); 
//text.Time is the time that will be displayed.
 GetComponent(GUIText).text = textTime;

}

Please note: The shown code won’t work in Unity 5. Get the Unity 5-ready code here.

5.Step: Add your Timerscript to your GUI-TextObject just by dragging the script from the Project-Container onto the Inspector Panel. Make sure the Inspector panel of the GUI-Text is visible. A Green Cross while appear while you drag the script.

schritt 5

6. Step: Rename the GUI-Text to something like My Timer. This Text will appear before the timer starts to run.

5. Schritt

7. Step: Change to the font website of your choice to download a font for your timer. I used a font called fredericka the great from google web fonts.http://www.google.com/webfonts/specimen/Fredericka+the+Great If you want to use the default Arial font go ahead and do so and skip this and the next few steps.

6. Schritt

8. Step: Click add to collection.

7.Schritt

9.Step:

5. Schritt

Once you have found the font and you want to use and once you have added it to your collection choose the “Download your Collection”-Option. You find this function in the upper right corner of the website.

10.Step: Choose “Download the font families in your Collection as a zip-file.

9.Schritt

11.StepChange back to Unity and use the Import New Asset-Option. You can access the menu again by right clicking on the project container.

10.Schritt

11. Step: Choose the font you want to use. You just need to import the .ttf file.

12.Schritt

12. Step: Select the GUI-Text, go to Fonts and left click on the small round button. A window will appear and you should now be able to select the imported font.

13.Schritt

13. Step:Change the font size till it fits your needs in my case I used a size of 50.

14. Schritt

14. Step: Click play and watch your timer running. You might want to change the Anchor type and Alignment.

15.Schritt

Thats how my final result looks like:

16. Schritt

I hope you did like this tutorial.

Links:

http://en.wikipedia.org/wiki/Euclidean_division

http://docs.unity3d.com/Documentation/ScriptReference/
redirect unity 5

The article picture was again taken from openclipart.org

Advertisements

16 thoughts on “Tutorial: How to create a timer in Unity 3D with JavaScript

    1. Hi Stephen, thansk for your interesting question.

      It is possible, you just have to set the Time.timeScale to 0 (default is 1). But mention: This solution will pause the complete game.

      Another solution would be to create a boolean variable like “show time” , depending on this variable time is shown or not (.text property would be =””;

      I hope this could help you, if you need further information, let us know.

      You might want to check out our countdown timer tutorial, because the time.timescale is also mentioned there:

      https://quaintproject.wordpress.com/2013/04/07/tutorial-creating-a-countdown-timer-in-unity-3d-with-javascript/

      Best regards

      Alexander

      Like

  1. Hello great tutorial, it was exactly what i needed! Do you have any idea though how i can implement so that when i press a button it starts counting, and if i shut it off (same button) it pauses there untill i start again? Much appreaciated.

    Like

  2. Hello, I have followed your tutorial, but i have hit a wall, Im using Unity 5 and each time I attach the script to the Text, it comes up with this error.. Assets/levelTime.js(21,21): BCE0053: Property ‘UnityEngine.Component.guiText’ is read only. I’m not sure where I am going wrong, any ideas? Thank you

    Like

    1. Hey there,

      sorry for my late reply.
      The problem that you are actually facing has to do with the GUI changes that came along with Unity 5. As I currently have no system to check it out right now I will test it later or tomorrow and will post a Unity 5 compatible version. Thanks for pointing out!

      Alex

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s