유니티 모서리가 둥근 체력바 구현하기(Unity Round Hp Bar/Slider)

모서리가 둥근 HP Slider 손쉽게 구현하는 방법

이미지 가장자리(구석)이 둥근 모양일 경우에 슬라이더 바 구현하는 방법입니다. 위에 화면처럼 현재 게임을 개발중에 있는데요, 처음에 저 둥근 HP Bar를 가지고 삽질을 좀 했었습니다. 이제 해결방법을 찾아서 포스팅해 볼까합니다.

보통 그냥 슬라이더를 사용해서 구현하게되면 슬라이드 가장자리가 둥근이미지를 사용하게되면 찌그러져 나오게됩니다. 이렇게 구현해 놓으면 보기에 영 좋지 않지요. 처음에는 이걸 어떻게 해결해야하나 고민하다가 발견한 방법은?

의외로 간단하더라구요. 해결방법입니다. 먼저 Bar 즉, Slider 에서 Bar 이미지를 선택합니다. 그러면 Image(Script) 컴포넌트를 보면 Image Type 이 있는데 이게 'Simple'로 되어 있을것입니다. 요녀석을 Filled 로 선택해주면 끝!

제가 사용한 예제노드입니다.

  

• SliderHp: Slider 컴포넌트

• Background: HP 바의 배경

• Bar: 빨간색 HP 바

• HpText: 현재남은 HP(33/100)

• HpText(1): HP 글자표기

여기서 잠깐

Image Type의 속성을 보면

• Fill Method: 요걸 Horizontal 로 하면 가로로 체력게이지가 움직이고, Vertical 로 하면 세로로 Radical 로 하면 시계방향으로 움직이게 됩니다. 

• Fill Origin: 게이지의 시작이 오른쪽일지 왼쪽일지를 정하는 거죵

• Fill Amount: 게이지의 값

• Preserve Aspect

자 다시 본론으로 돌아와서 단지 Image Type을 Simple에서 Filled로 변경해준것 밖에 없는데 아래처럼 깔끔하게 구현되었지요?

아래는 가장자리가 둥근 슬라이드바 구현하는 방법을 녹화한 화면입니다. 글이 이해가 잘 안되시는 분들께서는 한번 참고해 보세요.