Hello, I made this tutorial for people who may struggle to make this type of UI as I struggled when I started scripting to make this.
Here’s a preview of how it should look like when you finish it
UI Setup
Firstly we need to make the UI, and make sure its scaled to all devices. In StarterGui insert a ScreenGui, name it to your liking.
Now you need to make a frame, insert a frame into your ScreenGui, once again you can name it to your liking. Change the size to: {0.459, 0},{0.032, 0} and position your frame to where you want.
Now it should look like this:
And the frame settings:
The background colour can be whatever you want just make sure its different to the progress background colour
When you are done with that, duplicate the frame and drag it into the first one like so and name it “Progress”:
The settings of the progress should look like this, make sure that the bar is a bright green colour:
Background Colour: 170, 255, 0
UI Design (Optional)
To make your Ui’s to have a rounded edge, add a UICorner to TimerBG and Progress. It should look like this:
which makes the UI look like:
If you have issues with the UI you can copy it here
Now thats done, we can start scripting, add a LOCAL script into TimerBG you can name this to your liking:
Read this code carefully every line has notes beside it for more understanding:
local ProgressBar = script.Parent.Progress -- The directory of the Progress Bar
local TweenService = game:GetService("TweenService") -- Gets Tween Service for later use
local function TimerStart(ProgressBar) -- Makes a function, that requires a frame to be defined
local Tween = TweenService:Create(ProgressBar, TweenInfo.new(10), {BackgroundColor3 = Color3.new(0.666667, 0, 0)}) -- Creates a tween, The instance of what should be tweened, the time it takes to tween, what property is it tweening in this case colour, and what colour is it tweening to I put it as red.
for i = 10, 0, -1 do -- every 1 second for ten seconds
ProgressBar:TweenSize(UDim2.new(0, 0, 1, 0), nil, nil, 20) -- Tweens the size so that it decreases as the time moves on.
wait(1)
Tween:Play() -- Plays the colour tween so that it turns red by the end of it.
if i == 0 or ProgressBar.Size == UDim2.new(0, 0, 1, 0) then -- Checks if the countdown has stopped or the tween has stopped.
break -- stops the loop if it has stopped.
end
end
end
wait(6) -- because Im lazy I just made it wait 6 seconds so it plays when the play joins instead of using the function
TimerStart(ProgressBar) -- fires the function with the progress frame.
I am not the best at explaining but I hope that helped you, make sure to read through the whole code instead of just copy and pasting it.
If you had any problems use the open sourced game
Have a good rest of your day.
The video is very laggy and of course its way smoother than this: