7-8.실제 시간을 입력하면 맞춰서 회전하는 시계바늘 만들기

이번시간에는 다이나믹콤포넌트 강좌의 마지막 시간으로 시간과 분을 입력하면 시계바늘이 맞춰 회전하는 기능을 구현해볼 예정입니다. 어려운 내용은 아니며, 다이나믹 콤포넌트로 '이런것도 할수 있구나!'를 한번 느껴보세요~!

0. 준비물 및 콤포넌트 확인하기

아래 준비물을 다운받으세요.예전에 만들었던 학교시계 콤포넌트를 강좌에 맞게 살짝 수정한 버전입니다.

clock_ex.zip

Component Attributes 창을 열면 아래와 같습니다. 몸통부분과 유리부분, 시침과, 분침, 초침이 포함되어 있습니다.

미리 중심축을 바늘의 회전축에 맞춰두었습니다.

1.변수 설정하기

시간을 입력하기 위해서는 관련 UI가 있으면 좋을 것 같습니다.

1) school_clock 의 Add attribute 를 클릭해 hour_data 와 min_data 를 추가합니다. 각각 값은 원하는 시간값을 입력하면 됩니다. 저는 12시 30분을 입력해보았습니다.

2) hour_data의 우측의 아이콘을 클릭해서 설정창을 엽니다.

3) 아래와 같이 입력하고 저장합니다.

min_data 역시 아래와 같이 설정해줍니다.

4) 이제 Component Options 창을 열면, 아래와 같이 입력할 수 있는 UI가 나오는 걸 알수 있습니다.

여기에 숫자를 입력하면, Attributes 창에서도 변경됩니다.

2.분침 기능 만들기

우선 분침 기능을 만들어볼텐데요..

우선, 분침이 어떻게 움직이는 지를 먼저 고민해야 합니다.

원은 360도입니다. 1시간은 60분이죠. 그러니, 1분은 6도가 됩니다.

즉, 1분당 6도씩 시계방향으로 회전하도록 만들면 됩니다.

회전축은 Z축이므로, RotZ 값에 반영해야겠죠.

5) 이를 계산식으로 바꾸면 아래와 같습니다. min에 RotZ 값을 추가한뒤, 입력합니다.

  RotZ = 6*school_clock!min_data

6) 입력해보면, 아래와 같이 나옵니다. 그런데, 뭔가 이상하군요??

RotZ 축이 반시계방향으로 돌기 때문인데요 이럴때는 -값으로 보정해주면 됩니다.

  RotZ = -6*school_clock!min_data

이제 분을 입력하는 대로 시계바늘이 이동하는 것을 알수 있습니다.

3.시침 기능 만들기

시침은 살짝 계산이 복잡합니다. 아날로그 시계니 2시와 3시 사이의 적절한 위치도 맞춰줘야 하니까요.

자, 다시 계산을 해볼까요? 원은 360도입니다. 시간은 12까지 있으니, 1시간당 360/12 해서 30도씩 입니다. 여기까진 쉽죠?

  RotZ = 30*school_clock!hour_data

이제 분침만큼 더 회전해야 합니다. 1시간을 다시 60분으로 나눠야합니다. 즉, 30도를 60으로 나눠서 30/60 . 0.5도씩입니다. 계산식은 아래와 같습니다.

  RotZ = 0.5*school_clock!min_data

이제 시침값에 분침 값을 더해봅시다. 시침은 아래처럼 움직이게 됩니다. 시계방향으로 보정하기 위해 -를 추가하였습니다.

  RotZ = -((30*school_clock!hour_data)+(0.5*school_clock!min_data))

시침에 아래 값을 입력합니다.

시침까지 잘 조정되는 걸 확인합니다.

숙제~~

초침도 한번 해보세요. 또 초침에 맞춰 분침도 미세하게 조정되도록 해보세요~

이것으로 모든 강좌가 끝났습니다. 그동안 공부하신다고 수고많으셨어요~~ 지금까지 공부한 다이나믹 강좌를 통해 자신만의 유용한 다양한 오브젝트를 만들어보시길 바랍니다. ㅇㅅㅇ/

다이나믹강좌 처음부터 다시 보기