How to make a timer and stopwatch

Timers and stopwatches seem like a complicated system to make, but they are actually a lot easier to make than expected. In this tutorial, I will be showing you how to create a timer and stopwatch.

Difficultly: Intermediate

Creating the Timer:

This part has all of the info needed for the timer, and are the brains of the operation.

Step 1 - Create the script

Create a Server script (normal script) in ServerScriptService.

Step 2 - Variables

Open the script in ServerScriptService, and specify how long you want the timer:

local TimeAmount = 180

Now specify the services.

local TweenService = game:GetService("TweenService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

We will be using TweenService to create the timer.

Step 3 - Creating the Timer

We will be using a NumberValue for now to create the timer.

local Timer = Instance.new("NumberValue")
Timer.Name = "Timer"
Timer.Parent = ReplicatedStorage
Timer.Value = TimeAmount

I would put it in ReplicatedStorage to show the players how long the timer is going, (Stay tuned for that) but you can really put it anywhere

Step 4 - Creating the info

TweenInfo is a pretty simple thing to learn. Here is TweenInfo.

local TimerInfo = TweenInfo.new(
	TimeAmount,
	Enum.EasingStyle.Linear,
	Enum.EasingDirection.InOut
)

We will be using the Linear EasingStyle as it is a straight line.

Step 5 - Creating the Tween

Pretty easy. Just use TweenService:Create()

local TimerTween = TweenService:Create(Timer, TimerInfo, {Value = 0})

Now whenever you are ready, just use TimerTween:Play()

TimerTween:Play()

Displaying the Timer on the Client

This shows the end user how much time is left. Just create a TextLabel and LocalScript like this:
image


Step 1

First, you need to get the TimerValue. I would recommend using Instance:WaitForChild() when getting the timer.

local TimerValue = game:GetService("ReplicatedStorage"):WaitForChild("Timer")

Step 2

What if your timer was 180 seconds? Would you rather see 180, or 3:00.00? I would rather see 3:00.00. Choose the one that you want the timer to look like:

3:00.00:

local function FormatTime(seconds)
	return string.format("%d:%.02d.%.03d", seconds/60, seconds%60, seconds*1000%1000)
end

3:00:

local function FormatTime(seconds)
	return string.format("%d:%.02d", seconds/60, seconds%60, seconds*1000%1000)
end

Step 3:

The last part is really simple. Just do this!

script.Parent.Text = FormatTime(TimerValue.Value)

TimerValue.Changed:Connect(function()
	script.Parent.Text = FormatTime(TimerValue.Value)
end)

And your timer is created!

Now what if you wanted something to happen when the timer goes off. Well I got you!

In your ServerScript, just add

TimerTween.Completed:Connect(function()
	-- Do whatever here
end)

I will have a few libraries to choose from at the bottom to download as a .rbxl file.

Anyways, what if you wanted a Stopwatch:

Well, you would make the ServerScript like this:

local TweenService = game:GetService("TweenService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Timer = Instance.new("NumberValue")
Timer.Name = "Timer"
Timer.Parent = ReplicatedStorage

local TimerInfo = TweenInfo.new(
	9999999999,
	Enum.EasingStyle.Linear,
	Enum.EasingDirection.InOut
)

local TimerTween = TweenService:Create(Timer, TimerInfo, {Value = 9999999999})

-- And when you are ready, do TimerTween:Play() whenever

TimerTween:Play()

Open Source Libraries to download:

Barebones Timer.rbxl (40.5 KB)
Barebones Stopwatch.rbxl (40.5 KB)
TimerClient.rbxl (45.3 KB)
TimerServer.rbxl (45.9 KB)

Thanks for reading my tutorial! Let me know if you need any help, and I will see you in my next tutorial!

27 Likes

Very nice tutorial if i should say myself! Maybe you could include some videos on how the final product looks, but other than that its pretty good.! Keep it up

2 Likes

I love the stopwatch and timer! I just have one question. How do you make it so you can customly choose where to start the timer from? Ex. press a button for a starting value like 300 seconds or 400

In the TweenInfo, you change the TweenInfo to be 300.