Quaintproject

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

16 Comments


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 there, I would like to know if there is a way to stop this timer if say a user hits a certain point?

    Like

  2. Thank you 😉

    Like

  3. Hello, is there anyway you can reverse this code for it to countdown instead of up ?

    Like

  4. 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

  5. After 30 seconds itself minutes increase by 1 in C# ToString() .. What to do??

    Like

  6. Thank you for this tutorial.
    I use this timer as a score in my first 2D unity project and it works very well.

    Like

  7. 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

  8. hei, how to reset the start time while i loaded the other scene ?

    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