Hello. This tutorial will give the result of
Let me start by saying this is extremely easy to make. Do not be discouraged because it takes less than a few minutes to do.
-
First of all, we need a gui clock with no hands. I just searched for it and took a free image and uploaded it to roblox. This is what you should probably do too or make you can make your own. Make sure to create an imagelabel in a screengui and set its size and position correctly. It is important that the X and Y size of the image are the same. The best way to do this is use offset.
-
Next, you need to make 2 rectangles to represent the hands of the clock. The image below shows 2 frames that are children of the imagelablel (clock image).
It’s important that you follow the same format. When you make the minute and hour frames, it becomes a little tricky because we are using a gui hack method to create a pivot on a gui element. By hiding a small frame and using anchor points, we can make it seem like the gui can turn on its side.
When I made the minute and hour frames, I set their sizes to be {0.01, 0},{0, 1} in order to make it seem very small. I also set the anchor point to (0.5, 0.5) in order to make it stay in the middle. Precision is important to ensure that your clock does not display the wrong information. The anchor point + the position of {0.5, 0},{0.5, 0} allows it to stay at the middle. Do the same for both hour and minute. The result should look like this:
-
The next step is to make the children frames of these small frames. This is where we make the actual hands. Make sure that the hands point to 12 and are the same position but make the size of them different to represent the hour and minute correctly. When done, it should look like this:
This allows the hands to rotate on the middle of the clock instead of the hand’s frame. -
Script. This is the last step but is quite easy. To make this tutorial easy, I made 2 localscripts in each hand. They control their parent’s hand’s rotation. In an optimized game format, controlling them both in the same script is expected to prevent delays between each hand.
In the hour hand’s script, I used the following:
while wait() do
script.Parent.Rotation += 0.5
end
Firstly, using while wait() is not a good idea. I expect the more experienced developers to substitute their own methods if they plan on using this. But these simple few lines do a lot. For every wait(), the hand rotates 0.5 each time. If you were to make it more realistic, you would set the wait time to 1 second. Please note that if you use this for too long, the wait will become off a bit and not produce the correct time. That is why using os.time is the best choice but for this tutorial’s simplicity, I have not done that. Why did I choose 0.5? A full rotation is 360 and each hour is 30. Since there are 60 minutes in an hour, you need to use 30/60 to find that 0.5 is for each minute.
The same is similar for minutes:
while wait() do
script.Parent.Rotation += 6
end
Since an hour has 60 minutes and the max rotation is 360, you would do 360/60 to get 6. The rotation of 6 is worth a minute on the minute hand.
- That’s it! wasn’t that easy? Instead of using some math formulas, we did it with Guis and a bit of rotation!
For the readers
Here is the asset you are allowed to copy and see how I did it.
https://www.roblox.com/library/6510402763/Clock-gui
Bonus: What if I want to use a custom time? What if I want to follow the server’s time? I will leave this to the readers but the process is similar. Now that you know how much each minute is worth for minutes and hours, you can do some math to figure out the rotation needed.
