Analog & digital clock tutorial

In this clock tutorial we will make an analog and digital clock using the built in GameFlow variables Hour, Minute and Second.

We will also look into how to easily change the pivot point of a game object, how to convert from clock hour, minute and second into degrees, and you will also get a swift introduction to inserting  and concatenating strings. String concatenation is the operation of joining one or more characters  together, like these three strings "14" + ":" + "23", into one string "14:23". It is assumed that you know about basic GameFlow operations described in the Basics chapter of the documentation, and that you have studied some of the previous GameFlow tutorials. So lets start. 

1. Scene & clock levers setup

1.  Create a new scene: File menu > New Scene

2.  Add three cubes to the empty scene - select GameObject>3D Object>Cube

3.  Rename them to "Hour", "Min" and "Second"

4.  Select the Hour object, change scale to 0.5,5,0.1, set position to 0,-1, 0

5.  Select the Min object, change scale to 0.5,5,0.1

6.  Select the Second object, change scale to 0.5,5,0.1

2. Changing pivot point

Ok, so now comes a trick to change the pivot point of a game object.

1.  Add three empty game objects GameObject>Create Empty

2.  Rename them to "Hour center", "Min center", "Second center"

3.  Choose Hour center, set position to 0, -2.5, 0,. Do the same with Min and Second

4.  Swith Pivot in the buttons at left upper side.

5.  Drag on top of to make Hour, Minute and Second the children of the respective empty game objects (Hour center, Min center and Second center). You can now rotate the levers around the pivot point by rotating the parent game object Z-axis. Nifty!

Ok,  the levers are in place, we will now quickly add a back to the clock.

6.  Add a cylinder game object, GameObject>3D Object>Cylinder. Rotate it to 90,0,0. Set scale to 11,0.1,11, and position to 0,-2.5, 0.2

7.  Rename the cylinder to "Clock back" and add a dark material to it. Click Assets>Create>Material.  Edit the new material to your favored dark color and drag it onto the Clock cylinder object. For reference, check out the [Unity Manual](https://docs.unity3d.com/Manual/Materials.html) on adding Materials.

3. Adding variables

We now need to do some calculations on the internal time variables of GameFlow, so we can convert hours, minutes and seconds into degrees for the levers. To do so, we store the values in tree variables - and you guessed right, we call them: Hour, Min and Seconds. Her we go:

1.   Add an empty game object GameObject>Create Empty, rename to "Controller".

2.   Add GameFlow component, by clicking the **Add Component** button in the inspector, search for `GameFlow` and hit enter.

3.   Click the [+] sign in bottom right of the GameFlow component, search for `Variable` and hit return. Add three variables of type Float. Rename them to "Hour", "Min" and "Second". It should look like this:

4. Adding the program

Because time updates every second, we need a program that can check for updates at least every second. For that, the On Update program suits the purpose:

1.  Click the [+] sign in bottom right, search for and add an `On Update` program.

2.  Click the [+] sign in bottom right of the On Update block, search for and add an `Group` block, rename to "Hour to angle".

3.  Click the [+] sign in bottom right of the Group block, search for and add `Set Variable Value` choose our Hour variable for the Variable slot and set the Built-in Hour variable as Value.

4.  Then we need to get the 12 hours to fill all the 360 degree around the clock. How many times do we need to multiply 12 with to get 360?  12 * 30 = 360. It is 30 times. We just click the [+] sign in bottom right of the Group block, search for and add an `Multiply Variable` block, choose Hour for Variable and Multiply by... Yes, 30.

5.  Now, click the gear in the Group black and click Duplicate, rename the new group block to "Minute to angle".

6.   In the Set variable block, change the variables to match the corresponding Minute variables.

7.   In the Multiply block, we need to account for that the minute levers has 60 positions. So, we need to do some fast math to find out how many times we must multiply 60 with to get to 360: 60 * 6 = 360. So we multiply the Min variable by...6.

8.  Again make a duplicate of the Minute to angle group, rename to "Second to angle".

9.   Change to corresponding variables to seconds, and since both seconds and minutes have the same amount around the clock (6 times 60 equals 360), we do not need to change the value we multiply with, only set the variable to seconds. This is how the three groups should look like now:

Tip: Use the action Group is a good way of swift reuse and structuring your code in the programming flow.

Now we are almost finished - well done!  We just need to link the rotation of alle the levers to their corresponding variables.

  

10. Click the [+] sign in bottom right of the OnUpdate block, search for and add a  `Set Rotation`  block, duplicate the block twice, and rename them accordingly as seen below. Drag the corresponding Hour center, Min center and Second center Game Objects to the Transform slots in corresponding blocks, select Z as component , and Hour variable as value. Do the same with the Min and Second center game objects. Result below:

Thats it - hit play and see your new analog clock tick! If it even shows the correct time, you are beginning to master GameFlow!

  

5. Digital clock

  In this extra module, we will make a quick digital clock by using built in GameFlow variables and inserting and concatenating strings, so we can get at time format like 14:23:12 for our Text object.

-   Click + , search and hit enter on  `Group`  block. Rename to "Digital Clock".

-   Click + on the GameFlow component, search and hit enter on:  `Variable` , set Type to String.

-   Click + , search and hit enter on:  `Set Varable Value` , set Digital clock as variable and Built in Hour variable as value.

-   Click + ,search and hit enter on:  `Insert In String` . Type «:» in the Insert field, and 2 in At index field. The ":" will then be inserted at the 0,1,2=3rd position after the two digit hour string (exsample "14:"). Now choose our new variable Digital clock for the slot In string

-   Click + , search and hit enter on:  `Concatenate Strings` . Choose Digital clock variable for string 1 and Built-in Minute variable for string 2. Output: Digital clock variable. This inserts the two digit minute string into the previous example, giving us "14:23" now stored in the Digital clock variable.

-   At last lets add the seconds. Hit + ,search and hit enter on: `Insert In String` . Insert «:» At Index 5 (0,1,2,3,4,5=6th position. In the In String slot, set it to Digital clock variable.

-   Click + , search and hit enter on:  `Concatenate Strings` . Set String 1 to: Digital clock varible, and String 2 to: < Built-in Second> variable. This one merges inserts the two digits of second after ":", giving us the complete string: "14:23:12" (this is my example string of course, you will get the real clock time of your computer).

Now we need a way to display the digital clock:

-   Add a 3D text object: GameObject>3D Object>3D text. Rename to Digital clock. Place in a suitable place in the frame of the clock. Set font size to 100, and scale to 0.1,0.1,0.1 (this renders the text crisp and fine).

-   With the Controller selected, Hit + ,search and hit enter on: `Set Text Mesh Property` . As Target, choose the newly created 3D text object variable, and as value, choose our Digital clock variable.

Your done - an analog and a digital clock created by you! Please study the whole GameFlow chain below if you like. Thank you for reading,