[Retro유니티] UI 슬라이더 사용을 통한 체력바 구현 & PlayerHealth.cs

체력을 표시할 원형 UI를 만들 것이다.

 

UGUI 캔버스는 게임화면을 기준으로 UI를 배치한다. 체력슬라이더는 3D공간에서 캐릭터를 따라다녀야 한다.

 

Canvas 컴포넌트의 Render Mode를 World Space으로 변경한다. 이 경우, 캔버스와 그 위의 UI 게임 오브젝트들은 3D 게임월드에 배치된다. 즉, 게임월드상에서의 위치/회전/크기를 가지게 된다.

 

Reference Pixel per Unit 은, UI 스프라이트의 픽셀크기와 게임 월드의 유닛크기가 대응되는 비율을 결정한다. 100이라면 100유닛이 1픽셀이므로 뿌옇고, 1이면 깔끔하게 보인다.

 

캔버스 위치와 크기 설정

캔버스가 캐릭터 발밑에 배치된 것을 확인할수있다.

 

tip) Hierarchy 에서 Alt + 클릭으로 화살표를 누르면, Canvas의 모든 자식 게임오브젝트가 펼쳐짐.

 

Handle Slide Area 게임오브젝트는 슬라이더의 손잡이를 그리는데, 필요없으므로 삭제하였다.

그 후, 남은 세 Object 모두 Canvas의 크기에 맞춰 늘렸다.

 

1, 2. 슬라이더 컴포넌트의 이름변경

3. Slider 손잡이를 삭제하였더라도, 여전히 Slider를 클릭하고 드래그할 수 있는 상황을 막기 위해, Interactive를 체크해제하였다

4. UI시 상호작용하는 시각피드백은 필요없으므로 None으로 하였다. 예를 들어, 전환시 Color Tint로 설정되었다면 UI요소에 마우스를 가져가거나 클릭하면 색/투명도가 변한다.

5. Slider Component는 범위를 가진다. 기본 체력이 100이므로, 최대치는 이에 맞춰서 100으로 설정하였다.

 

Slider 컴포넌트는 Value값에 따라 Fill Rect 필드에 할당된 게임오브젝트 크기를 조정한다.

 

Background에 255 255 255 30

Fill에 255 0 0 150 을 할당한다.

 

Fill의 ImageType이 Simple이 아니라 Fill이라면,

Fill 게임오브젝트가 단순히 가로/세로로 잡아늘려서 채우는게 아니라, 원형으로 차오르게 된다. 우리가 원하던 바다.

 

PlayerHealth.cs 구현

기능은 아래와 같다.

• LivingEntity를 확장할 것.
• LivingEntity의 생명체 기본기능을 구현할 것.
• 체력이 변경되면 Slider에 반영
• 피격시 효과음 재생
• 사망시 다른 컴포넌트 비활성화
• 사망시 효과음과 애니메이션 재생
• 아이템 감지 및 사용

이 이후는 다음에 구현하도록 하자.