유니티 아날로그 시계 구현 (Quaternion.Euler, DateTime.Now)

Analog Clock

 

 

세상이 점점 디지털화가 됨에 따라 주변 물건들 역시 디지털화가 되고 있지만 여전히 우리는 아날로그 감성을 찾고 접하고 있습니다. 특히 국가시험, 학교 시험 등 디지털시계를 쓰지 못하고 반드시 아날로그 ㄱ시계를 사용해야 하는 경우가 있습니다. 손목시계나 벽장 시계는 이상하게도 아날로그시계가 아직까지는 익숙하고 마음이 편합니다. 아날로그시계는 시침, 분침, 초침으로 구분되어 있고 각각의 시간을 표시합니다. 시침이 열심히 돌아서 한 바퀴를 돌면 분침이 한 눈금만큼 이동해 있고 분침이 한 바퀴를 돌면 시침이 한 칸 이동해 있습니다. 시침이 한 바퀴를 돌면 반나절이 흘러가고 이렇게 2번 돌면 하루가 지나갑니다. 이런 원리로 유니티에서 쉽게 구현할 수 있습니다. 다소 디지털시계보다 UI 적으로 세팅해 줘야 될 게 있지만 시간을 시스템에서 가져와서 데이터화해서 각 시간의 막대기를 돌리는 방식이기 때문에 구현 자체는 어렵지 않습니다.

 

 

C# (UNITY 3D)

 

 

아날로그 시계 예시

 

시침, 분침, 초침이 현재 시간에 맞게 돌아가는 아날로그시계의 예시입니다. 시간은 1~12시까지 표시되고 오전은 AM, 오후는 PM으로 표시합니다. Get 버튼을 누르면 현재 시간과 날짜를 표시합니다.

 

 

 

using System;
using UnityEngine.UI;

 

DateTime.Now를 사용하기 위해서 System을 필요하고 표시할 Text와 버튼을 사용하기 위해서 UnityEngine.UI를 사용합니다.

 

 

시계 구조

Image_Clock에 뒤판 시계 이미지를 배치하고 자식에 시간 이미지 오브젝트들을 넣어줍니다. 

 

 

피벗 설정

 

Image_Hour, Image_Min, Image_Sec 게임 오브젝트 피벗을 설정하지 않으면 기본으로 (0.5, 0.5) 값을 갖습니다. 기본으로 할 경우 가운데 중심으로 오브젝트가 회전하기 때문에 앞뒤가 구분이 없는 시계가 되어 보기가 불편합니다. 피벗 y 축을 0~0.5 사이의 값을 넣어주면 됩니다. 예제에서는 0.1의 값을 넣었습니다.

 

 

할당

각 게임 오브젝트를 스크립트에 할당합니다.

 

 

 

    public RectTransform transform_hour;
    public RectTransform transform_min;
    public RectTransform transform_sec;
    public Text text_date;
    public Text text_get;
    public Button button_get;

    private float hour;
    private float min;
    private float sec;

   

    private void Start()
    {
        Init_UI();
        Init_Time();
    }

    private void Init_Time()
    {
        if (IsInvoking("Update_Time"))
            CancelInvoke("Update_Time");
        InvokeRepeating("Update_Time", 0, 0.2f);
    }

    private void Init_UI()
    {
        transform_hour.pivot = new Vector2(0.5f, 0.1f);
        transform_min.pivot = new Vector2(0.5f, 0.1f);
        transform_sec.pivot = new Vector2(0.5f, 0.1f);

        button_get.onClick.RemoveAllListeners();
        button_get.onClick.AddListener(Get_Time);
    }
    
    //CodeFinder 코드파인더
    //From https://codefinder.janndk.com/
    private void Update_Time()
    {

        DateTime now = DateTime.Now;
        hour = (now.Hour / 12f) * 360f + (now.Minute / 60f) * 30f;
        min = (now.Minute / 60f) * 360f;
        sec = (now.Second / 60f) * 360f;

        transform_hour.localRotation = Quaternion.Euler(0f, 0f, -hour);
        transform_min.localRotation = Quaternion.Euler(0f, 0f, -min);
        transform_sec.localRotation = Quaternion.Euler(0f, 0f, -sec);

        text_date.text = string.Format("{0}\n{1} {2}/{3}", now.ToString("tt"), now.DayOfWeek.ToString().ToUpper().Substring(0, 3), now.Month, now.Day);

    }
    private void Get_Time()
    {
        DateTime now = DateTime.Now;
        text_get.text = string.Format("{0}\n{1}/{2} {3}", now.ToString("tt hh:mm:ss"), now.Month, now.Day, now.DayOfWeek.ToString().ToUpper().Substring(0, 3));
        Debug.LogError(text_get.text);
    }

 

변수(variable)

transform_hour (RectTransform) : 시침
transform_min (RectTransform) : 분침
transform_sec (RectTransform) : 초침
text_date (Text) : AM/PM 및 날짜, 요일 표시
text_get (Text) : 현재 시간과 날짜 표시
button_get (Button) : text_get에 값 넣어주는 버튼

 

함수(function)

Init_Time : 시간을 초기화하고 반복문 실행
Init_UI : 각 시간 이미지의 피벗 설정, 버튼 기능 할당
Update_Time : 시간을 데이터화해서 아날로그시계 적으로 UI 표시
Get_Time : 현재 시간과 날짜 반환

 

 

아날로그시계 / Analog Clock / DayOfWeek / Month / Day