Tutorial: Coding a Speedrun Timer

Resources Community Tutorials
,
#1

Your tutorials can be on any development topic, as long as it is related to Roblox development, and as long as it conveys a significant amount of information. Topics that are not about (Roblox) development should probably go into a different forum category, as well as topics that are really simple or short.

Make sure to add step-by-step instructions in your tutorials! You should detail and explain your steps as best you can, and remember that not everyone might have your particular set of skills.

When possible, be sure to include images or videos to make your explanation as clear and easy to follow as possible.

Please consider using Community Resources category if your topic does not fit the format of a tutorial.

Making the UI
It is very simple.

  1. Make a ScreenGui and add a TextLabel.
    2 [optional]. If you’re willing for this to be mobile compatible, use an offset to scale plugin on both the text and the other elements that will be listed in this section of the tutorial.
    3 - Insert a TextButton object to the ScreenGui and set its text to be “Start”.

4 (optional) - Set the background color of the button to be green, and the text color to be white. You can round the corners by adding an UICorner to the button.

CODING

  1. Add a LocalScript to the TextLabel. Make sure it is not enabled.
  2. Paste in this code:
    local label = script.Parent
    local Time = 0
    while true do
           Time += 0.1
            label.Text = tostring(Time)
           wait(0.1)
    end

What this code does: It will define what the label variable is, which in this case is the TextLabel. Then it will define another variable called Time. Then there will be a loop that goes on forever (while true loop) that will change the Time variable and the display every 0.1 seconds. (Don’t worry! This script can be stopped by either enabling or disabling it!

  1. Add this localscript to the text button:
   local button = script.Parent
   local ToggleMode = "Start"
   button.MouseButton1Click:Connect(function()
        if ToggleMode == "Start" then
               ToggleMode = "Reset"
               button.Text = "Reset"
              script.Parent.Parent.TextLabel.LocalScript.Enabled = true

           else

                ToggleMode = "Start"
               button.Text = "Start"
              script.Parent.Parent.TextLabel.LocalScript.Enabled = false
       end
  end)

What this does: It will define the button as the parent of the script that runs the code above. Next it will define ToggleMode, a string value that determines if it will reset or start next click. There is an event that fires when the button is clicked. The if statement will check if the ToggleMode string is “Start”. If it is, then it will enable the timer script on the TextLabel and vice-versa.

You completed this tutorial!

9 Likes
#2

I forgot to mention you need to put the ScreenGui in StarterGui.

1 Like
#3

You can make this more accurate with a os.clock() comparison since it’s all client sided and doesn’t save.

Example:

local label = script.Parent
local startTick = os.clock()

while true do
	local timePassed = os.clock() - startTick
	label.Text = string.format("%.2f", timePassed) .. " Seconds"
	-- hypothetical expected output: 3.75 Seconds

	task.wait(0.1)
end
6 Likes
#4

workspace:GetServerTimeNow() is good too

2 Likes
#5

Cool tutorial. I like how straightforward it is with it’s steps.

One way I do find that you could do the improve it is by following the Roblox Lua Style Guide. A simple and easy change that can dramatically improve how professional and readable your scripts are

https://roblox.github.io/lua-style-guide/

1 Like