유니티5 독학하기 그 55번째 걸음-작업이 진행되는 progress(프로그래스) 바 만들기part1

안녕하세요?

이래저래 유니티5를 공부하다 보니 작업이 한참이나 늦어져서 이제서야 포스팅을 올립니다. 이번에 올리는 내용은 다른게 아니라 이전에 포스팅에서 원소전환을 위한 버튼4개를 만드는데 성공했는데, 문제는 이게 하나 선택하고 나면 일정시간 동안 바뀐다는 것을 보여줘야 할 필요성이 있다는 것입니다. 그래서 관련된 내용을 올리고자 했는데 너무 내용이 길어져서 하는 수 없이 여러부분 포스팅을 나누게 되었습니다.

먼저 해야 할 작업은 유니티5의 프로젝트 뷰의 검색창에서 progress라고 입력을 해서, Control-Simple Progress Bar.Prefab을 선택하는 것입니다.

다음으로는 선택된 프리펩을 계층뷰에 있는 InGame2DUI에 드레그 앤 드롭을 해서 놓아두는 것으로 새로운 자식 오브젝트로 생성이 가능합니다. 참고로 이 Control-Simple Progress Bar는 원래 NGUI안에 있는 wooden Atlas안에 포함이 되어 있는 것입니다.

다음으로는 이름을 Progress라고 변경을 하도록 합니다.

그리고 ColorTint, Size, Value의 값을 위 스크린샷과 같이 바꾸어 주도록 해야 합니다.

이번에는 Progress의 자식 오브젝트인 Foreground를 선택하도록 합니다.

다음으로는 ColorTint를 바꾸어 주는데, 아마 progress바가 채워지는 대 채워지는 색상을 결정하는 듯 합니다.

그리고 나서 가장 아랫쪽에 있던 Thumb이라는 Progress의 자식 오브젝트를 지우도록 합니다.

마지막으로 계층뷰에서 작업을 다 마친 progress를 프로젝트 뷰에 있는 prefabs폴더로 드래그 앤 드롭을 해서 프리펩으로 만들어 주도록 해 봅니다.

다음으로는 PowerSources안에 있는 Source1의 항목을 선택하도록 합니다.

다음으로 PowerSource.cs라는 스크립트안을 보면, SwitchElementToutine이라고 하는 코루틴이 있습니다. 여기서 부터 왜 코루틴(coroutine)이 등장하느냐 하면, 보통의 함수는 1개의 프레임안에 작업이 완료되어 버립니다. 그래서 이와 같이 서서히 사라지거나 여러프레임에 걸쳐서 채워지는 바와 같은 경우에는 함수를 사용할 시에 한번에 작업이 완료되어 버립니다. 

그래서 코루틴이라는 것을 써서 중간에 자르고, 다음 프레임에서 이전 프레임까지 진행된 내용을 이어받아서 작업을 할 수 있도록 하는 기능을 사용한다고 합니다. 원래는 아래와 같이

IEnumerator 함수명(){ yield return nulls; } 라는 형식으로 선언을 하고, 실행을 시킬때는 StartCoroutine("함수명"); 이런 형식을 띕니다.

그런데 유니티5의 설명서에서는 그냥 function 함수명() { yield; } 라고 선언만 해도 코루틴으로 선언이 된 것으로 유니티5의 스크립트 상에서 인정을 해 주며, 실행시킬 때도 그냥 함수명(); 이라고 입력을 하기만 해도 된다고 설명서에는 그렇게 적혀 있었습니다.

아무튼 지금은 그냥 yield return null; 이라고만 되어 있어서 아무런 기능이 없는 것을 이제 실습내용대로 코딩을 하도록 합니다.

여기서 저는 다른건 대충은 이해가 되는 듯 하기도 하지만, 문제는 변수 += (Time.deltaTime / switchDuration); 이라는 부분이 이해가 안되기는 합니다. 이 부분에 대해서는 나중에 추가로 찾아봐야 할 일이 있으니, 일단 찾아 보도록 하는데, 문제는 CreateProgressSlider() 라는 함수가 없으므로, 이 함수를 추가로 만들어야 한다는 것 입니다.

역시나 이 부분도 주석처리를 한 부분의 설명이 있기는 하지만, 제가 자유자재로 쓰기 위해서는 아직 가야할 길이 멀다는 생각이 듭니다. 여기서는 일단 원래라면 인스펙터 뷰에서 컴포넌트 추가 같은것을 여러개 해야 하는 작업을 단지 코드를 작성하는 것으로는 대신 처리가 되었다는 것 정도만 알 수 있었습니다.

여기까지 따라오는 데만 너무 시간이 걸려서 이번 포스팅에서는 이렇게 간단하게 끝내지만, 그래도 다음 포스팅에서는 여기서 사용된 내용이 무엇인지 좀더 정확히 알 수 있도록 설명을 하도록 해 보겠습니다.