유니티 C#) 체력바 만들기, 스킬 쿨타임 만들기

오늘은 체력바와 스킬 쿨타임 등

뭔가가 줄어드는 형태의 UI에 관하여

글을 써보겠다.

 

이러한 기능을 모르는 시절에는,

transform의 scale을 조정해서

체력바를 표현하고 그랬었는데,

지금 보니 참 추억이다.

---

아무튼, 본격적으로 예제를 생성해 보자.

 

먼저 UI -> Image를 클릭해서

이미지를 만들어보자.

 

나(필자)는 잘 보이게 하기 위해서

카메라는 하얗게, 이미지는 검은색으로 설정해서

이런 사진이 나왔다.

사실 아무렴 상관없다.

---

우리는 저 오브젝트의 Image 컴포넌트를 유심히 봐야 한다.

여기서 설정을 하게 되는데,

영어를 할 줄 안다면 알겠다시피, 

딱히 우리가 원하는 기능에 대한

단어가 없어 보인다.

 

사실 이건 Source Image에 Sprite가 없어서 그렇다.

나는 우선 체력바를 만들기 위해

유니티에서 기본으로 제공하는 Square 사진을 넣어보겠다.

 

우측에 동그란거 누르면 나옴.

여기서 우측 상단에 눈에 빗금이 칠해진 저걸 클릭하면

기본적인 스프라이트도 나오게 된다.

이렇게 스프라이트를 넣었다면,

갑자기 새로운 게 몇 가지 생겼다.

 

Image Type, 이걸 Filled로 바꿔준다.

여기서 Filled는 어떻게 채울지 정한다 정도로 해석하면 된다.

나(필자)는 우선 체력바를 설명하고 있기에

Fill Method를 Horizontal로 바꿔주었다.

 

이러면 모든 설정이 끝났다.

체력바처럼 가로의 크기를 늘리고,

색상도 조금 빨간색으로 바꿔준 후,

여기서 Image컴포넌트의 FIll Amount(채우는 양)을 바꿔보자.

그러면 체력바가 줄어드는 듯한 연출을 볼 수 있다.

 

체력바 예시

여기까지 체력바에 대해 알아봤고,

---

이제 스킬 쿨타임도 간단히 표현해 보자.

이건 진짜 간단하다.

이 설정에서 Fill Method를 Radial 360으로 바꿔주면 거의 끝이다.

이제 모양을 정사각형으로 바꿔주고,

Fill Amount를 바꿔보면? 스킬 쿨타임 처럼 된다.

조금 더 현실적인 예시를 위해 뒤편에 

게임 리그오브 레전드의 스킬 사진(이즈리얼의 W, 정수의 흐름)을

놓아보겠다.

이런 식으로 활용할 수 있는 것이다.

TMI를 하나 말해보자면, 사실 이러한 효과는

극 좌표계를 이용해서 만든 효과이다.

 

우리가 평소에 사용하는 좌표계는 

데카르트 좌표계(x, y)인데,

이런 회전을 나타내는 데에 취약해,

극 좌표계라는 회전을 위한 좌표계로 

이러한 효과를 구현한 것이다.

극 좌표계

 

---

아무튼, 코드로 제어하는 법 또한 이야기해 보겠다.

public Image bar; //이미지 컴포넌트 가져오기.

void Update()
{
        percent = data.hp / data.Maxhp; //최대 hp분의 현재 hp
        bar.fillAmount = percent; // 채우는 정도 = 퍼센트
}

이런 식으로 해주면, hp값만 조절하면

알아서 체력바가 내려가게 된다.

---

이상으로 도움이 되었길 바라며,

 

끝.