Analogue clocks are often more visually appealing, and often worth the little extra effort in creating the GUI elements for the clock-face and hands.
To display an analogue clock, please follow these steps:
- Create a new scene, and add a Directional light in the direction of the camera.
- Create the clock face, this is a Cylinder with the following properties:
- Position (0, 0, 3)
- Rotation (90, 0, 0)
- Scale (13, 0.1, 13)
- Create three differently colored or textured materials (for example, red, green, and blue), to be applied to the hands of the clock. Name these materials as
m_seconds,m_minutes, andm_hours. - Create a new cube named
hand-seconds, apply them_secondsmaterial, and then turn this into a long, thin second hand by setting the following properties:- Position (0, 2.5, 0)
- Scale (0.1, 5, 1)
- Create a new cube named
hand-minutes, apply them_minutesmaterial, and turn this into a medium long, medium width minute hand by setting the following properties:- Position (0, 2, 1)
- Scale (0.25, 4, 1)
- Create a new cube named
hand-hours, apply them_hoursmaterial, and turn this into a short, wide hour hand by setting the following properties:- Position (0, 1.5, 2)
- Scale (0.5, 3, 1)
- You now need to create
pivotgame objects for each hand to rotate around. Create a new empty game object namedhours-pivotat (0,0,0). Make this the parent ofhand-hours. Create another namedminutes-pivotat (0,0,0), and make this the parent ofhand-minutes. Create a final object namedseconds-pivotat (0,0,0), and make this the parent ofhand-seconds. - Attach the following script class to the Main Camera:
// file: ClockAnalogue.cs using UnityEngine; using System.Collections; using System; public class ClockAnalogue : MonoBehaviour { public Transform secondHandPivot; public Transform minuteHandPivot; public Transform hourHandPivot; private void Update() { DateTime time = DateTime.Now; float seconds = (float)time.Second; float minutes = (float)time.Minute; float hours12 = (float)time.Hour % 12; float angleSeconds = -360 * (seconds/60); float angleMinutes = -360 * (minutes/60); float angleHours = -360 * (hours12 / 12); // rotate each hand secondHandPivot.localRotation = Quaternion.Euler(0f, 0f, angleSeconds); minuteHandPivot.localRotation = Quaternion.Euler(0f, 0f, angleMinutes); hourHandPivot.localRotation = Quaternion.Euler(0f, 0f, angleHours); } } - With the Main Camera selected in the Hierarchy view, drag the three parent "pivot" objects for each of the clock hands into the Inspector view, for the corresponding public Transform variables:
The clock-face is constructed as follows:
- The clock-face is a very thin Cylinder object
- The three hands are stretched cubes.
- Each object is at a different z-axis position, so they appear to the viewer as follows:
- The clock-face at the back
- Then the fat hour hand
- Then the middle sized minute hand
- And closest to the viewer is the thin long second hand
Every frame's Update() method rotates all three hands about their clock-face center pivot game object by an angle proportionate to the seconds/minutes/hours of the DateTime object.
An angle in degrees is calculated as a proportion of 360 for each hand. This angle is used as the amount the object should be rotated about its z axis (calculated using the Quaternion.Euler() function provided by Unity).
Each clock-hand has its original position arranged as the center of the clock-face, and then half the length of the hand added to the y-axis co-ordinate. For example, the clock face has a center of (0,0,0), and the second hand is a cube with a y-axis scale of 5, so its center is (0, 2.5, 0). This means that each hand, when rotated around the center of the clock-face, moves correctly. The width of the hands is determined by the x-axis scaling, so the second hand is thin (x-axis scale is 0.1) and long (y-axis scale is 5), while the hour hand is wide (x-axis scale is 0.5) and short (y-axis scale is 3). The wider short hands are further from the user (larger z-axis positions), and the thinner long hands are nearer the user, so that the wide hour hand can be seen behind the thinner minute and second hands even when pointing to the same clock-face position.
Here are some details you don't want to miss.
Usually, a clock does not take up the whole screen, and one method of having a view of a GameObject that only takes up part of the screen, is by having a second camera. The following screenshot shows a scene where the Main Camera shows a cube, but a second camera (Camera – clock) has been created to display in the top-right corner of the screen:
By default, cameras display to a "normalized viewport" of the whole screen (0,0)-(1,1). However, by setting the rectangle of a camera's normalized viewport to less than the whole screen, the desired effect can be created, as shown in the following screenshot. Our second Camera – clock camera has a viewport rectangle of (0.8,0.8)-(1,1) which defines the 20 percent top-right corner of the screen, as we can see in.
