[Unity] 3D Text와 Sprite Widget을 이용하여 점수 UI 만들어주기

3D Text와 Sprite Widget을 이용하여 점수 UI 만들어주기

1. 점수 배경용 Sprite추가하기

EmptyObject를 추가하여 이름을 1_Score로 변경을 해 주고 위와 같이 Transform값을 수정해줍니다.

1_Score의 자식으로 NGUI의 Sprite Widget을 추가해 줍니다. 그리도 위의 화면에서와 같이 이미지를 선택을 해 줍니다.

추가 후 아래와 같이 이름을 변경하고 Inspector에서 값을 수정합니다.

왼쪽 상단으로 Score의 배경이미지가 생긴 것을 확인할 수 있습니다.

2. Text Mesh를 활용하여 점수를 표현

Text Mesh를 활용하여 점수를 표현하는 부분을 작업하겠습니다. 원 강좌와는 다르게 Label을 사용하여 작업을 진행했습니다만, 그 이유는 아래에 설명을 조금 화면과 함께 붙였습니다. 먼저는 원 강좌와 같이 해 보겠으나 혹시나 쓸데없이 잘못 되는 결과를 보고싶지 않으시다면 3. Label을 가지고 점수표현 부분으로 넘어가서 보셔도 무방하겠습니다. 그런 분들은 1_ScoreText라는 객체는 필요가 없습니다.

아래에 살짝 적은 댓글을 보고 수정을 해 보았습니다. 

원 강좌의 환경에서는 문제가 없었을 수 있지만 지금 저의 환경에서는 문제가 발생하였습니다. 원 강좌를 따라가는 부분이므로 위에서 설명한 것 처럼 넘어가셔도 상관은 없습니다. 

Text Mesh를 추가해보겠습니다. EmptyGameObject를 추가 하신 후 아래의 이미지에서 선택된 것 처럼 1_ScoreText로 이름을 변경합니다.

그리고 Text Mesh Component를 추가해줍니다. 그 방법은 위의 오른쪽 부분에 있습니다.

그리고 해당 객체의 Inspector에서 값을 수정 해 줍니다.

저는 위와 같이 작업을 하고 Play를 해도  점수가 보이지 않았습니다. 숫자가 뒤에있나? 싶었지만 그 문제는 아니었습니다.

위의 문제가 이미지 하나로는 명확하게 보이지 않지만.... 

위와 같이 잘 보이게 흰색 Text의 크기를 키우고 z좌표를 -1보다 더 티가 나도록 -10으로 설정을 하였습니다. 겹쳐지지 않는 경우에는 상관이 없지만, 겹쳐지는 경우 Background뒤로 Text Mesh가 사라져버려서 글씨가 작을때에는 보이지 않았습니다. 

그래서 해당 강좌의 댓글을 확인하였고 해답을 얻었습니다.

3. Label을 가지고 점수표현

NGUI의 Label을 하나 추가해줍니다.

이름을 위와같이 수정 한 후 오른쪽과 같이 Font Type을 수정해줍니다. Dynamic으로 선택해주시면 되겠습니다.

나머지 값을 위의 화면을 보고 맞춰주시기 바랍니다.

4. GM C# 컴퍼넌트와 Label연동하기

Score변수를 GM Object의 GM C# Component와 연동을 하여 점수를 표시하겠습니다.

GM Script파일을 열어줍니다.

그리고 아래와 같이 코드를 추가해줍니다. 

첫번째로 추가된 부분은 UILabel을 선언하여 주었습니다. 그 다음 Update에 추가 된 부분은 Label의 Text내용을 수정하는 것 입니다. 그 수정을 하는 데에 있어서 사용한 항목과 의미는 원 강좌에서 발최하여 정리를 해 보면 다음과 같습니다. 

 - Time.timeSinceLevelLoad는 Time Class의 명령어로 Scene이 Load된 후 현재까지의 시간을 초 단위로 실수형(Float)으로 보여줍니다.

 - ToString("N0")는  C#언어에서 제공하는 문자열 정규 표현식으로, 실수나 정수등의 값을 문자값으로 변환해줍니다. 뒤에 괄호 안의 설정에 따라 소수점등의 표현이 가능합니다. 

  (Test를 해 보니 0.0으로 하면 소수점 1자리까지, 0.000으로 하면 소수 셋째자리까지 표기가 되는것을 확인하였습니다. 또한 000.000으로 하면 소수부는 3자리까지, 정수부는 1000미만의 경우 0을 채워 3자리를 만들고 3자리를 넘어가면 그냥 자리수가 늘어나 0 없이 표기되었습니다.)

저는 약간의 설정을 통해서 점수가 오른쪽정렬되는 효과로 마무리를 하였습니다.

이상으로 강좌 마치겠습니다. 

<출처는 강좌 마녀이야기, 주소 : http://blog.soonsoons.com/198714476>