Unity nGUI Circular Progress Bar Thumb 붙히기 (시간 기준 Rotate 시키기)

안녕하세요. 달리는애아빠입니다.

지난 시간에 Unity nGUI 를 활용한 원형 프로그레스바 제작을 진행해 보았습니다.

헌데 Progress bar 에 Thumb 를 원형으로 진행 시간에 맞추어서 돌아가도록 구현해 보았습니다.

지난 시간 구현 내용을 보실 분들은 아래 URL 로 확인하시면 됩니다.

https://papa-run.tistory.com/94?category=851281 

지난시간에 적용한 원형 프로그레스바에 Thumb  이미지를 시간이 지남에 따라 적용 하는 방법입니다.

1. 원형 Thumb 이미지를 원형 프로그레스바 크기에 맞도록 제작합니다.

저는 이런 이미지를 제작하였습니다.

음 프로그레스바 크기에 맞춘 thumb 이미지라고 보면될거 같습니다.

위이미지는 3번째 사진 보시면 저렇게사각형 크기에 맞춘 thumb 이미지 입니다.

2. 저 thumb 이미지를 프로그레스바 진행 속도에 맞추어서 회전을 진행 하려합니다.

각 프로젝트에서 값이나 변경을 해주셔야 합니다.

제가 개발한 내용은 

1.  SetTime 으로 노래에 시간이 들어옴

2. 노래의 시간을 화면에 UI 분 초로 표시를 해주고

3. 시간별 스피드를 구해줍니다.

4. thumb 이미지를 각 시간 기준 Rotate 에 따라 돌려주도록 합니다.

아래 주요 부분 빨간색으로 표시를 해두었으니 확인 하시면 될듯 합니다.

그냥 복붙 하시면 안될 수도 있습니다~ 소스 확인 하시고 적용 하셔야 합니다. 제가 작업내용에서 주요부분만 추려서 다시 만든 부분입니다.

public GameObject thumb;
public UILabel _endTimeText;

private float _speed = 1f;
private float _endTime = 0f;
 
public void SetTime(float time)
{           
    //시간 표시 셋팅 및 thumb 이미지 rotate 진행
    _endTime = time;
    _endTimeText.text = getParseTime(_time);
    _speed = 360f/_time;
    thumb.transform.Reset();
}
 
private void Update()
{
     if (_endTime >= 0)
    {
       _endTime -= Time.deltaTime;
       _endTimeText.text = getParseTime(_endTime);
 
       thumb.transform.Rotate(Vector3.forward,  _speed * Time.deltaTime);
    }            
}
 
public string getParseTime(float time)
{
   string t = TimeSpan.FromSeconds(time).ToString("mm\\:ss");
   string[] tokens = t.Split(':');
   return tokens[0] + ":" + tokens[1];
}

결과

잘 동작하는 군요 

다음에는 또 다른 내용으로 찾아 뵙도록 하겠습니다. 

미약하게나마 유용한 정보가 되었다면 구독 공감 버튼은 작성자에게 큰 힘이 됩니다. 감사합니다 ^^