[Unity] 체력 바 만들기

 

Learning 

When: 1학년 6월 26일

 

How:

게임에서 성의 체력을 표시하는 체력 바를 만들려고 했는데, UI 작업을 많이 안 해봐서 슬라이더도 잘 사용하지 못했습니다.

그래서 사용법을 검색해 보고 어느 정도 배운 다음에 3시간 정도 계속 시도한 끝에 완성할 수 있었습니다.

 

Understanding:

일단 슬라이더는 처음 만들면 이렇게 동글동글한 하얀색 기본 슬라이더가 생기는데요, 여기서 저기 있는 체력바와 똑같이 만들어 보겠습니다.

1. 사용한 스프라이트 (전부 다 Import Setting은 Point, RGBA 32 bit으로 설정했습니다. 사실 안 해도 상관은 없지만 하면 조금 더 깔끔해집니다.)

Background1.png

0.00MB

Background2.png

0.00MB

Fill.png

0.00MB

Handle.png

0.00MB

 

2. 일단 저는 Background가 2개인데, Background1을 가장 위에 놓고, 그 아래에 HP가 없는 칸의 색과 HP가 있는 칸의 색을 정했기 때문에 Background2가 가장 아래에 깔리고 그 위에 Fill을 넣는 방식으로 구성했습니다.
일단 Background를 하나 더 추가하고, 하이라키 기준으로 위에 Background2를 넣고 그 아래에 Background1을 넣은 후, 둘 다 Image에서 'Set Native Size'를 눌러줍니다. 이 작업은 Fill과 Handle에서도 똑같이 해줍니다.

그러면 이미지가 원래 크기로 설정될 것이고, Background 두 개를 middle, center로 옮겨서 화면 중간으로 정렬해줍니다.

3. 그리고 슬라이더를 선택하여 Background1과 크기를 딱 맞춰줍니다. 여기서는 52, 9로 설정하니 정확히 맞았습니다.

4. Handle을 선택한 후, Image에서 'Preserve Aspect'를 켜줍니다. 그러면 Handle 크기가 이상하게 변하지 않습니다.

5. Handle Slide Area와 Fill Area에서 Anchor Preset을 stretch, stretch로 바꿔줍니다. 그러면 이제 Handle이 잘 움직일 것입니다.

6. Fill에서는 Image Type을 Filled로 바꾸고, Fill Method를 Horizontal로 설정해줍니다.

7. 마지막으로 Fill의 Anchor Preset도 stretch, stretch로 바꿔줍니다. (원래 그렇게 되어 있어도 다시 한 번 해줍니다.)

 

끝이긴 합니다만, 혹시 잘 되지 않는다면 저처럼 머리를 좀 박으면서 해보시면 어찌저찌 완성하실 수 있을 거라 생각합니다. (저도 티스토리 보면서 따라했는데 안 돼서 결국 혼자 해냈거든요...)

 

Result: 이런 식으로 체력 바를 만들어서 value를 TextMeshPro에 연결하면, 체력을 텍스트로도 함께 표시할 수 있습니다.