유니티 - 2D Sprite를 이용한 체력바(게이지바) 구현하기

2D Sprite를 활용하여 체력바(게이지바)를 간단하게 구현하는 방법이 있다.

만일 3D 프로젝트라 2D Sprite가 없는 경우엔 패키지에서 설치하도록 하자

 

먼저 패키지 매니저에서 2D Sprite를 설치한다.

 

프로젝트 뷰에서 2D - Sprites - Square 생성

 

UI - Image 로 체력바가 들어갈 이미지를 만듬

 

 

만든 Square Sprites를 이미지의 Source Image에 넣어준다. 

체력바를 만들것이니 색상을 빨간 색으로 해두면

 

 

체력바를 만들 수 있다.

 

 

이는 이미지 컴포넌트의 Fill Amount가 1일 때의 모습이다.

 

 

만일 Fill Amount가 0이 되면

 

 

빈 게이지가 만들어진다.

 

이 Fill Amount 값을 조절하여 게이지를 구현할 수가 있게 된다.

 

Fill Amount 값은 [0, 1] 사이의 값을 가진다.

 

현재 체력을 최대 체력으로 나누면 [0, 1] 사이의 값을 얻을 수 있다.

 

이 값을 통해 게이지바를 구현을 할 수 있게된다.

 

체력을 값으로 생각하면 체력외에도 마나 게이지 등 다양한 게이지를 만들 수 있을 것이다.

 

현재값을 curValue, 최댓값을 maxValue로 하고 코드를 짜면

 

처음 게임을 시작했을 땐 현재 값이 초기 값(startValue)이 되므로 Start함수서 넣어주고

 

게이지바의 UI 업데이트는 Update 함수서 진행된다.

 

GetPercentage 함수에서는 현재값을 최댓값으로 나누어 [0, 1] 사이의 값을 반환하고 그 값을 받아 uiBar의 fillAmount 에 넣어준다.

이를 Update 함수서 수행하여 매 프레임마다 업데이트 하도록 하였다.

 

Add와 Subtract 함수의 경우 현재값에 value 값을 받아 추가/빼는 함수이다.

Add의 경우 최댓값을 넘으면 안되니 Mathf.Min으로 최댓값(maxValue)을 초과하진 못하게 해두고

Subtract의 경우 최솟값보다 작으면 안되니 Mathf.Max를 통해 최솟값 0 아래로 떨어지지 않게 했다. 

(최솟값이 0보다 떨어질리는 없기에 구태여 minValue를 둘 필요는 없다)

 

이미지 컴포넌트의 fillAmount 의 값을 조절하여 체력바(게이지바)를 조절하는 간단한 방법을 알아보았다.