[Unity] FilledSprite를 이용하여 HP 게이지 바 만들기

FilledSprite를 이용하여 HP 게이지 바 만들기

우선 NGUI의 위젯을 이용하여 HP바를 표시 할 태두리와 HP를 만들어 보도록 하겠습니다.

 Player(마녀)가 Enermy Object(호박)와 부딪힐 때 HP가 감소하는 UI를 만들어 보도록 하겠습니다. 

(이미 값은 기존의 과정을 하셨다면 감소합니다.)

먼저, 위와 같은 이름으로 Panel Object를 추가해줍니다. 

그 후 z값을 수정하여 UI가 다른 Object들 보다 앞에, 화면에 가깝게 배치를 하여 화면에서 보일 수 있도록 해 줍니다.

이제부터는 HP의 UI에 표시 될 이미지들을 찾아서 추가 해 보겠습니다. 먼저 Widget Tool을 열기 위해 아래와 같이 선택을 해 줍니다.

그리고 아래의 그림과 같이 값을 바꾸고 이미지를 선택 해 줍니다. 혹시나 Add To버튼 옆이 다른 Object가 들어가 있다면, 드레그 엔 드롭으로 위에서 추가한 3_UI Panel이 들어가있어야 합니다. 아니면 그냥 나중에 추가 한 후 위치를 옮겨도 크게 상관은 없어 보입니다.

추가 후에는 아래 캡쳐화면을 보고 먼저,  확인 및 수정을 해 줍니다.

1. 아래의 왼쪽 중단에 계층창에 잘 추가가 되었는지 확인합니다.

2. 오른쪽 중단의 Inspector와 같이 값을 수정해줍니다.

3. 이미지가 잘 들어가서 화면(Sense)에 반영이 되었는지 확인합니다.

(다른 이미지가 들어가 있다면 변경 해 줍니다.)

Sprite 위젯 템플릿을 이용한 HP Bar위젯 오브젝트 만들기.

이번에 다루는 내용은 위에서 HP Bar의 틀(프레임)을 만들었다면 이번에는 진짜 현재 HP수치를 보여줄 UI를 만들어보겠습니다.

먼저 작업한 위의 내용과 같이 Widget Tool을 열어서 아래와 같이 추가를 해 줍니다.

원래 강좌에서는 FilledSprite를 사용하지만 지금 제가 사용하는 버전(5.5.1f1)에서는 없습니다. 그래서 작업을 살짝 다르게 하였습니다. 큰 내용은 같은 것으로 보이고 Unity Tool이 조금 달라진 것으로 보입니다.

먼저 강좌와는 다르게 Sprite를 선택해줍니다. 원 강좌에서는 Filled Sprite를 골랐습니다.

고르고 나면,

Sprite가 추가가 되고 그 후 Sprite Type을 Filled 로 선택하여줍니다. 

그리고 원 강좌에서 설정한 것 처럼 Fill Dir(채우는 방향)을 Horizontal로 설정해줍니다. 

설정을 마치면 위의 주황색으로 쓰고 노랑 화살표로 가리킨 부분처럼 Fill Amount값을 조절함에 따라 채워지는 정도가 달라져 보이는 것을 확인하실 수 있습니다.

PlayerScript C#컴퍼넌트와 Sprite Object연동하기

그리고 HP를 다룰 UI와 Player 오브젝트를 연동해보도록 하겠습니다.

우선 Player Object에서 HP Bar를 받아올 변수를 선언해줍니다. 이름은 위와같이 하였습니다.

그 후 TriggerEnter 함수에 UI Sprite의 FillAmount값을 변경하는 코드를 아래와 같이 추가해줍니다.

그리고 나서 이제 해당 Player Inspector에 작업한 1_GuageBar를 드레그 앤 드롭으로 먹여줍니다.

아래는 Play화면을 캡쳐하였습니다. 

게임이 진행되면서 호박에 부딪히면 HP가 감소하고 그것이 바로 UI로 반영이 되는것을 확인할 수 있었습니다.