Unity_간단한 UI만들기_소지금, 상태바, HP, MP (TextMeshPro - Text, Slider 이용하기)

오늘은 TextMeshPro를 이용해서 

"소지금이 증가하는" UI를 만들어볼 예정이다.
나의 목표는 "식물과 가구와 같은 '배치물'을 임의로 배치 할 수 있는 방" 이다.

오늘 구현해볼것

• 간단한 배경화면 만들기
• 소지금 UI만들기 + 자동증가

오늘 배운것
1. TextMeshPro 접근방법 및 활용방법
2. 형변환

1.배경화면구현

배경화면구현은 Unity Asset Store에서 공짜인거 하나를 주워서 사용했다 ㅎㅎㅎ
https://assetstore.unity.com/packages/2d/free-2d-mega-pack-177430

Free 2D Mega Pack | 2D | Unity Asset Store

게임을 구성하던 도중에 화면에 canvas 경계선이 나타나는 것을 확인 할 수 있었다
이런 경우에는 Gizmos에서 Canvas 체크를 해지해 주면 된다!

 

2. 소지금 구현하기 (TextMeshPro - Text)

이번에 유니티에서 TextMeshPro라고 새로운 Components가 나왔는데 스크립트에서 어떻게 접근을 해야하는지 아무도 잘 알려주지 않아서... 그래도 결국 찾아냈다 !!

using TMPro

TextMeshProGUI text;

일단 일정 시간이 지나면, 자동적으로 소지금이 올라가는 기능을 구현해보고자 한다.
방법은 GameManager를 만들어 Canvas에있는 TextMeshPro에 접근하여, 금액 부분을 계속에서 변경하게끔 하는 것이다.

우선 GameManager오브젝트와 스크립트를 만들고 거기에 소지금의 값을 보여주고 있는 TextMeshPro를 할당해 주었다

그리고 TextMeshPro객체의 Text로 접근해서 계속 +1을 하도록 코드를 짜보았다.
그랬더니... 숫자가 값이 증가하는게 아니라 ㅋㅋㅋ 숫자의 갯수가 늘어나는 것을 확인 할 수 있었다.

이게 아닌데 ㅠㅠ

이런 문제가 나타나는 것은 TextMeshPro에 들어가는 Text값의 자료형이 'string'이기 때문에 발생하는 것이었다.
문자열(string)에 +1을 한다는 것은 문자열1111111... 이런식으로 문자'1'이 계속 옆에 추가되는 식이고
숫자(int, float)의 경우 +1을 하면 1+1 = 2 이런식으로 사칙연산이 된 결과값이 나오게 된다

그래서 귀찮지만 아래와 같은 과정을 거쳐야 했다.
1) TextMeshPro.text의 값을 string → int로 형변환후
2) +1을 해주고
3) 다시 int → string으로 바꿔 TextMeshPro.text에 입력해준다

그래서 나는 AutoGetMoney()라는 함수를 만들어서 위의 3가지 내용을 실행하기로 했다.

이제는 돈이 잘 올라간다. 빠르게 올라가는 숫자들을 보면서, 나도 이렇게 자동으로 돈을 벌었으면 하는 좋겠다는 생각을 했다 :)

자료형 변환을 위해 아래 2가지 코드를 사용했다

string moneyStr = '100';
string heightStr = '182.1';

//문자열(string) → 숫자(int, float)
int moneyInt = int.Parse(moneyStr);
float heightFloat = float.parse(heightStr)

//숫자(int, float) → 문자열(string)
string moneyStr = moneyInt.ToString(); 
string heightStr = heightFloat.ToString();

 

3. 방상태 구현하기 (Slider, Image)

일단 방 상태를 구현하기 위해 아래와 같은 내용을 진행했다.
1) 관련 상태를 표현할 slide bar 구현
2) 각 상태별로 value 연동
3) value 값에 따라 bar색상 변경

slide bar를 구현하고 GameManager에 각 요소를 넣은 모습
1. Slider오브젝트에서는 value값을 조절할 수 있다.
2. Slider오브젝트중 Fill(Image)에서는 Bar의 색상을 조절 할 수 있다.

그래서 각각 상태별 Slider와 Image 오브젝트를 연동해 주었다.
상태는 크게 3가지로 정했다.

• 온도 (Temperature)
• 습도 (Humidity)
• 일조량 (Sunray)

그리고 각 상태별로 초기값을 정하고 value값에 따라 색상이 변하게 구현하려고 한다.
예를들어 온도가 너무 낮으면 파란색, 너무 높으면 빨간색, 적절하면 초록색 이런느낌

우선 초기값은 온도 :32.5, 습도 40, 일조량: 80 이렇게 설정한후
각각의 상태값을 Slider에 반영한후, 상태 값에 따라 bar의 색상을 조절하도록 코드를 구현해 보았다.

잘 작동한다.

끝.

 

---

참고자료