HP bar를 스프라이트로 구현하기

HP bar 같은 경우에 UI의 Image를 사용하면 fill을 사용해서 쉽게 구현할 수 있다.

그러나 그렇게 구현했을 때 캐릭터가 움직이게 된다면 캐릭터의 위치에 맞게 hp바의 위치를 옮겨줘야 하고 혹시 캐릭터가 달라지게 되면 각각의 캐릭터에 맞게끔 위치를 조정해줘야 한다는 점이 있다.

이 때 Image가 아닌 SpriteRenderer를 통해서 HpBar를 구현해보려고 한다.

 

방법은 간단하다.

 

먼저 빈 오브젝트를 하나 생성하고 이름을 HpBar등으로 정한다.

다음에 자식으로 Background 용으로 쓰일 스프라이트 객체를 하나 생성한다.

그리고 같은 HpBar의 자식으로 빈 오브젝트를 하나 생성하고 이름을 Hp등으로 한다.

Hp의 자식으로 실제로 보일 Hp스프라이트 객체를 생성한다. Background와 Hp 스프라이트는 동일한 사이즈여야 한다.

 

여기서 Hp스프라이트 크기의 절반에 해당하는 만큼 오른쪽으로 움직인다.

그리고 Hp도 Hp스프라이트 크기의 절반에 해당하는 만큼 왼쪽으로 움직인다.

이렇게 하고 Hp의 스케일 값을 0에서 1 사이로 조정하면 Hp가 늘어나고 줄어든다.

 

구조

위와 같이 구성하면 된다. Hp 스프라이트 크기의 절반을 움직여야 되기 때문에 스프라이트의 PPU에 따라 값이 달라진다.