[Unity/2D] 체력바 만들기 - Canvas, UI, Anchors

NormalCat의 Hungry, Full 이미지 설정

NormalCat은 빈 오브젝트로 생성

Hungry, Full은 Sprites → Square 로 생성

 

NormalCat - Hungry

NormalCat - Full

 

우선 Full은 숨겨주겠습니다.

 

 

Hungry 고양이의 체력바 이미지 생성 및 설정

Hungry 밑에 체력바를 생성해보겠습니다.

Hungry → UI → Image 클릭

 

이제 Canvas를 클릭해보시면

 

Render Mode에 Overlay라고 적혀있죠?

휴대폰이라면 휴대폰 기기 스크린에, 노트북이면 노트북 기기 스크린에 직접적으로 그려진다고 생각하시면 됩니다. 자세한 설명은 더보기란▼

Render Mode 중 Overlay는 카메라의 배경 위에 UI 요소를 렌더링하는 모드를 말합니다. 즉, Overlay 모드에서는 UI 요소가 카메라의 배경을 가리지 않고 항상 위에 표시됩니다. 이 모드는 주로 게임 내에서 HUD(Head-Up Display)나 게임 인터페이스를 표시할 때 사용됩니다.

 

우리는 고양이 밑에 붙여줄 것이기 때문에 World Space로 변경해주겠습니다.

 

캔버스 값을 위와 같이 설정해보면

 

위와 같이 되는데, 크기가 너무 크죠?

 

그래서! 캔버스 밑에 이미지 오브젝트로 가서 Anchor를 변경해보겠습니다.

Shift + Alt 를 누른 상태로 오른쪽 대각선 하단의 버튼을 클릭해주겠습니다.

 

그러면 캔버스 사이즈에 맞춰서 이미지도 맞춰지는 모습을 볼 수 있습니다.

 

고양이 밑에 체력바가 있어야 하니까 Canvas의 Y 위치를 -4로 변경해주겠습니다.

 

변경된 모습

 

 

체력바의 Back과 Front로 나누기

만든 체력바 이름을 'Back'으로 설정해주시고, Ctrl+D로 복사한 오브젝트를 'Front'로 변경해주었습니다.

 

Front의 Anchors의 X값을 0으로 변경해줄 건데

 

0.5 일 때는 초록색 화살표가 가운데 있죠?

 

0으로 변경해주니까 제일 왼쪽으로 옮겨졌습니다.

이렇게 해서 체력을 왼쪽 끝부터 계산하게 설정했습니다.

밥을 먹이면 체력바가 왼쪽에서 오른쪽으로 점점 차고, 체력바가 완전히 빨간색으로 다 차게 된다면 고양이에게 밥을 다 주게 됩니다.

 

Front의 색상을 빨간색으로 해주시고, Scale을 0으로 해주시면

 

이렇게 흰색이고, Scale을 0과 1사이의 값으로 해주시면

 

이렇게 체력바 색상이 움직입니다.

체력바의 값은 0~1사이로 움직일 것입니다.

 

 

체력바 UI는 완성했고, 고양이가 Food에 맞으면 체력바가 올라가도록 코드를 작성해주어야 합니다.

다음편으로 이어집니다~

2024.04.03 - [Unity/2D] - [Unity/2D] 체력바 게이지 상승하는 코드 작성 - UI, OnTriggerEnter2D