Creating Real Time Clock in Unity.
Objective: Creating Real Time Clock in Unity.
Create a new Class called Clock ,then Draw a circle using handles OnDrawGizmos method.But before that set handle and Gizmos matrix to localToWorldMatrix.
Create a vector2 return method which will return x and y of that vector, we do this using Mathf.Cos which pass angle and gives x value and Mathf.Sin which pass angle as parameter and return y value.
Create another Vector two return method which is responsible to calculate angle and make the direction vector to start at top. Then we will return AngleToDirection which will take angle as parameter. This will make our vector to have both angle and direction when we want to draw it.
Note: a t is Time or Normalize time which start from zero to 60 after is normalized will be from 0 -1,it can be seconds or minutes.
But how to find angle Suleiman
The formula is if you turn multiply it by tau you get angle in radian ,but now we need to make the clock go clock wise this where we neget t,to make the value start at top we add quarter tau to a tau (tau + tau/4) or we add quarter turn to full turn which is (+0.25f -t).
We talk about Normalize our second or Min from 0–60 to 0–1,by doing this we turn our value to turns, a full turn of circle is 1 .
Note: To learn about turn I have post some png paper about rotation in my previous post. This method return FractionToClockDirection and take t as parameter.
Note: A value parameter and max parameter in Value direction take whether is first second or greater and max is max value for second will be 60 seconds is max value of seconds in a clock.
Now create a Vector2 return method a return method with float paramter which will take either seconds or minutes, a method will be called SecondsOrMinutesToDirection. This method will return ValueToDirection method ,this method will pass second as value and pass 60 as its max value.
Create a method called DrawTickSecOrMin with Vector2, two floats parameters. Then will call Handles.DrawLine passing direction ,in the second parameter we need to minimize the line inside by multiply direction times (1-length) ,this will make the tick decrease inside the circle and last parameter is for thickness.
Go to OnDrawGizmos,add a for loop which will iterate 60 times ,inside this for loop then create a local variable for SecondsOrMinutesToDirection called direction(dir)and pass it as second parameter ,then call DrawTickSecOrMin passing dir ,tickSizeSecOrMin and thickness as one.This will draw sixty seconds in the cirlcle in different angle.
Note: tickSizeSecOrMin we defined it early .
Now we need to be able to toggle a 24 hours time or 12 hours time, we need to create bool variable and int, which return 24 if that bool is false or 12 if that bool is false.
Create Vector2 return method ,which will pass a hour as parameter, then in this method return ValueToDirection method which will take hours(Parameter’s of HourToDirection) as value parameter and max value as (hoursToClock).
Add another for loop Iterate this loop according to hourToClock property.Inside this method create HourToDirection variable pass i as its parameter,then call DrawTickSecOrMin then pass dir and tick size and since this is hour tick make the tick thick.
Create method ClockHand method ,with these parameter then draw line using handles but this time we need to start from the center(default) and length need to Increase or decrease from the center according to the value of length you provide the last parameter is thickness. In clock hand the first statement define temporary color for handle.
Note: Handle need a naming space called UnityEditor
Go to OnDrawGizmos and create Date Time variable called time assign it to real time which is DateTime.Now.
Call Clock hand 3 times ,for the first one passing direction as SecondOrMinutesDirection method as its direction then passing second with time.Second as first parameter of SecondOrMinutesDirection,second is legth ,thickness and last is color.Repeat this for minuts for the last one we need to call HourToDirection and make the stick thick by passing 8 as thikness and legth 5 since hour stick is short and thick.
To make our second smooth create a bool variable called smoothSeconds.create a float variable called seconds and assign it to real seconds ,check if smootheSeconds is true then add seconds to time dot millisecond divide by 1000f ,this will turn milliseconds to seconds and by add our seconds to milliseconds the second movement will be smooth.
To make the our code run all time while the code is OnDrawGizmos go to Scene view <Toggle Sky box ,fog option <click it < Drop Down<Enable Always Refresh option.
This is how to create real time clock in Unity3d.
See you in the next one.
Bonus to understand about angle and how i was able to know how to get a vector elements of x and y using cos and sin check this series about Trigonometry and rotation :https://www.youtube.com/live/86MsWRvPjMw?si=gAWfC8U9dbB7rPxZ
