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:
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!