[유니티]똥피하기 게임 만들기 - HP 게이지 배치

캐릭터의 체력을 표시하는 HP 게이지를 배치해보겠습니다.

 

[Hierarchy] 뷰에서 [Create]를 선택하고 [UI]->[Image]를 선택합니다.

 

이름을 Image에서 hpGage로 바꿉니다.

 

 

 

 

 

hpGage 오브젝트에 게이지 이미지를 설정하겠습니다.

 

 

 

 

 

자, 이제 앵커 포인트라는 개념을 설명해드리겠습니다.

 

HP 게이지가 화면 오른쪽 위에 표시되도록 할 것인데요.

 

앵커 포인트는 원점의 위치를 말합니다. 자세히 설명하면 화면 크기가 바뀔 때

 

어디를 원점으로 해서 UI 부품 좌표를 다시 계산하는가? 입니다.

 

예를 들어 앵커 포인트를 화면 중앙에 두고 화면 크기를 줄이면 오른쪽 위에 있는 HP 게이지 표시가 화면에서 이탈할 수 있습니다.

 

앵커 포인트를 화면 오른쪽 위에 두면 HP 게이지는 항상 오른쪽 위에 표시되고 화면에서 이탈하지 않습니다.

 

앵커 포인트를 적절히 설정하면 실행하는 기기의 화면 크기에 의존하지 않는 UI를 만들 수 있습니다!

 

 

 

앵커 포인트를 설정해보죠.

 

[Hierarchy]뷰에서 [hpGage]를 선택하고 [Inspector]에서 앵커 포인트 아이콘을 클릭합니다.

 

[Anchor Presets]에서 [오른쪽 위에 고정] 아이콘을 클릭합니다.

 

 

 

 

 

위치와 크기를 바꾸어줍니다.

 

 

 

[Image Type]부분을 보겠습니다.

 

HP 게이지가 줄어드는 걸 표시하려면 Image에서 제공하는 Fill 기능을 사용합니다.

 

Fill Amount 변수 값을 바꾸면 이미지 표시 영역을 줄이거나 늘릴 수 있습니다.

 

여기서는 원형 게이지를 사용하므로 Radial 360으로 지정합니다.

 

[Fill Origin]는 잘라내기 시작하는 위치입니다. 여기서는 위에서 잘라낼 것이므로 Top으로 설정합니다.

 

[Fill Amount]의 슬라이더를 움직여 보면 HP게이지의 증감을 확인할 수 있습니다.

 

가득 찬 상태로 시작해야 하므로 초기값은 1로 설정합니다.

 

 

 

 

 

 

실행해보겠습니다.

 

 

 

다음 시간에는 똥에 맞았는지 판단 후 hp게이지를 줄여주는 감독 스크립트를 작성해보겠습니다.

 

 

 

참고도서 : 유니티5 교과서